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
|
||||
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
|
||||
this._scale = null;
|
||||
// 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
|
||||
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||
// 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)])
|
||||
.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
|
||||
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")) {
|
||||
|
||||
|
@ -918,12 +940,17 @@ var dimple = {
|
|||
// Source: /src/objects/chart/methods/addAxis.js
|
||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
||||
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
|
||||
if (categoryFields !== null && categoryFields !== undefined) {
|
||||
categoryFields = [].concat(categoryFields);
|
||||
}
|
||||
// If this is a standard axis a position will have been passed as a string
|
||||
if ((typeof position) === "string" || (position instanceof String)) {
|
||||
// Create the axis object based on the passed parameters
|
||||
var axis = new dimple.axis(
|
||||
axis = new dimple.axis(
|
||||
this,
|
||||
position,
|
||||
categoryFields,
|
||||
|
@ -932,6 +959,33 @@ var dimple = {
|
|||
);
|
||||
// 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 axis;
|
||||
};
|
||||
|
@ -1115,7 +1169,8 @@ var dimple = {
|
|||
chartX = this._xPixels(),
|
||||
chartY = this._yPixels(),
|
||||
chartWidth = this._widthPixels(),
|
||||
chartHeight = this._heightPixels();
|
||||
chartHeight = this._heightPixels(),
|
||||
linkedDimensions = [];
|
||||
|
||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||
// decorate the series with it now
|
||||
|
@ -1135,7 +1190,7 @@ var dimple = {
|
|||
// Find any linked series
|
||||
this.series.forEach(function (series) {
|
||||
// if this axis is linked
|
||||
if (series[axis.position] === axis) {
|
||||
if (series._deepMatch(axis)) {
|
||||
// Get the bounds
|
||||
var bounds = series._axisBounds(axis.position);
|
||||
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
||||
|
@ -1156,8 +1211,22 @@ var dimple = {
|
|||
// Parse the dates and assign the min and max
|
||||
axis._min = 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) {
|
||||
var dt = axis._parseDate(d[axis.timeField]);
|
||||
// Find any linked series
|
||||
linkedDimensions.forEach(function (dimension) {
|
||||
// Check it's timeField
|
||||
var dt = axis._parseDate(d[dimension]);
|
||||
if (axis._min === null || dt < axis._min) {
|
||||
axis._min = dt;
|
||||
}
|
||||
|
@ -1165,19 +1234,31 @@ var dimple = {
|
|||
axis._max = dt;
|
||||
}
|
||||
}, this);
|
||||
}, this);
|
||||
} else if (axis._hasCategories()) {
|
||||
// A category axis is just set to show the number of categories
|
||||
axis._min = 0;
|
||||
distinctCats = [];
|
||||
this.data.forEach(function (d) {
|
||||
if (distinctCats.indexOf(d[axis.categoryFields[0]]) === -1) {
|
||||
distinctCats.push(d[axis.categoryFields[0]]);
|
||||
// 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].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.data.forEach(function (d) {
|
||||
linkedDimensions.forEach(function (dimension) {
|
||||
if (distinctCats.indexOf(d[dimension]) === -1) {
|
||||
distinctCats.push(d[dimension]);
|
||||
}
|
||||
}, this);
|
||||
}, this);
|
||||
axis._max = distinctCats.length;
|
||||
}
|
||||
|
||||
|
||||
// Update the axis now we have all information set
|
||||
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
|
||||
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
|
||||
// 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">
|
||||
<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">
|
||||
// This is the simple vertical grouped stacked 100% bar example
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
// Create the svg and set the dimensions
|
||||
|
@ -13,7 +13,7 @@
|
|||
|
||||
// Add a bullet chart to the svg
|
||||
function addBullet(x, y, height, width, measure, lowMark,
|
||||
highMark, axisMax, compareField, keyVal,
|
||||
highMark, compareField, keyVal,
|
||||
compareVal, color) {
|
||||
|
||||
// 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");
|
||||
|
||||
// Add a separate x axis for each measure, this is required
|
||||
// where we want to do a series for each measure
|
||||
var lX = bullet.addMeasureAxis("x", "Low Value");
|
||||
var hX = bullet.addMeasureAxis("x", "High Value");
|
||||
var cX = bullet.addMeasureAxis("x", "Compare Value");
|
||||
|
||||
// Fix all max values so that a single x axis will read correctly
|
||||
// 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;
|
||||
// where we want to do a series for each measure. By passing
|
||||
// another axis in place of the position we combine them to create
|
||||
// a 4 measure composite.
|
||||
var lX = bullet.addMeasureAxis(bX, "Low Value");
|
||||
var hX = bullet.addMeasureAxis(bX, "High Value");
|
||||
var cX = bullet.addMeasureAxis(bX, "Compare Value");
|
||||
|
||||
// Add a series for the marks first (the order defines)
|
||||
// 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
|
||||
// bloat this example.
|
||||
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,
|
||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
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,
|
||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
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,
|
||||
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
// Create the svg and set the dimensions
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
var data = [
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer" style="height: 100%">
|
||||
<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">
|
||||
// In version 1.1.0 it's possible to initialise any size parameter with a
|
||||
// % value as well as pixels
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
|
||||
// This code should support any data in this structure changing the data here
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<div id="chartContainer">
|
||||
<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">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
// Add a bullet chart to the svg
|
||||
function addBullet(x, y, height, width, measure, lowMark,
|
||||
highMark, axisMax, compareField, keyVal,
|
||||
highMark, compareField, keyVal,
|
||||
compareVal, color) {
|
||||
|
||||
// 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");
|
||||
|
||||
// Add a separate x axis for each measure, this is required
|
||||
// where we want to do a series for each measure
|
||||
var lX = bullet.addMeasureAxis("x", "Low Value");
|
||||
var hX = bullet.addMeasureAxis("x", "High Value");
|
||||
var cX = bullet.addMeasureAxis("x", "Compare Value");
|
||||
|
||||
// Fix all max values so that a single x axis will read correctly
|
||||
// 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;
|
||||
// where we want to do a series for each measure. By passing
|
||||
// another axis in place of the position we combine them to create
|
||||
// a 4 measure composite.
|
||||
var lX = bullet.addMeasureAxis(bX, "Low Value");
|
||||
var hX = bullet.addMeasureAxis(bX, "High Value");
|
||||
var cX = bullet.addMeasureAxis(bX, "Compare Value");
|
||||
|
||||
// Add a series for the marks first (the order defines)
|
||||
// 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
|
||||
// bloat this example.
|
||||
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,
|
||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
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,
|
||||
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
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,
|
||||
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
"Owner", "Aperture", "Black Mesa", "#80B1D3");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -47,6 +47,10 @@
|
|||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#wiki-logBase
|
||||
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
|
||||
this._scale = null;
|
||||
// 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)])
|
||||
.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
|
||||
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")) {
|
||||
|
||||
|
|
|
@ -3,12 +3,17 @@
|
|||
// Source: /src/objects/chart/methods/addAxis.js
|
||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-addAxis
|
||||
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
|
||||
if (categoryFields !== null && categoryFields !== undefined) {
|
||||
categoryFields = [].concat(categoryFields);
|
||||
}
|
||||
// If this is a standard axis a position will have been passed as a string
|
||||
if ((typeof position) === "string" || (position instanceof String)) {
|
||||
// Create the axis object based on the passed parameters
|
||||
var axis = new dimple.axis(
|
||||
axis = new dimple.axis(
|
||||
this,
|
||||
position,
|
||||
categoryFields,
|
||||
|
@ -17,6 +22,33 @@
|
|||
);
|
||||
// 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 axis;
|
||||
};
|
||||
|
|
|
@ -14,7 +14,8 @@
|
|||
chartX = this._xPixels(),
|
||||
chartY = this._yPixels(),
|
||||
chartWidth = this._widthPixels(),
|
||||
chartHeight = this._heightPixels();
|
||||
chartHeight = this._heightPixels(),
|
||||
linkedDimensions = [];
|
||||
|
||||
// Many of the draw methods use positioning data in each series. Therefore we should
|
||||
// decorate the series with it now
|
||||
|
@ -34,7 +35,7 @@
|
|||
// Find any linked series
|
||||
this.series.forEach(function (series) {
|
||||
// if this axis is linked
|
||||
if (series[axis.position] === axis) {
|
||||
if (series._deepMatch(axis)) {
|
||||
// Get the bounds
|
||||
var bounds = series._axisBounds(axis.position);
|
||||
if (axis._min > bounds.min) { axis._min = bounds.min; }
|
||||
|
@ -55,8 +56,22 @@
|
|||
// Parse the dates and assign the min and max
|
||||
axis._min = 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) {
|
||||
var dt = axis._parseDate(d[axis.timeField]);
|
||||
// Find any linked series
|
||||
linkedDimensions.forEach(function (dimension) {
|
||||
// Check it's timeField
|
||||
var dt = axis._parseDate(d[dimension]);
|
||||
if (axis._min === null || dt < axis._min) {
|
||||
axis._min = dt;
|
||||
}
|
||||
|
@ -64,19 +79,31 @@
|
|||
axis._max = dt;
|
||||
}
|
||||
}, this);
|
||||
}, this);
|
||||
} else if (axis._hasCategories()) {
|
||||
// A category axis is just set to show the number of categories
|
||||
axis._min = 0;
|
||||
distinctCats = [];
|
||||
this.data.forEach(function (d) {
|
||||
if (distinctCats.indexOf(d[axis.categoryFields[0]]) === -1) {
|
||||
distinctCats.push(d[axis.categoryFields[0]]);
|
||||
// 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].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.data.forEach(function (d) {
|
||||
linkedDimensions.forEach(function (dimension) {
|
||||
if (distinctCats.indexOf(d[dimension]) === -1) {
|
||||
distinctCats.push(d[dimension]);
|
||||
}
|
||||
}, this);
|
||||
}, this);
|
||||
axis._max = distinctCats.length;
|
||||
}
|
||||
|
||||
|
||||
// Update the axis now we have all information set
|
||||
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