vitalif-js
/
dimple
mirror of https://github.com/vitalif/dimple
1
0
Fork 0
Code Issues Releases Wiki Activity

Add New Examples

master
John Kiernander 2013-07-05 09:49:53 +01:00
parent 576a2585e4
commit b85f0ad894
2 changed files with 237 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
examples/advanced_bullet.html Normal file
View File

@ -0,0 +1,133 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.js"></script>
<script type="text/javascript">
// Create the svg and set the dimensions
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
// Add a bullet chart to the svg
function addBullet(x, y, height, width, measure, lowMark,
highMark, axisMax, compareField, keyVal,
compareVal, color) {
// This is a custom algorithm to lighten the passed color, I find I can't
// get the results I want from the d3.rgb.brighter method.
function lighten(color, pct) {
return d3.rgb(
d3.rgb(color).r + pct * (255 - d3.rgb(color).r),
d3.rgb(color).g + pct * (255 - d3.rgb(color).g),
d3.rgb(color).b + pct * (255 - d3.rgb(color).b)
);
}
// Create a single data row for bullet data. Dimple doesn't
// quite handle bullets out of the box so we need to do some
// data manipulation here
var bData = [
{
"Metric":measure,
"Value":0,
"Low Value":lowMark,
"High Value":highMark,
"Compare Value":0
}
];
// Add the key and compare values for coloring and pop-ups
bData[0][keyVal] = keyVal;
bData[0][compareVal] = compareVal;
// Iterate the data and put numbers into the low key or compare
// value fields or exclude if in neither value
data.forEach(function (d) {
if (d[compareField] === keyVal) {
bData[0]["Value"] += parseFloat(d[measure]);
} else if (d[compareField] === compareVal) {
bData[0]["Compare Value"] += parseFloat(d[measure]);
}
}, this);
// Create the bullet chart itself at the passed bounds
var bullet = new dimple.chart(svg, bData);
bullet.setBounds(x, y, height, width);
// Add the x and y for the main bar
var bY = bullet.addCategoryAxis("y", "Metric");
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;
// Add a series for the marks first (the order defines)
// document z position - first at back, last on top
// NB. High/Low Mark here doesn't refer to a field in the data
// rather it tags the total value with a name we can use to color
var hm = bullet.addSeries("High Mark", dimple.plot.bar, [bY, hX]);
var lm = bullet.addSeries("Low Mark", dimple.plot.bar, [bY, lX]);
// Add the main series - keyVal is for color and tooltip
var b = bullet.addSeries(keyVal, dimple.plot.bar, [bY, bX]);
// Add the comparison series - compareVal is for color and tooltip
var m = bullet.addSeries(compareVal, dimple.plot.bubble, [bY, cX]);
// Set the gaps for the bar series with a narrow main series and full
// width for the markers
hm.barGap = 0;
lm.barGap = 0;
b.barGap = 0.75;
// Assign the colors as different shades of the passed color
bullet.assignColor(keyVal, color);
bullet.assignColor(compareVal, d3.rgb(color).darker(0.5));
bullet.assignColor("Low Mark", lighten(color, 0.4));
bullet.assignColor("High Mark", lighten(color, 0.6));
// Draw the chart
bullet.draw();
// Once drawn we can remove titles
bX.titleShape.remove();
bY.titleShape.remove();
}
// Draw the chart for each financial metric in the data to compare
// Black Mesa with rival brand owner Aperture. We are coloring most
// measures blue, but the costs are red as they should be interperated
// as "less is better". Typically the high and low marks would be target
// KPI bounds, the values are just hard coded for this example. A smarter
// 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");
addBullet(100, 90, 430, 30, "Sales Value", 135000000, 145000000,
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 150, 430, 30, "Cost of Sales", 200000, 300000,
500000, "Owner", "Aperture", "Black Mesa", "#FB8072");
addBullet(100, 210, 430, 30, "Gross Profit", 140000000, 170000000,
180000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
addBullet(100, 270, 430, 30, "Indirect Costs", 100000000, 150000000,
160000000, "Owner", "Aperture", "Black Mesa", "#FB8072");
addBullet(100, 330, 430, 30, "Operating Profit", 12000000, 16000000,
18000000, "Owner", "Aperture", "Black Mesa", "#80B1D3");
});
</script>
</div>

104
examples/advanced_time_axis.html Normal file
View File

@ -0,0 +1,104 @@
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
// The default data set for these examples has regular times
// and the point of this demo is to show the time axis
// functionality, therefore a small bespoke data set is used.
data = [
{ "Shift":"Early","Date":"12 Jul 2010 10:00","Value":1000 },
{ "Shift":"Early","Date":"20 Jul 2010 10:20","Value":1200 },
{ "Shift":"Early","Date":"1 Aug 2010 10:40","Value":1600 },
{ "Shift":"Early","Date":"8 Aug 2010 10:10","Value":1300 },
{ "Shift":"Early","Date":"20 Aug 2010 11:00","Value":1900 },
{ "Shift":"Early","Date":"7 Sep 2010 09:50","Value":1100 },
{ "Shift":"Early","Date":"13 Sep 2010 10:10","Value":1000 },
{ "Shift":"Early","Date":"1 Oct 2010 12:00","Value":2000 },
{ "Shift":"Early","Date":"6 Oct 2010 10:10","Value":1900 },
{ "Shift":"Early","Date":"19 Oct 2010 11:40","Value":1800 },
{ "Shift":"Early","Date":"24 Oct 2010 10:30","Value":1200 },
{ "Shift":"Early","Date":"3 Nov 2010 09:30","Value":1800 },
{ "Shift":"Early","Date":"12 Nov 2010 10:50","Value":1800 },
{ "Shift":"Early","Date":"20 Nov 2010 10:10","Value":1900 },
{ "Shift":"Early","Date":"5 Dec 2010 10:50","Value":1600 },
{ "Shift":"Early","Date":"9 Dec 2010 12:20","Value":1700 },
{ "Shift":"Early","Date":"15 Dec 2010 10:10","Value":1400 },
{ "Shift":"Early","Date":"20 Dec 2010 10:00","Value":1200 },
{ "Shift":"Late","Date":"11 Jul 2010 16:00","Value":2400 },
{ "Shift":"Late","Date":"30 Jul 2010 17:30","Value":2000 },
{ "Shift":"Late","Date":"1 Aug 2010 15:40","Value":1600 },
{ "Shift":"Late","Date":"5 Aug 2010 13:10","Value":1700 },
{ "Shift":"Late","Date":"1 Sep 2010 15:00","Value":1900 },
{ "Shift":"Late","Date":"7 Sep 2010 15:50","Value":1100 },
{ "Shift":"Late","Date":"13 Sep 2010 14:10","Value":1500 },
{ "Shift":"Late","Date":"30 Sep 2010 13:00","Value":1000 },
{ "Shift":"Late","Date":"1 Nov 2010 15:50","Value":1800 },
{ "Shift":"Late","Date":"24 Nov 2010 15:10","Value":1900 },
{ "Shift":"Late","Date":"1 Dec 2010 15:50","Value":1600 },
{ "Shift":"Late","Date":"5 Dec 2010 15:20","Value":1700 },
{ "Shift":"Late","Date":"13 Dec 2010 15:10","Value":1400 },
{ "Shift":"Late","Date":"25 Dec 2010 15:00","Value":1200 }
];
// Create Separate Date and Time, this allows us to draw them
// on separate axes. Despite the time axis only displaying
// the time portion, the whole date is used so they need to
// have the same date allocated
data.forEach(function (d) {
d["Day"] = d["Date"].substring(0, d["Date"].length - 6);
d["Time of Day"] =
"2000-01-01 " + d["Date"].substring(d["Date"].length - 5);
}, this);
// Create the chart as usual
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 30, 490, 290)
// Add the x axis reading dates in the format 01 Jan 2012
// and displaying them 01 Jan
var x = myChart.addTimeAxis("x", "Day", "%d %b %Y", "%d %b");
// Add the y axis reading dates and times but only outputting
// times.
var y = myChart.addTimeAxis("y", "Time of Day",
"%Y-%m-%d %H:%M", "%H:%M");
// Size the bubbles by volume
var z = myChart.addMeasureAxis("z", "Value");
// Setting min and max dates requires them to be set
// as actual javascript date objects
x.overrideMin = new Date("2010-06-20");
x.overrideMax = new Date("2011-01-02");
y.overrideMin = new Date("01/01/2000 9:00 am");
y.overrideMax = new Date("01/01/2000 6:00 pm");
// Show a label for every 4 weeks.
x.timePeriod = d3.time.weeks;
x.timeInterval = 4;
// Control bubble sizes by setting the max and min values
z.overrideMin = 900;
z.overrideMax = 3000;
// Add the bubble series for shift values first so that it is
// drawn behind the lines
myChart.addSeries("Shift", dimple.plot.bubble);
// Add the line series on top of the bubbles. The bubbles
// and line points will naturally fall in the same places
var s = myChart.addSeries("Shift", dimple.plot.line);
// Add line markers to the line because it looks nice
s.lineMarkers = true;
// Show a legend
myChart.addLegend(180, 10, 360, 20, "right");
// Draw everything
myChart.draw();
</script>
</div>