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

Fix Examples

master
johnkiernander 2014-04-22 15:03:21 +01:00
parent 1b1b8231c9
commit f139876c74
16 changed files with 206 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
data/christmas_data.tsv
View File

@ -1,63 +0,0 @@
Festivity Countdown Tree Tinsel Baubles Cheer Sparkle Magic
-10 09/12/2013 00:00 left trunk none none 0 0 0
10 09/12/2013 00:00 right trunk none none 0 0 0
-10 11/12/2013 02:00 left trunk none none 0 0 0
10 11/12/2013 02:00 right trunk none none 0 0 0
-100 11/12/2013 03:00 left none none 0 0 0
100 11/12/2013 03:00 right none none 0 0 0
-60 13/12/2013 00:00 left none none 0 0 0
60 13/12/2013 00:00 right none none 0 0 0
-90 13/12/2013 03:00 left none none 0 0 0
90 13/12/2013 03:00 right none none 0 0 0
-50 15/12/2013 00:00 left none none 0 0 0
50 15/12/2013 00:00 right none none 0 0 0
-80 15/12/2013 03:00 left none none 0 0 0
80 15/12/2013 03:00 right none none 0 0 0
-40 17/12/2013 00:00 left none none 0 0 0
40 17/12/2013 00:00 right none none 0 0 0
-70 17/12/2013 03:00 left none none 0 0 0
70 17/12/2013 03:00 right none none 0 0 0
-30 19/12/2013 00:00 left none none 0 0 0
30 19/12/2013 00:00 right none none 0 0 0
-60 19/12/2013 03:00 left none none 0 0 0
60 19/12/2013 03:00 right none none 0 0 0
-20 21/12/2013 00:00 left none none 0 0 0
20 21/12/2013 00:00 right none none 0 0 0
-50 21/12/2013 03:00 left none none 0 0 0
50 21/12/2013 03:00 right none none 0 0 0
-10 23/12/2013 00:00 left none none 0 0 0
10 23/12/2013 00:00 right none none 0 0 0
-40 23/12/2013 03:00 left none none 0 0 0
40 23/12/2013 03:00 right none none 0 0 0
0 25/12/2013 00:00 left none none 0 0 0
0 25/12/2013 00:00 right none none 0 0 0
0 24/12/2013 00:00 none tinsel 1 none 55 -50 0
0 25/12/2013 00:00 none tinsel 1 none -65 -100 0
0 24/12/2013 00:00 none tinsel 2 none 45 -5 0
0 25/12/2013 00:00 none tinsel 2 none -60 -50 0
0 24/12/2013 00:00 none tinsel 3 none 38 42 0
0 25/12/2013 00:00 none tinsel 3 none -50 0 0
0 24/12/2013 00:00 none tinsel 4 none 30 90 0
0 25/12/2013 00:00 none tinsel 4 none -45 50 0
0 24/12/2013 00:00 none tinsel 5 none 25 135 0
0 25/12/2013 00:00 none tinsel 5 none -40 100 0
0 18/12/2013 00:00 none none bauble 1 -100 -150 15
0 19/12/2013 00:00 none none bauble 1 75 -50 14
0 20/12/2013 00:00 none none bauble 1 0 0 15
0 21/12/2013 00:00 none none bauble 1 50 50 13
0 22/12/2013 00:00 none none bauble 1 -40 150 15
0 18/12/2013 00:00 none none bauble 2 -100 -150 15
0 19/12/2013 00:00 none none bauble 2 -25 75 14
0 20/12/2013 00:00 none none bauble 2 -70 5 15
0 21/12/2013 00:00 none none bauble 2 40 -50 13
0 22/12/2013 00:00 none none bauble 2 -25 -125 15
0 18/12/2013 00:00 none none bauble 3 40 150 15
0 19/12/2013 00:00 none none bauble 3 5 120 14
0 20/12/2013 00:00 none none bauble 3 20 50 15
0 21/12/2013 00:00 none none bauble 3 -25 -50 13
0 22/12/2013 00:00 none none bauble 3 100 -150 15
0 18/12/2013 00:00 none none bauble 4 40 -100 15
0 19/12/2013 00:00 none none bauble 4 -50 -75 14
0 20/12/2013 00:00 none none bauble 4 40 -10 15
0 21/12/2013 00:00 none none bauble 4 -10 45 13
0 22/12/2013 00:00 none none bauble 4 0 175 15
1 Festivity Countdown Tree Tinsel Baubles Cheer Sparkle Magic
2 -10 09/12/2013 00:00 left trunk none none 0 0 0
3 10 09/12/2013 00:00 right trunk none none 0 0 0
4 -10 11/12/2013 02:00 left trunk none none 0 0 0
5 10 11/12/2013 02:00 right trunk none none 0 0 0
6 -100 11/12/2013 03:00 left none none 0 0 0
7 100 11/12/2013 03:00 right none none 0 0 0
8 -60 13/12/2013 00:00 left none none 0 0 0
9 60 13/12/2013 00:00 right none none 0 0 0
10 -90 13/12/2013 03:00 left none none 0 0 0
11 90 13/12/2013 03:00 right none none 0 0 0
12 -50 15/12/2013 00:00 left none none 0 0 0
13 50 15/12/2013 00:00 right none none 0 0 0
14 -80 15/12/2013 03:00 left none none 0 0 0
15 80 15/12/2013 03:00 right none none 0 0 0
16 -40 17/12/2013 00:00 left none none 0 0 0
17 40 17/12/2013 00:00 right none none 0 0 0
18 -70 17/12/2013 03:00 left none none 0 0 0
19 70 17/12/2013 03:00 right none none 0 0 0
20 -30 19/12/2013 00:00 left none none 0 0 0
21 30 19/12/2013 00:00 right none none 0 0 0
22 -60 19/12/2013 03:00 left none none 0 0 0
23 60 19/12/2013 03:00 right none none 0 0 0
24 -20 21/12/2013 00:00 left none none 0 0 0
25 20 21/12/2013 00:00 right none none 0 0 0
26 -50 21/12/2013 03:00 left none none 0 0 0
27 50 21/12/2013 03:00 right none none 0 0 0
28 -10 23/12/2013 00:00 left none none 0 0 0
29 10 23/12/2013 00:00 right none none 0 0 0
30 -40 23/12/2013 03:00 left none none 0 0 0
31 40 23/12/2013 03:00 right none none 0 0 0
32 0 25/12/2013 00:00 left none none 0 0 0
33 0 25/12/2013 00:00 right none none 0 0 0
34 0 24/12/2013 00:00 none tinsel 1 none 55 -50 0
35 0 25/12/2013 00:00 none tinsel 1 none -65 -100 0
36 0 24/12/2013 00:00 none tinsel 2 none 45 -5 0
37 0 25/12/2013 00:00 none tinsel 2 none -60 -50 0
38 0 24/12/2013 00:00 none tinsel 3 none 38 42 0
39 0 25/12/2013 00:00 none tinsel 3 none -50 0 0
40 0 24/12/2013 00:00 none tinsel 4 none 30 90 0
41 0 25/12/2013 00:00 none tinsel 4 none -45 50 0
42 0 24/12/2013 00:00 none tinsel 5 none 25 135 0
43 0 25/12/2013 00:00 none tinsel 5 none -40 100 0
44 0 18/12/2013 00:00 none none bauble 1 -100 -150 15
45 0 19/12/2013 00:00 none none bauble 1 75 -50 14
46 0 20/12/2013 00:00 none none bauble 1 0 0 15
47 0 21/12/2013 00:00 none none bauble 1 50 50 13
48 0 22/12/2013 00:00 none none bauble 1 -40 150 15
49 0 18/12/2013 00:00 none none bauble 2 -100 -150 15
50 0 19/12/2013 00:00 none none bauble 2 -25 75 14
51 0 20/12/2013 00:00 none none bauble 2 -70 5 15
52 0 21/12/2013 00:00 none none bauble 2 40 -50 13
53 0 22/12/2013 00:00 none none bauble 2 -25 -125 15
54 0 18/12/2013 00:00 none none bauble 3 40 150 15
55 0 19/12/2013 00:00 none none bauble 3 5 120 14
56 0 20/12/2013 00:00 none none bauble 3 20 50 15
57 0 21/12/2013 00:00 none none bauble 3 -25 -50 13
58 0 22/12/2013 00:00 none none bauble 3 100 -150 15
59 0 18/12/2013 00:00 none none bauble 4 40 -100 15
60 0 19/12/2013 00:00 none none bauble 4 -50 -75 14
61 0 20/12/2013 00:00 none none bauble 4 40 -10 15
62 0 21/12/2013 00:00 none none bauble 4 -10 45 13
63 0 22/12/2013 00:00 none none bauble 4 0 175 15

70
dist/dimple.v1.2.0.js vendored
View File

@ -1340,7 +1340,7 @@ var dimple = {
chartY = this._yPixels(),
chartWidth = this._widthPixels(),
chartHeight = this._heightPixels(),
linkedDimensions = [];
linkedDimensions;
// Many of the draw methods use positioning data in each series. Therefore we should
// decorate the series with it now
@ -1358,6 +1358,7 @@ var dimple = {
this.axes.forEach(function (axis) {
axis._min = 0;
axis._max = 0;
linkedDimensions = [];
// Check that the axis has a measure
if (axis._hasMeasure()) {
// Is this axis linked to a series
@ -3000,7 +3001,16 @@ var dimple = {
updated,
removed,
xFloat = !series._isStacked() && series.x._hasMeasure(),
yFloat = !series._isStacked() && series.y._hasMeasure();
yFloat = !series._isStacked() && series.y._hasMeasure(),
cat = "none";
if (series.x._hasCategories() && series.y._hasCategories()) {
cat = "both";
} else if (series.x._hasCategories()) {
cat = "x";
} else if (series.y._hasCategories()) {
cat = "y";
}
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
@ -3024,17 +3034,29 @@ var dimple = {
c = c.concat(d.yField);
return classes.join(" ") + " " + dimple._createClass(c);
})
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); })
.attr("x", function (d) {
var returnValue = series.x._previousOrigin;
if (cat === "x") {
returnValue = dimple._helpers.x(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cx(d, chart, series);
}
return returnValue;
})
.attr("y", function (d) {
var returnValue = series.y._previousOrigin;
if (cat === "y") {
returnValue = dimple._helpers.y(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cy(d, chart, series);
}
return returnValue;
})
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); })
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
.on("mouseover", function (e) {
dimple._showBarTooltip(e, this, chart, series);
})
.on("mouseleave", function (e) {
dimple._removeTooltip(e, this, chart, series);
})
.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, series); })
.on("mouseleave", function (e) { dimple._removeTooltip(e, this, chart, series); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
@ -3057,10 +3079,26 @@ var dimple = {
// Remove
removed = dimple._handleTransition(theseShapes.exit(), duration)
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); });
.attr("x", function (d) {
var returnValue = series.x._origin;
if (cat === "x") {
returnValue = dimple._helpers.x(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cx(d, chart, series);
}
return returnValue;
})
.attr("y", function (d) {
var returnValue = series.y._origin;
if (cat === "y") {
returnValue = dimple._helpers.y(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cy(d, chart, series);
}
return returnValue;
})
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); });
dimple._postDrawHandling(series, updated, removed, duration);

4
dist/dimple.v1.2.0.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
examples/advanced_bar_labels.html
View File

@ -13,24 +13,26 @@
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
var y = myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
// After drawing we can access the shapes and their associated data
// to add labels.
s.shapes.each(function(d) {
// Using the afterDraw callback means this code still works with animated
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
// also be used to clear the text from the previous frame)
s.afterDraw = function (shape, data) {
// Get the shape as a d3 selection
var shape = d3.select(this),
// Get the height and width from the scales
height = myChart.y + myChart.height - y._scale(d.height);
width = x._scale(d.width);
var s = d3.select(shape),
rect = {
x: parseFloat(s.attr("x")),
y: parseFloat(s.attr("y")),
width: parseFloat(s.attr("width")),
height: parseFloat(s.attr("height"))
};
// Only label bars where the text can fit
if (height >= 8) {
if (rect.height >= 8) {
// Add a text label for the value
svg.append("text")
// Position in the centre of the shape (vertical position is
// manually set due to cross-browser problems with baseline)
.attr("x", parseFloat(shape.attr("x")) + width / 2)
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
.attr("x", rect.x + rect.width / 2)
.attr("y", rect.y + rect.height / 2 + 3.5)
// Centre align
.style("text-anchor", "middle")
.style("font-size", "10px")
@ -38,9 +40,11 @@
// Make it a little transparent to tone down the black
.style("opacity", 0.6)
// Format the number
.text(d3.format(",.1f")(d.yValue / 1000) + "k");
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
}
});
};
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

74
examples/advanced_christmas_tree.html
View File

@ -1,74 +0,0 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.v1.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
// Unlike other dimple charts this relies on some special Christmas
// data collated from Santa's Naughty:Nice data store
d3.tsv("/data/christmas_data.tsv", function (data) {
// Create the chart as usual
var chart = new dimple.chart(svg, data);
chart.setMargins(80, 50, 60, 40);
// Add a measure axis on x for Festivity
var festivity = chart.addMeasureAxis("x", "Festivity");
festivity.overrideMin = -200;
festivity.overrideMax = 200;
// Add a secondary x axis for Good Cheer
var cheer = chart.addMeasureAxis("x", "Cheer");
cheer.overrideMin = -200;
cheer.overrideMax = 200;
// We need to view these metrics against the Countdown to Christmas,
// this is visualised with the dimple time axis
var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
// Add a final Y axis for sparkle
var sparkle = chart.addMeasureAxis("y", "Sparkle");
sparkle.overrideMin = -200;
sparkle.overrideMax = 200;
// Bauble size will be based on Magic (everyone knows that)
var magic = chart.addMeasureAxis("z", "Magic");
magic.overrideMax = 100;
// Add the three series for this visualisation
// First, a vertical area chart plotting festivity through December
// (I knew I'd find an application for that chart type eventually!)
chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
// Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
tinsel.lineWeight = 5;
// Add a bubble chart showing how Cheer and Sparkle are affected by Magic
chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
// Map colors to different series values
chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
chart.assignColor("left", "Green", "DarkGreen");
chart.assignColor("right", "Green", "DarkGreen");
chart.assignColor("left trunk", "Sienna", "SaddleBrown");
chart.assignColor("right trunk", "Sienna", "SaddleBrown");
chart.assignColor("tinsel 1", "Gold", "Gold", 1);
chart.assignColor("tinsel 2", "Red", "Red", 1);
chart.assignColor("tinsel 3", "Gold", "Gold", 1);
chart.assignColor("tinsel 4", "Red", "Red", 1);
chart.assignColor("tinsel 5", "Gold", "Gold", 1);
chart.assignColor("bauble 1", "Gold", "Gold", 1);
chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
chart.assignColor("bauble 3", "Red", "Crimson", 1);
chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
// Sprinkle the magic dust
chart.draw();
});
</script>
</div>

4
examples/advanced_matrix.html
View File

@ -67,14 +67,14 @@
// Draw a new chart which will go in the current shape
var subChart = new dimple.chart(svg, filteredData);
// Get the shape from the main chart on which this chart is based
var shape = d3.select(this);
// Position the chart inside the shape
subChart.setBounds(
parseFloat(shape.attr("x")),
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
parseFloat(shape.attr("y")),
parseFloat(shape.attr("width")),
parseFloat(shape.attr("height")));

3
examples/advanced_random_lines.html
View File

@ -1,3 +0,0 @@
<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->

2
examples/advanced_waterfall.html
View File

@ -109,7 +109,7 @@
});
// Remove the padding elements entirely
svg.selectAll(".pad").remove();
svg.selectAll(".dimple-pad").remove();
// Change the measure name and the category names for the tooltips
s.y.measure = yLabel;

32
examples/templates/advanced_bar_labels.html
View File

@ -10,24 +10,26 @@
var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
var y = myChart.addPctAxis("y", "Unit Sales");
var s = myChart.addSeries("Owner", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
// After drawing we can access the shapes and their associated data
// to add labels.
s.shapes.each(function(d) {
// Using the afterDraw callback means this code still works with animated
// draws (e.g. myChart.draw(1000)) or storyboards (though an onTick callback should
// also be used to clear the text from the previous frame)
s.afterDraw = function (shape, data) {
// Get the shape as a d3 selection
var shape = d3.select(this),
// Get the height and width from the scales
height = myChart.y + myChart.height - y._scale(d.height);
width = x._scale(d.width);
var s = d3.select(shape),
rect = {
x: parseFloat(s.attr("x")),
y: parseFloat(s.attr("y")),
width: parseFloat(s.attr("width")),
height: parseFloat(s.attr("height"))
};
// Only label bars where the text can fit
if (height >= 8) {
if (rect.height >= 8) {
// Add a text label for the value
svg.append("text")
// Position in the centre of the shape (vertical position is
// manually set due to cross-browser problems with baseline)
.attr("x", parseFloat(shape.attr("x")) + width / 2)
.attr("y", parseFloat(shape.attr("y")) - height / 2 + 3.5)
.attr("x", rect.x + rect.width / 2)
.attr("y", rect.y + rect.height / 2 + 3.5)
// Centre align
.style("text-anchor", "middle")
.style("font-size", "10px")
@ -35,9 +37,11 @@
// Make it a little transparent to tone down the black
.style("opacity", 0.6)
// Format the number
.text(d3.format(",.1f")(d.yValue / 1000) + "k");
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
}
});
};
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>

71
examples/templates/advanced_christmas_tree.html
View File

@ -1,71 +0,0 @@
<div id="chartContainer">
<script src="/lib/d3.v3.min.js"></script>
<script src="/dist/dimple.{version}.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
// Unlike other dimple charts this relies on some special Christmas
// data collated from Santa's Naughty:Nice data store
d3.tsv("/data/christmas_data.tsv", function (data) {
// Create the chart as usual
var chart = new dimple.chart(svg, data);
chart.setMargins(80, 50, 60, 40);
// Add a measure axis on x for Festivity
var festivity = chart.addMeasureAxis("x", "Festivity");
festivity.overrideMin = -200;
festivity.overrideMax = 200;
// Add a secondary x axis for Good Cheer
var cheer = chart.addMeasureAxis("x", "Cheer");
cheer.overrideMin = -200;
cheer.overrideMax = 200;
// We need to view these metrics against the Countdown to Christmas,
// this is visualised with the dimple time axis
var countdown = chart.addTimeAxis("y", "Countdown", "%d/%m/%Y %H:%M", "%d %b");
// Add a final Y axis for sparkle
var sparkle = chart.addMeasureAxis("y", "Sparkle");
sparkle.overrideMin = -200;
sparkle.overrideMax = 200;
// Bauble size will be based on Magic (everyone knows that)
var magic = chart.addMeasureAxis("z", "Magic");
magic.overrideMax = 100;
// Add the three series for this visualisation
// First, a vertical area chart plotting festivity through December
// (I knew I'd find an application for that chart type eventually!)
chart.addSeries("Tree", dimple.plot.area, [countdown, festivity]);
// Add a two measure line chart of Tinsel's impact on Cheer and Sparkle
var tinsel = chart.addSeries(["Countdown", "Tinsel"], dimple.plot.line, [cheer, sparkle]);
tinsel.lineWeight = 5;
// Add a bubble chart showing how Cheer and Sparkle are affected by Magic
chart.addSeries(["Countdown", "Baubles"], dimple.plot.bubble, [cheer, sparkle, magic]);
// Map colors to different series values
chart.assignColor("none", "#FFFFFF", "#FFFFFF", 0);
chart.assignColor("left", "Green", "DarkGreen");
chart.assignColor("right", "Green", "DarkGreen");
chart.assignColor("left trunk", "Sienna", "SaddleBrown");
chart.assignColor("right trunk", "Sienna", "SaddleBrown");
chart.assignColor("tinsel 1", "Gold", "Gold", 1);
chart.assignColor("tinsel 2", "Red", "Red", 1);
chart.assignColor("tinsel 3", "Gold", "Gold", 1);
chart.assignColor("tinsel 4", "Red", "Red", 1);
chart.assignColor("tinsel 5", "Gold", "Gold", 1);
chart.assignColor("bauble 1", "Gold", "Gold", 1);
chart.assignColor("bauble 2", "Fuchsia ", "MediumVioletRed", 1);
chart.assignColor("bauble 3", "Red", "Crimson", 1);
chart.assignColor("bauble 4", "DeepSkyBlue", "DodgerBlue", 1);
// Sprinkle the magic dust
chart.draw();
});
</script>
</div>

4
examples/templates/advanced_matrix.html
View File

@ -64,14 +64,14 @@
// Draw a new chart which will go in the current shape
var subChart = new dimple.chart(svg, filteredData);
// Get the shape from the main chart on which this chart is based
var shape = d3.select(this);
// Position the chart inside the shape
subChart.setBounds(
parseFloat(shape.attr("x")),
parseFloat(shape.attr("y")) - parseFloat(shape.attr("height")),
parseFloat(shape.attr("y")),
parseFloat(shape.attr("width")),
parseFloat(shape.attr("height")));

0
examples/templates/advanced_random_lines.html
View File

2
examples/templates/advanced_waterfall.html
View File

@ -106,7 +106,7 @@
});
// Remove the padding elements entirely
svg.selectAll(".pad").remove();
svg.selectAll(".dimple-pad").remove();
// Change the measure name and the category names for the tooltips
s.y.measure = yLabel;

3
src/objects/chart/methods/draw.js
View File

@ -15,7 +15,7 @@
chartY = this._yPixels(),
chartWidth = this._widthPixels(),
chartHeight = this._heightPixels(),
linkedDimensions = [];
linkedDimensions;
// Many of the draw methods use positioning data in each series. Therefore we should
// decorate the series with it now
@ -33,6 +33,7 @@
this.axes.forEach(function (axis) {
axis._min = 0;
axis._max = 0;
linkedDimensions = [];
// Check that the axis has a measure
if (axis._hasMeasure()) {
// Is this axis linked to a series

67
src/objects/plot/bar.js
View File

@ -18,7 +18,16 @@
updated,
removed,
xFloat = !series._isStacked() && series.x._hasMeasure(),
yFloat = !series._isStacked() && series.y._hasMeasure();
yFloat = !series._isStacked() && series.y._hasMeasure(),
cat = "none";
if (series.x._hasCategories() && series.y._hasCategories()) {
cat = "both";
} else if (series.x._hasCategories()) {
cat = "x";
} else if (series.y._hasCategories()) {
cat = "y";
}
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
@ -42,17 +51,29 @@
c = c.concat(d.yField);
return classes.join(" ") + " " + dimple._createClass(c);
})
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); })
.attr("x", function (d) {
var returnValue = series.x._previousOrigin;
if (cat === "x") {
returnValue = dimple._helpers.x(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cx(d, chart, series);
}
return returnValue;
})
.attr("y", function (d) {
var returnValue = series.y._previousOrigin;
if (cat === "y") {
returnValue = dimple._helpers.y(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cy(d, chart, series);
}
return returnValue;
})
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); })
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
.on("mouseover", function (e) {
dimple._showBarTooltip(e, this, chart, series);
})
.on("mouseleave", function (e) {
dimple._removeTooltip(e, this, chart, series);
})
.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, series); })
.on("mouseleave", function (e) { dimple._removeTooltip(e, this, chart, series); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
@ -75,10 +96,26 @@
// Remove
removed = dimple._handleTransition(theseShapes.exit(), duration)
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); });
.attr("x", function (d) {
var returnValue = series.x._origin;
if (cat === "x") {
returnValue = dimple._helpers.x(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cx(d, chart, series);
}
return returnValue;
})
.attr("y", function (d) {
var returnValue = series.y._origin;
if (cat === "y") {
returnValue = dimple._helpers.y(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cy(d, chart, series);
}
return returnValue;
})
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); });
dimple._postDrawHandling(series, updated, removed, duration);

70
tmp/dimple.js
View File

@ -1340,7 +1340,7 @@ var dimple = {
chartY = this._yPixels(),
chartWidth = this._widthPixels(),
chartHeight = this._heightPixels(),
linkedDimensions = [];
linkedDimensions;
// Many of the draw methods use positioning data in each series. Therefore we should
// decorate the series with it now
@ -1358,6 +1358,7 @@ var dimple = {
this.axes.forEach(function (axis) {
axis._min = 0;
axis._max = 0;
linkedDimensions = [];
// Check that the axis has a measure
if (axis._hasMeasure()) {
// Is this axis linked to a series
@ -3000,7 +3001,16 @@ var dimple = {
updated,
removed,
xFloat = !series._isStacked() && series.x._hasMeasure(),
yFloat = !series._isStacked() && series.y._hasMeasure();
yFloat = !series._isStacked() && series.y._hasMeasure(),
cat = "none";
if (series.x._hasCategories() && series.y._hasCategories()) {
cat = "both";
} else if (series.x._hasCategories()) {
cat = "x";
} else if (series.y._hasCategories()) {
cat = "y";
}
if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) {
chart._tooltipGroup.remove();
@ -3024,17 +3034,29 @@ var dimple = {
c = c.concat(d.yField);
return classes.join(" ") + " " + dimple._createClass(c);
})
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); })
.attr("x", function (d) {
var returnValue = series.x._previousOrigin;
if (cat === "x") {
returnValue = dimple._helpers.x(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cx(d, chart, series);
}
return returnValue;
})
.attr("y", function (d) {
var returnValue = series.y._previousOrigin;
if (cat === "y") {
returnValue = dimple._helpers.y(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cy(d, chart, series);
}
return returnValue;
})
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); })
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
.on("mouseover", function (e) {
dimple._showBarTooltip(e, this, chart, series);
})
.on("mouseleave", function (e) {
dimple._removeTooltip(e, this, chart, series);
})
.on("mouseover", function (e) { dimple._showBarTooltip(e, this, chart, series); })
.on("mouseleave", function (e) { dimple._removeTooltip(e, this, chart, series); })
.call(function () {
if (!chart.noFormats) {
this.attr("fill", function (d) { return dimple._helpers.fill(d, chart, series); })
@ -3057,10 +3079,26 @@ var dimple = {
// Remove
removed = dimple._handleTransition(theseShapes.exit(), duration)
.attr("x", function (d) { return dimple._helpers.x(d, chart, series); })
.attr("y", function (d) { return dimple._helpers.y(d, chart, series) + dimple._helpers.height(d, chart, series); })
.attr("width", function (d) {return (d.xField !== null && d.xField.length > 0 ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) {return (d.yField !== null && d.yField.length > 0 ? dimple._helpers.height(d, chart, series) : 0); });
.attr("x", function (d) {
var returnValue = series.x._origin;
if (cat === "x") {
returnValue = dimple._helpers.x(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cx(d, chart, series);
}
return returnValue;
})
.attr("y", function (d) {
var returnValue = series.y._origin;
if (cat === "y") {
returnValue = dimple._helpers.y(d, chart, series);
} else if (cat === "both") {
returnValue = dimple._helpers.cy(d, chart, series);
}
return returnValue;
})
.attr("width", function (d) { return (cat === "x" ? dimple._helpers.width(d, chart, series) : 0); })
.attr("height", function (d) { return (cat === "y" ? dimple._helpers.height(d, chart, series) : 0); });
dimple._postDrawHandling(series, updated, removed, duration);