Composite Axes

master
John Kiernander 2014-01-02 09:09:43 +00:00
parent 793446c795
commit 600816303f
70 changed files with 332 additions and 157 deletions

146
dist/dimple.v1.1.3.js vendored
View File

@ -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")) {
@ -917,21 +939,53 @@ var dimple = {
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// 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) {
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);
}
// Create the axis object based on the passed parameters
var axis = new dimple.axis(
this,
position,
categoryFields,
measure,
timeField
);
// Add the axis to the array for the chart
this.axes.push(axis);
// 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
axis = new dimple.axis(
this,
position,
categoryFields,
measure,
timeField
);
// 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,28 +1211,54 @@ 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]);
if (axis._min === null || dt < axis._min) {
axis._min = dt;
}
if (axis._max === null || dt > axis._max) {
axis._max = dt;
}
// 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;
}
if (axis._max === null || dt > axis._max) {
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

View File

@ -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);

View File

@ -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>

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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);

View File

@ -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

View File

@ -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 = [

View File

@ -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) {

View File

@ -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

View File

@ -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) {

View File

@ -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);

View File

@ -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) {

View File

@ -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

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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>

View File

@ -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

View File

@ -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;
};

View File

@ -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")) {

View File

@ -2,21 +2,53 @@
// License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt"
// 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) {
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);
}
// Create the axis object based on the passed parameters
var axis = new dimple.axis(
this,
position,
categoryFields,
measure,
timeField
);
// Add the axis to the array for the chart
this.axes.push(axis);
// 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
axis = new dimple.axis(
this,
position,
categoryFields,
measure,
timeField
);
// 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;
};

View File

@ -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,28 +56,54 @@
// 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]);
if (axis._min === null || dt < axis._min) {
axis._min = dt;
}
if (axis._max === null || dt > axis._max) {
axis._max = dt;
}
// 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;
}
if (axis._max === null || dt > axis._max) {
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();

View File

@ -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;
};