mirror of https://github.com/vitalif/dimple
Fix Examples
parent
1b1b8231c9
commit
f139876c74
|
@ -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
|
|
|
@ -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);
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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>
|
|
@ -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>
|
|
@ -74,7 +74,7 @@
|
|||
// 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")));
|
||||
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
<!----------------------------------------------------------------->
|
||||
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
|
||||
<!----------------------------------------------------------------->
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -71,7 +71,7 @@
|
|||
// 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")));
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue