mirror of https://github.com/vitalif/dimple
Composite Axes
parent
793446c795
commit
600816303f
|
@ -62,6 +62,10 @@ var dimple = {
|
||||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-logBase
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-logBase
|
||||||
this.logBase = 10;
|
this.logBase = 10;
|
||||||
|
|
||||||
|
// If this is a slave axis to a master composite axis, this stores a reference to the master
|
||||||
|
this._master = null;
|
||||||
|
// If this is a composite axis, store links to all slaves
|
||||||
|
this._slaves = [];
|
||||||
// The scale determined by the update method
|
// The scale determined by the update method
|
||||||
this._scale = null;
|
this._scale = null;
|
||||||
// The minimum and maximum axis values
|
// The minimum and maximum axis values
|
||||||
|
@ -167,6 +171,18 @@ var dimple = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_getTopMaster.js
|
||||||
|
this._getTopMaster = function () {
|
||||||
|
// The highest level master
|
||||||
|
var topMaster = this;
|
||||||
|
if (this.master !== null && this.master !== undefined) {
|
||||||
|
topMaster = this.master._getTopMaster();
|
||||||
|
}
|
||||||
|
return topMaster;
|
||||||
|
};
|
||||||
|
|
||||||
// Copyright: 2013 PMSI-AlignAlytics
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
// Source: /src/objects/axis/methods/_hasCategories.js
|
// Source: /src/objects/axis/methods/_hasCategories.js
|
||||||
|
@ -368,6 +384,12 @@ var dimple = {
|
||||||
.range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
|
.range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
|
||||||
.domain([this._min, this._max]);
|
.domain([this._min, this._max]);
|
||||||
}
|
}
|
||||||
|
// Apply this scale to all slaves as well
|
||||||
|
if (this._slaves !== null && this._slaves !== undefined && this._slaves.length > 0) {
|
||||||
|
this._slaves.forEach(function (slave) {
|
||||||
|
slave._scale = this._scale;
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
// Check that the axis ends on a labelled tick
|
// Check that the axis ends on a labelled tick
|
||||||
if ((refactor === null || refactor === undefined || refactor === false) && !this._hasTimeField() && this._scale !== null && this._scale.ticks !== null && this._scale.ticks !== undefined && this._scale.ticks(10).length > 0 && (this.position === "x" || this.position === "y")) {
|
if ((refactor === null || refactor === undefined || refactor === false) && !this._hasTimeField() && this._scale !== null && this._scale.ticks !== null && this._scale.ticks !== undefined && this._scale.ticks(10).length > 0 && (this.position === "x" || this.position === "y")) {
|
||||||
|
|
||||||
|
@ -917,21 +939,53 @@ var dimple = {
|
||||||
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
// Source: /src/objects/chart/methods/addAxis.js
|
// Source: /src/objects/chart/methods/addAxis.js
|
||||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
||||||
this.addAxis = function (position, categoryFields, measure, timeField) {
|
this.addAxis = function (position, categoryFields, measure, timeField) {
|
||||||
|
// The axis to return
|
||||||
|
var axis = null,
|
||||||
|
master = null;
|
||||||
// Convert the passed category fields to an array in case a single string is sent
|
// Convert the passed category fields to an array in case a single string is sent
|
||||||
if (categoryFields !== null && categoryFields !== undefined) {
|
if (categoryFields !== null && categoryFields !== undefined) {
|
||||||
categoryFields = [].concat(categoryFields);
|
categoryFields = [].concat(categoryFields);
|
||||||
}
|
}
|
||||||
// Create the axis object based on the passed parameters
|
// If this is a standard axis a position will have been passed as a string
|
||||||
var axis = new dimple.axis(
|
if ((typeof position) === "string" || (position instanceof String)) {
|
||||||
this,
|
// Create the axis object based on the passed parameters
|
||||||
position,
|
axis = new dimple.axis(
|
||||||
categoryFields,
|
this,
|
||||||
measure,
|
position,
|
||||||
timeField
|
categoryFields,
|
||||||
);
|
measure,
|
||||||
// Add the axis to the array for the chart
|
timeField
|
||||||
this.axes.push(axis);
|
);
|
||||||
|
// Add the axis to the array for the chart
|
||||||
|
this.axes.push(axis);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// In the case of a composite axis the position will contain another axis
|
||||||
|
// To make this code more readable reassign the position to a different variable
|
||||||
|
master = position;
|
||||||
|
// Construct the axis object
|
||||||
|
axis = new dimple.axis(
|
||||||
|
this,
|
||||||
|
master.position,
|
||||||
|
categoryFields,
|
||||||
|
measure,
|
||||||
|
timeField
|
||||||
|
);
|
||||||
|
// Validate that the master and child axes are compatible
|
||||||
|
if (axis._hasMeasure() !== master._hasMeasure()) {
|
||||||
|
throw "You have specified a composite axis where some but not all axes have a measure - this is not supported, all axes must be of the same type.";
|
||||||
|
} else if (axis._hasTimeField() !== master._hasTimeField()) {
|
||||||
|
throw "You have specified a composite axis where some but not all axes have a time field - this is not supported, all axes must be of the same type.";
|
||||||
|
} else if ((axis.categoryFields === null || axis.categoryFields === undefined ? 0 : axis.categoryFields.length) !== (master.categoryFields === null || master.categoryFields === undefined ? 0 : master.categoryFields.length)) {
|
||||||
|
throw "You have specified a composite axis where axes have differing numbers of category fields - this is not supported, all axes must be of the same type.";
|
||||||
|
}
|
||||||
|
// Set the master, meaning that rather than rendering itself, this axis will contribute to the
|
||||||
|
// scaling of the master
|
||||||
|
axis._master = master;
|
||||||
|
// Do not add the axis to the chart's axes array, instead add it the master
|
||||||
|
master._slaves.push(axis);
|
||||||
|
}
|
||||||
// return the axis
|
// return the axis
|
||||||
return axis;
|
return axis;
|
||||||
};
|
};
|
||||||
|
@ -1115,7 +1169,8 @@ var dimple = {
|
||||||
chartX = this._xPixels(),
|
chartX = this._xPixels(),
|
||||||
chartY = this._yPixels(),
|
chartY = this._yPixels(),
|
||||||
chartWidth = this._widthPixels(),
|
chartWidth = this._widthPixels(),
|
||||||
chartHeight = this._heightPixels();
|
chartHeight = this._heightPixels(),
|
||||||
|
linkedDimensions = [];
|
||||||
|
|
||||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||||
// decorate the series with it now
|
// decorate the series with it now
|
||||||
|
@ -1135,7 +1190,7 @@ var dimple = {
|
||||||
// Find any linked series
|
// Find any linked series
|
||||||
this.series.forEach(function (series) {
|
this.series.forEach(function (series) {
|
||||||
// if this axis is linked
|
// if this axis is linked
|
||||||
if (series[axis.position] === axis) {
|
if (series._deepMatch(axis)) {
|
||||||
// Get the bounds
|
// Get the bounds
|
||||||
var bounds = series._axisBounds(axis.position);
|
var bounds = series._axisBounds(axis.position);
|
||||||
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
||||||
|
@ -1156,28 +1211,54 @@ var dimple = {
|
||||||
// Parse the dates and assign the min and max
|
// Parse the dates and assign the min and max
|
||||||
axis._min = null;
|
axis._min = null;
|
||||||
axis._max = null;
|
axis._max = null;
|
||||||
|
// Create an array of dimensions for this axis
|
||||||
|
this.series.forEach(function (series) {
|
||||||
|
// if this axis is linked
|
||||||
|
if (series._deepMatch(axis)
|
||||||
|
&& series[axis.position].timeField !== null
|
||||||
|
&& series[axis.position].timeField !== undefined
|
||||||
|
&& linkedDimensions.indexOf(series[axis.position].timeField) === -1) {
|
||||||
|
linkedDimensions.push(series[axis.position].timeField);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
// Iterate the data
|
||||||
this.data.forEach(function (d) {
|
this.data.forEach(function (d) {
|
||||||
var dt = axis._parseDate(d[axis.timeField]);
|
// Find any linked series
|
||||||
if (axis._min === null || dt < axis._min) {
|
linkedDimensions.forEach(function (dimension) {
|
||||||
axis._min = dt;
|
// Check it's timeField
|
||||||
}
|
var dt = axis._parseDate(d[dimension]);
|
||||||
if (axis._max === null || dt > axis._max) {
|
if (axis._min === null || dt < axis._min) {
|
||||||
axis._max = dt;
|
axis._min = dt;
|
||||||
}
|
}
|
||||||
|
if (axis._max === null || dt > axis._max) {
|
||||||
|
axis._max = dt;
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
}, this);
|
}, this);
|
||||||
} else if (axis._hasCategories()) {
|
} else if (axis._hasCategories()) {
|
||||||
// A category axis is just set to show the number of categories
|
// A category axis is just set to show the number of categories
|
||||||
axis._min = 0;
|
axis._min = 0;
|
||||||
distinctCats = [];
|
distinctCats = [];
|
||||||
this.data.forEach(function (d) {
|
// Create an array of dimensions for this axis
|
||||||
if (distinctCats.indexOf(d[axis.categoryFields[0]]) === -1) {
|
this.series.forEach(function (series) {
|
||||||
distinctCats.push(d[axis.categoryFields[0]]);
|
// if this axis is linked
|
||||||
|
if (series._deepMatch(axis)
|
||||||
|
&& series[axis.position].categoryFields[0] !== null
|
||||||
|
&& series[axis.position].categoryFields[0] !== undefined
|
||||||
|
&& linkedDimensions.indexOf(series[axis.position].categoryFields[0]) === -1) {
|
||||||
|
linkedDimensions.push(series[axis.position].categoryFields[0]);
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
|
this.data.forEach(function (d) {
|
||||||
|
linkedDimensions.forEach(function (dimension) {
|
||||||
|
if (distinctCats.indexOf(d[dimension]) === -1) {
|
||||||
|
distinctCats.push(d[dimension]);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
}, this);
|
||||||
axis._max = distinctCats.length;
|
axis._max = distinctCats.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Update the axis now we have all information set
|
// Update the axis now we have all information set
|
||||||
axis._update();
|
axis._update();
|
||||||
|
|
||||||
|
@ -1961,6 +2042,23 @@ var dimple = {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/series/methods/_deepMatch.js
|
||||||
|
this._deepMatch = function (axis) {
|
||||||
|
// Return true if this series is dependant on the axis or any of its dependants
|
||||||
|
var match = false;
|
||||||
|
if (this[axis.position] === axis) {
|
||||||
|
match = true;
|
||||||
|
} else if (axis._slaves !== undefined && axis._slaves !== null && axis._slaves.length > 0) {
|
||||||
|
axis._slaves.forEach(function (slave) {
|
||||||
|
match = (match || this._deepMatch(slave));
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
return match;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// Copyright: 2013 PMSI-AlignAlytics
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
// Source: /src/objects/series/methods/_dropLineOrigin.js
|
// Source: /src/objects/series/methods/_dropLineOrigin.js
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// This is the simple vertical grouped stacked 100% bar example
|
// This is the simple vertical grouped stacked 100% bar example
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// Create the svg and set the dimensions
|
// Create the svg and set the dimensions
|
||||||
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
// Add a bullet chart to the svg
|
// Add a bullet chart to the svg
|
||||||
function addBullet(x, y, height, width, measure, lowMark,
|
function addBullet(x, y, height, width, measure, lowMark,
|
||||||
highMark, axisMax, compareField, keyVal,
|
highMark, compareField, keyVal,
|
||||||
compareVal, color) {
|
compareVal, color) {
|
||||||
|
|
||||||
// This is a custom algorithm to lighten the passed color, I find I can't
|
// This is a custom algorithm to lighten the passed color, I find I can't
|
||||||
|
@ -62,22 +62,12 @@
|
||||||
var bX = bullet.addMeasureAxis("x", "Value");
|
var bX = bullet.addMeasureAxis("x", "Value");
|
||||||
|
|
||||||
// Add a separate x axis for each measure, this is required
|
// Add a separate x axis for each measure, this is required
|
||||||
// where we want to do a series for each measure
|
// where we want to do a series for each measure. By passing
|
||||||
var lX = bullet.addMeasureAxis("x", "Low Value");
|
// another axis in place of the position we combine them to create
|
||||||
var hX = bullet.addMeasureAxis("x", "High Value");
|
// a 4 measure composite.
|
||||||
var cX = bullet.addMeasureAxis("x", "Compare Value");
|
var lX = bullet.addMeasureAxis(bX, "Low Value");
|
||||||
|
var hX = bullet.addMeasureAxis(bX, "High Value");
|
||||||
// Fix all max values so that a single x axis will read correctly
|
var cX = bullet.addMeasureAxis(bX, "Compare Value");
|
||||||
// for all 4. Without this all axes would scale differently
|
|
||||||
bX.overrideMax = axisMax;
|
|
||||||
lX.overrideMax = axisMax;
|
|
||||||
hX.overrideMax = axisMax;
|
|
||||||
cX.overrideMax = axisMax;
|
|
||||||
|
|
||||||
// Hide the additional axes
|
|
||||||
lX.hidden = true;
|
|
||||||
hX.hidden = true;
|
|
||||||
cX.hidden = true;
|
|
||||||
|
|
||||||
// Add a series for the marks first (the order defines)
|
// Add a series for the marks first (the order defines)
|
||||||
// document z position - first at back, last on top
|
// document z position - first at back, last on top
|
||||||
|
@ -119,17 +109,17 @@
|
||||||
// means to determine axis bounds would be better but I don't want to
|
// means to determine axis bounds would be better but I don't want to
|
||||||
// bloat this example.
|
// bloat this example.
|
||||||
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
|
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
|
||||||
3000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
|
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
|
||||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
|
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
|
||||||
500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
|
"Owner", "Aperture", "Black Mesa", "#FB8072");
|
||||||
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
|
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
|
||||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
|
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
|
||||||
160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
|
"Owner", "Aperture", "Black Mesa", "#FB8072");
|
||||||
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
|
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
|
||||||
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// Create the svg and set the dimensions
|
// Create the svg and set the dimensions
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
var data = [
|
var data = [
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer" style="height: 100%">
|
<div id="chartContainer" style="height: 100%">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// In version 1.1.0 it's possible to initialise any size parameter with a
|
// In version 1.1.0 it's possible to initialise any size parameter with a
|
||||||
// % value as well as pixels
|
// % value as well as pixels
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// This code should support any data in this structure changing the data here
|
// This code should support any data in this structure changing the data here
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.3.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
// Add a bullet chart to the svg
|
// Add a bullet chart to the svg
|
||||||
function addBullet(x, y, height, width, measure, lowMark,
|
function addBullet(x, y, height, width, measure, lowMark,
|
||||||
highMark, axisMax, compareField, keyVal,
|
highMark, compareField, keyVal,
|
||||||
compareVal, color) {
|
compareVal, color) {
|
||||||
|
|
||||||
// This is a custom algorithm to lighten the passed color, I find I can't
|
// This is a custom algorithm to lighten the passed color, I find I can't
|
||||||
|
@ -59,22 +59,12 @@
|
||||||
var bX = bullet.addMeasureAxis("x", "Value");
|
var bX = bullet.addMeasureAxis("x", "Value");
|
||||||
|
|
||||||
// Add a separate x axis for each measure, this is required
|
// Add a separate x axis for each measure, this is required
|
||||||
// where we want to do a series for each measure
|
// where we want to do a series for each measure. By passing
|
||||||
var lX = bullet.addMeasureAxis("x", "Low Value");
|
// another axis in place of the position we combine them to create
|
||||||
var hX = bullet.addMeasureAxis("x", "High Value");
|
// a 4 measure composite.
|
||||||
var cX = bullet.addMeasureAxis("x", "Compare Value");
|
var lX = bullet.addMeasureAxis(bX, "Low Value");
|
||||||
|
var hX = bullet.addMeasureAxis(bX, "High Value");
|
||||||
// Fix all max values so that a single x axis will read correctly
|
var cX = bullet.addMeasureAxis(bX, "Compare Value");
|
||||||
// for all 4. Without this all axes would scale differently
|
|
||||||
bX.overrideMax = axisMax;
|
|
||||||
lX.overrideMax = axisMax;
|
|
||||||
hX.overrideMax = axisMax;
|
|
||||||
cX.overrideMax = axisMax;
|
|
||||||
|
|
||||||
// Hide the additional axes
|
|
||||||
lX.hidden = true;
|
|
||||||
hX.hidden = true;
|
|
||||||
cX.hidden = true;
|
|
||||||
|
|
||||||
// Add a series for the marks first (the order defines)
|
// Add a series for the marks first (the order defines)
|
||||||
// document z position - first at back, last on top
|
// document z position - first at back, last on top
|
||||||
|
@ -116,17 +106,17 @@
|
||||||
// means to determine axis bounds would be better but I don't want to
|
// means to determine axis bounds would be better but I don't want to
|
||||||
// bloat this example.
|
// bloat this example.
|
||||||
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
|
addBullet(100, 30, 430, 30, "Unit Sales", 2300000, 2800000,
|
||||||
3000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
|
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
|
||||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
|
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
|
||||||
500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
|
"Owner", "Aperture", "Black Mesa", "#FB8072");
|
||||||
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
|
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
|
||||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
|
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
|
||||||
160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
|
"Owner", "Aperture", "Black Mesa", "#FB8072");
|
||||||
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
|
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
|
||||||
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -47,6 +47,10 @@
|
||||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-logBase
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-logBase
|
||||||
this.logBase = 10;
|
this.logBase = 10;
|
||||||
|
|
||||||
|
// If this is a slave axis to a master composite axis, this stores a reference to the master
|
||||||
|
this._master = null;
|
||||||
|
// If this is a composite axis, store links to all slaves
|
||||||
|
this._slaves = [];
|
||||||
// The scale determined by the update method
|
// The scale determined by the update method
|
||||||
this._scale = null;
|
this._scale = null;
|
||||||
// The minimum and maximum axis values
|
// The minimum and maximum axis values
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/axis/methods/_getTopMaster.js
|
||||||
|
this._getTopMaster = function () {
|
||||||
|
// The highest level master
|
||||||
|
var topMaster = this;
|
||||||
|
if (this.master !== null && this.master !== undefined) {
|
||||||
|
topMaster = this.master._getTopMaster();
|
||||||
|
}
|
||||||
|
return topMaster;
|
||||||
|
};
|
|
@ -150,6 +150,12 @@
|
||||||
.range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
|
.range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
|
||||||
.domain([this._min, this._max]);
|
.domain([this._min, this._max]);
|
||||||
}
|
}
|
||||||
|
// Apply this scale to all slaves as well
|
||||||
|
if (this._slaves !== null && this._slaves !== undefined && this._slaves.length > 0) {
|
||||||
|
this._slaves.forEach(function (slave) {
|
||||||
|
slave._scale = this._scale;
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
// Check that the axis ends on a labelled tick
|
// Check that the axis ends on a labelled tick
|
||||||
if ((refactor === null || refactor === undefined || refactor === false) && !this._hasTimeField() && this._scale !== null && this._scale.ticks !== null && this._scale.ticks !== undefined && this._scale.ticks(10).length > 0 && (this.position === "x" || this.position === "y")) {
|
if ((refactor === null || refactor === undefined || refactor === false) && !this._hasTimeField() && this._scale !== null && this._scale.ticks !== null && this._scale.ticks !== undefined && this._scale.ticks(10).length > 0 && (this.position === "x" || this.position === "y")) {
|
||||||
|
|
||||||
|
|
|
@ -2,21 +2,53 @@
|
||||||
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
// Source: /src/objects/chart/methods/addAxis.js
|
// Source: /src/objects/chart/methods/addAxis.js
|
||||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
||||||
this.addAxis = function (position, categoryFields, measure, timeField) {
|
this.addAxis = function (position, categoryFields, measure, timeField) {
|
||||||
|
// The axis to return
|
||||||
|
var axis = null,
|
||||||
|
master = null;
|
||||||
// Convert the passed category fields to an array in case a single string is sent
|
// Convert the passed category fields to an array in case a single string is sent
|
||||||
if (categoryFields !== null && categoryFields !== undefined) {
|
if (categoryFields !== null && categoryFields !== undefined) {
|
||||||
categoryFields = [].concat(categoryFields);
|
categoryFields = [].concat(categoryFields);
|
||||||
}
|
}
|
||||||
// Create the axis object based on the passed parameters
|
// If this is a standard axis a position will have been passed as a string
|
||||||
var axis = new dimple.axis(
|
if ((typeof position) === "string" || (position instanceof String)) {
|
||||||
this,
|
// Create the axis object based on the passed parameters
|
||||||
position,
|
axis = new dimple.axis(
|
||||||
categoryFields,
|
this,
|
||||||
measure,
|
position,
|
||||||
timeField
|
categoryFields,
|
||||||
);
|
measure,
|
||||||
// Add the axis to the array for the chart
|
timeField
|
||||||
this.axes.push(axis);
|
);
|
||||||
|
// Add the axis to the array for the chart
|
||||||
|
this.axes.push(axis);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// In the case of a composite axis the position will contain another axis
|
||||||
|
// To make this code more readable reassign the position to a different variable
|
||||||
|
master = position;
|
||||||
|
// Construct the axis object
|
||||||
|
axis = new dimple.axis(
|
||||||
|
this,
|
||||||
|
master.position,
|
||||||
|
categoryFields,
|
||||||
|
measure,
|
||||||
|
timeField
|
||||||
|
);
|
||||||
|
// Validate that the master and child axes are compatible
|
||||||
|
if (axis._hasMeasure() !== master._hasMeasure()) {
|
||||||
|
throw "You have specified a composite axis where some but not all axes have a measure - this is not supported, all axes must be of the same type.";
|
||||||
|
} else if (axis._hasTimeField() !== master._hasTimeField()) {
|
||||||
|
throw "You have specified a composite axis where some but not all axes have a time field - this is not supported, all axes must be of the same type.";
|
||||||
|
} else if ((axis.categoryFields === null || axis.categoryFields === undefined ? 0 : axis.categoryFields.length) !== (master.categoryFields === null || master.categoryFields === undefined ? 0 : master.categoryFields.length)) {
|
||||||
|
throw "You have specified a composite axis where axes have differing numbers of category fields - this is not supported, all axes must be of the same type.";
|
||||||
|
}
|
||||||
|
// Set the master, meaning that rather than rendering itself, this axis will contribute to the
|
||||||
|
// scaling of the master
|
||||||
|
axis._master = master;
|
||||||
|
// Do not add the axis to the chart's axes array, instead add it the master
|
||||||
|
master._slaves.push(axis);
|
||||||
|
}
|
||||||
// return the axis
|
// return the axis
|
||||||
return axis;
|
return axis;
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,7 +14,8 @@
|
||||||
chartX = this._xPixels(),
|
chartX = this._xPixels(),
|
||||||
chartY = this._yPixels(),
|
chartY = this._yPixels(),
|
||||||
chartWidth = this._widthPixels(),
|
chartWidth = this._widthPixels(),
|
||||||
chartHeight = this._heightPixels();
|
chartHeight = this._heightPixels(),
|
||||||
|
linkedDimensions = [];
|
||||||
|
|
||||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||||
// decorate the series with it now
|
// decorate the series with it now
|
||||||
|
@ -34,7 +35,7 @@
|
||||||
// Find any linked series
|
// Find any linked series
|
||||||
this.series.forEach(function (series) {
|
this.series.forEach(function (series) {
|
||||||
// if this axis is linked
|
// if this axis is linked
|
||||||
if (series[axis.position] === axis) {
|
if (series._deepMatch(axis)) {
|
||||||
// Get the bounds
|
// Get the bounds
|
||||||
var bounds = series._axisBounds(axis.position);
|
var bounds = series._axisBounds(axis.position);
|
||||||
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
||||||
|
@ -55,28 +56,54 @@
|
||||||
// Parse the dates and assign the min and max
|
// Parse the dates and assign the min and max
|
||||||
axis._min = null;
|
axis._min = null;
|
||||||
axis._max = null;
|
axis._max = null;
|
||||||
|
// Create an array of dimensions for this axis
|
||||||
|
this.series.forEach(function (series) {
|
||||||
|
// if this axis is linked
|
||||||
|
if (series._deepMatch(axis)
|
||||||
|
&& series[axis.position].timeField !== null
|
||||||
|
&& series[axis.position].timeField !== undefined
|
||||||
|
&& linkedDimensions.indexOf(series[axis.position].timeField) === -1) {
|
||||||
|
linkedDimensions.push(series[axis.position].timeField);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
// Iterate the data
|
||||||
this.data.forEach(function (d) {
|
this.data.forEach(function (d) {
|
||||||
var dt = axis._parseDate(d[axis.timeField]);
|
// Find any linked series
|
||||||
if (axis._min === null || dt < axis._min) {
|
linkedDimensions.forEach(function (dimension) {
|
||||||
axis._min = dt;
|
// Check it's timeField
|
||||||
}
|
var dt = axis._parseDate(d[dimension]);
|
||||||
if (axis._max === null || dt > axis._max) {
|
if (axis._min === null || dt < axis._min) {
|
||||||
axis._max = dt;
|
axis._min = dt;
|
||||||
}
|
}
|
||||||
|
if (axis._max === null || dt > axis._max) {
|
||||||
|
axis._max = dt;
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
}, this);
|
}, this);
|
||||||
} else if (axis._hasCategories()) {
|
} else if (axis._hasCategories()) {
|
||||||
// A category axis is just set to show the number of categories
|
// A category axis is just set to show the number of categories
|
||||||
axis._min = 0;
|
axis._min = 0;
|
||||||
distinctCats = [];
|
distinctCats = [];
|
||||||
this.data.forEach(function (d) {
|
// Create an array of dimensions for this axis
|
||||||
if (distinctCats.indexOf(d[axis.categoryFields[0]]) === -1) {
|
this.series.forEach(function (series) {
|
||||||
distinctCats.push(d[axis.categoryFields[0]]);
|
// if this axis is linked
|
||||||
|
if (series._deepMatch(axis)
|
||||||
|
&& series[axis.position].categoryFields[0] !== null
|
||||||
|
&& series[axis.position].categoryFields[0] !== undefined
|
||||||
|
&& linkedDimensions.indexOf(series[axis.position].categoryFields[0]) === -1) {
|
||||||
|
linkedDimensions.push(series[axis.position].categoryFields[0]);
|
||||||
}
|
}
|
||||||
}, this);
|
}, this);
|
||||||
|
this.data.forEach(function (d) {
|
||||||
|
linkedDimensions.forEach(function (dimension) {
|
||||||
|
if (distinctCats.indexOf(d[dimension]) === -1) {
|
||||||
|
distinctCats.push(d[dimension]);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
}, this);
|
||||||
axis._max = distinctCats.length;
|
axis._max = distinctCats.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Update the axis now we have all information set
|
// Update the axis now we have all information set
|
||||||
axis._update();
|
axis._update();
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
// Copyright: 2013 PMSI-AlignAlytics
|
||||||
|
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||||
|
// Source: /src/objects/series/methods/_deepMatch.js
|
||||||
|
this._deepMatch = function (axis) {
|
||||||
|
// Return true if this series is dependant on the axis or any of its dependants
|
||||||
|
var match = false;
|
||||||
|
if (this[axis.position] === axis) {
|
||||||
|
match = true;
|
||||||
|
} else if (axis._slaves !== undefined && axis._slaves !== null && axis._slaves.length > 0) {
|
||||||
|
axis._slaves.forEach(function (slave) {
|
||||||
|
match = (match || this._deepMatch(slave));
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
return match;
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue