mirror of https://github.com/vitalif/dimple
Update example dimple version
parent
fb36508ca2
commit
e052dc78c8
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// This is the simple vertical grouped stacked 100% bar example
|
// This is the simple vertical grouped stacked 100% bar example
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// Create the svg and set the dimensions
|
// Create the svg and set the dimensions
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// Create the svg and set the dimensions
|
// Create the svg and set the dimensions
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
var data = [
|
var data = [
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer" style="height: 100%">
|
<div id="chartContainer" style="height: 100%">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// In version 1.1.0 it's possible to initialise any size parameter with a
|
// In version 1.1.0 it's possible to initialise any size parameter with a
|
||||||
// % value as well as pixels
|
// % value as well as pixels
|
||||||
|
|
|
@ -3,133 +3,137 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
||||||
// Filter for 1 year
|
// Filter for 1 year
|
||||||
data = dimple.filterData(data, "Month", [
|
data = dimple.filterData(data, "Month", [
|
||||||
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
|
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
|
||||||
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
|
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Create the indicator chart on the right of the main chart
|
// Create the indicator chart on the right of the main chart
|
||||||
var indicator = new dimple.chart(svg, data);
|
var indicator = new dimple.chart(svg, data);
|
||||||
|
|
||||||
// Pick blue as the default and orange for the selected month
|
// Pick blue as the default and orange for the selected month
|
||||||
var defaultColor = indicator.defaultColors[0];
|
var defaultColor = indicator.defaultColors[0];
|
||||||
var indicatorColor = indicator.defaultColors[2];
|
var indicatorColor = indicator.defaultColors[2];
|
||||||
|
|
||||||
// The frame duration for the animation in milliseconds
|
// The frame duration for the animation in milliseconds
|
||||||
var frame = 2000;
|
var frame = 750;
|
||||||
|
|
||||||
var firstTick = true;
|
// Place the indicator bar chart to the right
|
||||||
|
indicator.setBounds(434, 49, 153, 311);
|
||||||
|
|
||||||
// Place the indicator bar chart to the right
|
// Add dates along the y axis
|
||||||
indicator.setBounds(434, 49, 153, 311);
|
var y = indicator.addCategoryAxis("y", "Month");
|
||||||
|
y.addOrderRule("Date", "Desc");
|
||||||
|
|
||||||
// Add dates along the y axis
|
// Use sales for bar size and hide the axis
|
||||||
var y = indicator.addCategoryAxis("y", "Month");
|
var x = indicator.addMeasureAxis("x", "Unit Sales");
|
||||||
y.addOrderRule("Date", "Desc");
|
x.hidden = true;
|
||||||
|
|
||||||
// Use sales for bar size and hide the axis
|
// Add the bars to the indicator and add event handlers
|
||||||
var x = indicator.addMeasureAxis("x", "Unit Sales");
|
var s = indicator.addSeries(null, dimple.plot.bar);
|
||||||
x.hidden = true;
|
s.addEventHandler("click", onClick);
|
||||||
|
// Draw the side chart
|
||||||
|
indicator.draw();
|
||||||
|
|
||||||
// Add the bars to the indicator and add event handlers
|
// Remove the title from the y axis
|
||||||
var s = indicator.addSeries(null, dimple.plot.bar);
|
y.titleShape.remove();
|
||||||
s.addEventHandler("click", onClick);
|
|
||||||
// Draw the side chart
|
|
||||||
indicator.draw();
|
|
||||||
|
|
||||||
// Remove the title from the y axis
|
// Remove the lines from the y axis
|
||||||
y.titleShape.remove();
|
y.shapes.selectAll("line,path").remove();
|
||||||
|
|
||||||
// Remove the lines from the y axis
|
// Move the y axis text inside the plot area
|
||||||
y.shapes.selectAll("line,path").remove();
|
y.shapes.selectAll("text")
|
||||||
|
.style("text-anchor", "start")
|
||||||
|
.style("font-size", "11px")
|
||||||
|
.attr("transform", "translate(18, 0.5)");
|
||||||
|
|
||||||
// Move the y axis text inside the plot area
|
// This block simply adds the legend title. I put it into a d3 data
|
||||||
y.shapes.selectAll("text")
|
// object to split it onto 2 lines. This technique works with any
|
||||||
.style("text-anchor", "start")
|
// number of lines, it isn't dimple specific.
|
||||||
.style("font-size", "11px")
|
svg.selectAll("title_text")
|
||||||
.attr("transform", "translate(18, 0.5)");
|
.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; });
|
||||||
|
|
||||||
// This block simply adds the legend title. I put it into a d3 data
|
// Manually set the bar colors
|
||||||
// object to split it onto 2 lines. This technique works with any
|
s.shapes
|
||||||
// number of lines, it isn't dimple specific.
|
.attr("rx", 10)
|
||||||
svg.selectAll("title_text")
|
.attr("ry", 10)
|
||||||
.data(["Click bar to select",
|
.style("fill", defaultColor.fill)
|
||||||
"and pause. Click again",
|
.style("stroke", defaultColor.stroke)
|
||||||
"to resume animation"])
|
.style("opacity", 0.4);
|
||||||
.enter()
|
svg.selectAll("rect.Jan-12")
|
||||||
.append("text")
|
.style("fill", indicatorColor.fill)
|
||||||
.attr("x", 435)
|
.style("stroke", indicatorColor.stroke);
|
||||||
.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
|
// Draw the main chart
|
||||||
s.shapes
|
var bubbles = new dimple.chart(svg, data);
|
||||||
.attr("rx", 10)
|
bubbles.setBounds(60, 50, 355, 310)
|
||||||
.attr("ry", 10)
|
bubbles.addMeasureAxis("x", "Distribution");
|
||||||
.style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
|
bubbles.addMeasureAxis("y", "Price");
|
||||||
.style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
|
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
|
||||||
.style("opacity", 0.4);
|
bubbles.addLegend(60, 10, 410, 60);
|
||||||
|
|
||||||
// Draw the main chart
|
// Add a storyboard to the main chart and set the tick event
|
||||||
var bubbles = new dimple.chart(svg, data);
|
var story = bubbles.setStoryboard("Month", onTick);
|
||||||
bubbles.setBounds(60, 50, 355, 310)
|
// Change the frame duration
|
||||||
bubbles.addMeasureAxis("x", "Distribution");
|
story.frameDuration = frame;
|
||||||
bubbles.addMeasureAxis("y", "Price");
|
// Order the storyboard by date
|
||||||
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
|
story.addOrderRule("Date");
|
||||||
bubbles.addLegend(60, 10, 410, 60);
|
|
||||||
|
|
||||||
// Add a storyboard to the main chart and set the tick event
|
// Draw the bubble chart
|
||||||
var story = bubbles.setStoryboard("Month", onTick);
|
bubbles.draw();
|
||||||
// Change the frame duration
|
|
||||||
story.frameDuration = frame;
|
|
||||||
// Order the storyboard by date
|
|
||||||
story.addOrderRule("Date");
|
|
||||||
|
|
||||||
// Draw the bubble chart
|
// Orphan the legends as they are consistent but by default they
|
||||||
bubbles.draw();
|
// 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Orphan the legends as they are consistent but by default they
|
// On tick of the main charts storyboard
|
||||||
// will refresh on tick
|
function onTick(e) {
|
||||||
bubbles.legends = [];
|
// Color all shapes the same
|
||||||
// Remove the storyboard label because the chart will indicate the
|
s.shapes
|
||||||
// current month instead of the label
|
.transition()
|
||||||
story.storyLabel.remove();
|
.duration(frame / 2)
|
||||||
|
.style("fill", defaultColor.fill)
|
||||||
// On click of the side chart
|
.style("stroke", defaultColor.stroke);
|
||||||
function onClick(e) {
|
// Then color the selected shape differently
|
||||||
// Pause the animation
|
svg.selectAll("rect." + e)
|
||||||
story.pauseAnimation();
|
.transition()
|
||||||
// If it is already selected resume the animation
|
.duration(frame / 2)
|
||||||
// otherwise pause and move to the selected month
|
.style("fill", indicatorColor.fill)
|
||||||
if (e.yValue === story.getFrameValue()) {
|
.style("stroke", indicatorColor.stroke);
|
||||||
story.startAnimation();
|
}
|
||||||
} else {
|
});
|
||||||
story.goToFrame(e.yValue);
|
|
||||||
story.pauseAnimation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// On tick of the main charts storyboard
|
|
||||||
function onTick(e) {
|
|
||||||
if (!firstTick) {
|
|
||||||
// Color all shapes the same
|
|
||||||
s.shapes
|
|
||||||
.transition()
|
|
||||||
.duration(frame / 2)
|
|
||||||
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
|
|
||||||
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
|
|
||||||
}
|
|
||||||
firstTick = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
// This code should support any data in this structure changing the data here
|
// This code should support any data in this structure changing the data here
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
@ -12,7 +12,10 @@
|
||||||
myChart.addMeasureAxis("x", "Unit Sales");
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
var y = myChart.addCategoryAxis("y", "Month");
|
var y = myChart.addCategoryAxis("y", "Month");
|
||||||
y.addOrderRule("Date");
|
y.addOrderRule("Date");
|
||||||
myChart.addSeries(null, dimple.plot.bar);
|
var s1 = myChart.addSeries(null, dimple.plot.bar);
|
||||||
|
s1.data = data;
|
||||||
|
var s2 = myChart.addSeries("Test", dimple.plot.bubble);
|
||||||
|
s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
|
||||||
myChart.draw();
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<!----------------------------------------------------------------->
|
<!----------------------------------------------------------------->
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.v1.1.4.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div id="chartContainer">
|
<div id="chartContainer">
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.v1.1.2.js"></script>
|
<script src="/dist/dimple.{version}.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
|
|
||||||
|
|
|
@ -2,131 +2,135 @@
|
||||||
<script src="/lib/d3.v3.min.js"></script>
|
<script src="/lib/d3.v3.min.js"></script>
|
||||||
<script src="/dist/dimple.{version}.js"></script>
|
<script src="/dist/dimple.{version}.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||||
d3.tsv("/data/example_data.tsv", function (data) {
|
d3.tsv("/data/example_data.tsv", function (data) {
|
||||||
|
|
||||||
// Filter for 1 year
|
// Filter for 1 year
|
||||||
data = dimple.filterData(data, "Month", [
|
data = dimple.filterData(data, "Month", [
|
||||||
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
|
"Jan-12", "Feb-12", "Mar-12", "Apr-12", "May-12", "Jun-12",
|
||||||
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
|
"Jul-12", "Aug-12", "Sep-12", "Oct-12", "Nov-12", "Dec-12"
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Create the indicator chart on the right of the main chart
|
// Create the indicator chart on the right of the main chart
|
||||||
var indicator = new dimple.chart(svg, data);
|
var indicator = new dimple.chart(svg, data);
|
||||||
|
|
||||||
// Pick blue as the default and orange for the selected month
|
// Pick blue as the default and orange for the selected month
|
||||||
var defaultColor = indicator.defaultColors[0];
|
var defaultColor = indicator.defaultColors[0];
|
||||||
var indicatorColor = indicator.defaultColors[2];
|
var indicatorColor = indicator.defaultColors[2];
|
||||||
|
|
||||||
// The frame duration for the animation in milliseconds
|
// The frame duration for the animation in milliseconds
|
||||||
var frame = 2000;
|
var frame = 750;
|
||||||
|
|
||||||
var firstTick = true;
|
// Place the indicator bar chart to the right
|
||||||
|
indicator.setBounds(434, 49, 153, 311);
|
||||||
|
|
||||||
// Place the indicator bar chart to the right
|
// Add dates along the y axis
|
||||||
indicator.setBounds(434, 49, 153, 311);
|
var y = indicator.addCategoryAxis("y", "Month");
|
||||||
|
y.addOrderRule("Date", "Desc");
|
||||||
|
|
||||||
// Add dates along the y axis
|
// Use sales for bar size and hide the axis
|
||||||
var y = indicator.addCategoryAxis("y", "Month");
|
var x = indicator.addMeasureAxis("x", "Unit Sales");
|
||||||
y.addOrderRule("Date", "Desc");
|
x.hidden = true;
|
||||||
|
|
||||||
// Use sales for bar size and hide the axis
|
// Add the bars to the indicator and add event handlers
|
||||||
var x = indicator.addMeasureAxis("x", "Unit Sales");
|
var s = indicator.addSeries(null, dimple.plot.bar);
|
||||||
x.hidden = true;
|
s.addEventHandler("click", onClick);
|
||||||
|
// Draw the side chart
|
||||||
|
indicator.draw();
|
||||||
|
|
||||||
// Add the bars to the indicator and add event handlers
|
// Remove the title from the y axis
|
||||||
var s = indicator.addSeries(null, dimple.plot.bar);
|
y.titleShape.remove();
|
||||||
s.addEventHandler("click", onClick);
|
|
||||||
// Draw the side chart
|
|
||||||
indicator.draw();
|
|
||||||
|
|
||||||
// Remove the title from the y axis
|
// Remove the lines from the y axis
|
||||||
y.titleShape.remove();
|
y.shapes.selectAll("line,path").remove();
|
||||||
|
|
||||||
// Remove the lines from the y axis
|
// Move the y axis text inside the plot area
|
||||||
y.shapes.selectAll("line,path").remove();
|
y.shapes.selectAll("text")
|
||||||
|
.style("text-anchor", "start")
|
||||||
|
.style("font-size", "11px")
|
||||||
|
.attr("transform", "translate(18, 0.5)");
|
||||||
|
|
||||||
// Move the y axis text inside the plot area
|
// This block simply adds the legend title. I put it into a d3 data
|
||||||
y.shapes.selectAll("text")
|
// object to split it onto 2 lines. This technique works with any
|
||||||
.style("text-anchor", "start")
|
// number of lines, it isn't dimple specific.
|
||||||
.style("font-size", "11px")
|
svg.selectAll("title_text")
|
||||||
.attr("transform", "translate(18, 0.5)");
|
.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; });
|
||||||
|
|
||||||
// This block simply adds the legend title. I put it into a d3 data
|
// Manually set the bar colors
|
||||||
// object to split it onto 2 lines. This technique works with any
|
s.shapes
|
||||||
// number of lines, it isn't dimple specific.
|
.attr("rx", 10)
|
||||||
svg.selectAll("title_text")
|
.attr("ry", 10)
|
||||||
.data(["Click bar to select",
|
.style("fill", defaultColor.fill)
|
||||||
"and pause. Click again",
|
.style("stroke", defaultColor.stroke)
|
||||||
"to resume animation"])
|
.style("opacity", 0.4);
|
||||||
.enter()
|
svg.selectAll("rect.Jan-12")
|
||||||
.append("text")
|
.style("fill", indicatorColor.fill)
|
||||||
.attr("x", 435)
|
.style("stroke", indicatorColor.stroke);
|
||||||
.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
|
// Draw the main chart
|
||||||
s.shapes
|
var bubbles = new dimple.chart(svg, data);
|
||||||
.attr("rx", 10)
|
bubbles.setBounds(60, 50, 355, 310)
|
||||||
.attr("ry", 10)
|
bubbles.addMeasureAxis("x", "Distribution");
|
||||||
.style("fill", function (d) { return (d.y === 'Jan-12' ? indicatorColor.fill : defaultColor.fill) })
|
bubbles.addMeasureAxis("y", "Price");
|
||||||
.style("stroke", function (d) { return (d.y === 'Jan-12' ? indicatorColor.stroke : defaultColor.stroke) })
|
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
|
||||||
.style("opacity", 0.4);
|
bubbles.addLegend(60, 10, 410, 60);
|
||||||
|
|
||||||
// Draw the main chart
|
// Add a storyboard to the main chart and set the tick event
|
||||||
var bubbles = new dimple.chart(svg, data);
|
var story = bubbles.setStoryboard("Month", onTick);
|
||||||
bubbles.setBounds(60, 50, 355, 310)
|
// Change the frame duration
|
||||||
bubbles.addMeasureAxis("x", "Distribution");
|
story.frameDuration = frame;
|
||||||
bubbles.addMeasureAxis("y", "Price");
|
// Order the storyboard by date
|
||||||
bubbles.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble)
|
story.addOrderRule("Date");
|
||||||
bubbles.addLegend(60, 10, 410, 60);
|
|
||||||
|
|
||||||
// Add a storyboard to the main chart and set the tick event
|
// Draw the bubble chart
|
||||||
var story = bubbles.setStoryboard("Month", onTick);
|
bubbles.draw();
|
||||||
// Change the frame duration
|
|
||||||
story.frameDuration = frame;
|
|
||||||
// Order the storyboard by date
|
|
||||||
story.addOrderRule("Date");
|
|
||||||
|
|
||||||
// Draw the bubble chart
|
// Orphan the legends as they are consistent but by default they
|
||||||
bubbles.draw();
|
// 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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Orphan the legends as they are consistent but by default they
|
// On tick of the main charts storyboard
|
||||||
// will refresh on tick
|
function onTick(e) {
|
||||||
bubbles.legends = [];
|
// Color all shapes the same
|
||||||
// Remove the storyboard label because the chart will indicate the
|
s.shapes
|
||||||
// current month instead of the label
|
.transition()
|
||||||
story.storyLabel.remove();
|
.duration(frame / 2)
|
||||||
|
.style("fill", defaultColor.fill)
|
||||||
// On click of the side chart
|
.style("stroke", defaultColor.stroke);
|
||||||
function onClick(e) {
|
// Then color the selected shape differently
|
||||||
// Pause the animation
|
svg.selectAll("rect." + e)
|
||||||
story.pauseAnimation();
|
.transition()
|
||||||
// If it is already selected resume the animation
|
.duration(frame / 2)
|
||||||
// otherwise pause and move to the selected month
|
.style("fill", indicatorColor.fill)
|
||||||
if (e.yValue === story.getFrameValue()) {
|
.style("stroke", indicatorColor.stroke);
|
||||||
story.startAnimation();
|
}
|
||||||
} else {
|
});
|
||||||
story.goToFrame(e.yValue);
|
|
||||||
story.pauseAnimation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// On tick of the main charts storyboard
|
|
||||||
function onTick(e) {
|
|
||||||
if (!firstTick) {
|
|
||||||
// Color all shapes the same
|
|
||||||
s.shapes
|
|
||||||
.transition()
|
|
||||||
.duration(frame / 2)
|
|
||||||
.style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) })
|
|
||||||
.style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) });
|
|
||||||
}
|
|
||||||
firstTick = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</div>
|
</div>
|
|
@ -9,7 +9,10 @@
|
||||||
myChart.addMeasureAxis("x", "Unit Sales");
|
myChart.addMeasureAxis("x", "Unit Sales");
|
||||||
var y = myChart.addCategoryAxis("y", "Month");
|
var y = myChart.addCategoryAxis("y", "Month");
|
||||||
y.addOrderRule("Date");
|
y.addOrderRule("Date");
|
||||||
myChart.addSeries(null, dimple.plot.bar);
|
var s1 = myChart.addSeries(null, dimple.plot.bar);
|
||||||
|
s1.data = data;
|
||||||
|
var s2 = myChart.addSeries("Test", dimple.plot.bubble);
|
||||||
|
s2.data = [{"Test":"Lots of words", "Month": 'test', "Unit Sales":-244434}];
|
||||||
myChart.draw();
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue