New Storyboard Control Example
|
@ -58,5 +58,11 @@
|
|||
"title":"Interactive Legend",
|
||||
"shortTitle":"Toggle Legend",
|
||||
"desc":"The Legend on this chart has been made interactive. It is useful to note the method for orphaning the legend before updating the chart."
|
||||
},
|
||||
{
|
||||
"id":"advanced_storyboard_control",
|
||||
"title":"Storyboard Control",
|
||||
"shortTitle":"Storyboard Ctrl",
|
||||
"desc":"This is an example of controlling the storyboard with the tick event and other methods. Clicking the side chart with select a frame and pause the animation, clicking again will resume."
|
||||
}
|
||||
]
|
|
@ -0,0 +1,136 @@
|
|||
<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);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
|
||||
// Filter for 1 year
|
||||
data = dimple.filterData(data, "Month", [
|
||||
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
|
||||
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
|
||||
]);
|
||||
|
||||
// Create the indicator chart on the right of the main chart
|
||||
var indicator = new dimple.chart(svg, data);
|
||||
|
||||
// Pick blue as the default and orange for the selected month
|
||||
var defaultColor = indicator.defaultColors[0];
|
||||
var indicatorColor = indicator.defaultColors[2];
|
||||
|
||||
// The frame duration for the animation in milliseconds
|
||||
var frame = 750;
|
||||
|
||||
// Place the indicator bar chart to the right
|
||||
indicator.setBounds(434, 49, 153, 311);
|
||||
|
||||
// Add dates along the y axis
|
||||
var y = indicator.addCategoryAxis("y", "Month");
|
||||
y.addOrderRule("Date", "Desc");
|
||||
|
||||
// Use sales for bar size and hide the axis
|
||||
var x = indicator.addMeasureAxis("x", "Unit Sales");
|
||||
x.hidden = true;
|
||||
|
||||
// Add the bars to the indicator and add event handlers
|
||||
var s = indicator.addSeries(null, dimple.plot.bar);
|
||||
s.addEventHandler("click", onClick);
|
||||
// Draw the side chart
|
||||
indicator.draw();
|
||||
|
||||
// Remove the title from the y axis
|
||||
y.titleShape.remove();
|
||||
|
||||
// Remove the lines from the y axis
|
||||
y.shapes.selectAll("line,path").remove();
|
||||
|
||||
// Move the y axis text inside the plot area
|
||||
y.shapes.selectAll("text")
|
||||
.style("text-anchor", "start")
|
||||
.style("font-size", "11px")
|
||||
.attr("transform", "translate(18, 0.5)");
|
||||
|
||||
// This block simply adds the legend title. I put it into a d3 data
|
||||
// object to split it onto 2 lines. This technique works with any
|
||||
// number of lines, it isn't dimple specific.
|
||||
svg.selectAll("title_text")
|
||||
.data(["Click bar to select",
|
||||
"and pause. Click again",
|
||||
"to resume animation"])
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", 435)
|
||||
.attr("y", function (d, i) { return 15 + i * 12; })
|
||||
.style("font-family", "sans-serif")
|
||||
.style("font-size", "10px")
|
||||
.style("color", "Black")
|
||||
.text(function (d) { return d; });
|
||||
|
||||
// Manually set the bar colors
|
||||
s.shapes
|
||||
.attr("rx", 10)
|
||||
.attr("ry", 10)
|
||||
.style("fill", defaultColor.fill)
|
||||
.style("stroke", defaultColor.stroke)
|
||||
.style("opacity", 0.4);
|
||||
svg.selectAll("rect.Jan-12")
|
||||
.style("fill", indicatorColor.fill)
|
||||
.style("stroke", indicatorColor.stroke);
|
||||
|
||||
// Draw the main chart
|
||||
var bubbles = new dimple.chart(svg, data);
|
||||
bubbles.setBounds(60, 50, 355, 310)
|
||||
bubbles.addMeasureAxis("x", "Distribution");
|
||||
bubbles.addMeasureAxis("y", "Price");
|
||||
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
|
||||
bubbles.addLegend(60, 10, 410, 60);
|
||||
|
||||
// Add a storyboard to the main chart and set the tick event
|
||||
var story = bubbles.setStoryboard("Month", onTick);
|
||||
// Change the frame duration
|
||||
story.frameDuration = frame;
|
||||
// Order the storyboard by date
|
||||
story.addOrderRule("Date");
|
||||
|
||||
// Draw the bubble chart
|
||||
bubbles.draw();
|
||||
|
||||
// Orphan the legends as they are consistent but by default they
|
||||
// will refresh on tick
|
||||
bubbles.legends = [];
|
||||
// Remove the storyboard label because the chart will indicate the
|
||||
// current month instead of the label
|
||||
story.storyLabel.remove();
|
||||
|
||||
// On click of the side chart
|
||||
function onClick(e) {
|
||||
// Pause the animation
|
||||
story.pauseAnimation();
|
||||
// If it is already selected resume the animation
|
||||
// otherwise pause and move to the selected month
|
||||
if (e.yValue === story.getFrameValue()) {
|
||||
story.startAnimation();
|
||||
} else {
|
||||
story.goToFrame(e.yValue);
|
||||
story.pauseAnimation();
|
||||
}
|
||||
}
|
||||
|
||||
// On tick of the main charts storyboard
|
||||
function onTick(e) {
|
||||
// Color all shapes the same
|
||||
s.shapes
|
||||
.transition()
|
||||
.duration(frame / 2)
|
||||
.style("fill", defaultColor.fill)
|
||||
.style("stroke", defaultColor.stroke);
|
||||
// Then color the selected shape differently
|
||||
svg.selectAll("rect." + e)
|
||||
.transition()
|
||||
.duration(frame / 2)
|
||||
.style("fill", indicatorColor.fill)
|
||||
.style("stroke", indicatorColor.stroke);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
Before Width: | Height: | Size: 573 B After Width: | Height: | Size: 573 B |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |