Added Animated Price Example
John Kiernander
|
|
@ -1,4 +1,10 @@
|
|||
[
|
||||
{
|
||||
"id":"advanced_price_range_lollipop",
|
||||
"title":"Price Changes",
|
||||
"shortTitle":"Price Changes",
|
||||
"desc":"This examples demonstrates multiple series, multiple axes, different aggregations and a storyboard"
|
||||
},
|
||||
{
|
||||
"id":"advanced_lollipop_with_hover",
|
||||
"title":"Tooltip Charts",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
var popup = null;
|
||||
|
||||
// Position the main chart
|
||||
myChart.setBounds(70, 30, 490, 290);
|
||||
myChart.setBounds(60, 30, 500, 290);
|
||||
|
||||
// Add the main chart axes
|
||||
myChart.addCategoryAxis("x", "Brand");
|
||||
|
|
|
|||
|
|
@ -4,18 +4,38 @@
|
|||
<script type="text/javascript">
|
||||
var svg = dimple.newSvg("#chartContainer", 590, 400);
|
||||
d3.tsv("/data/example_data.tsv", function (data) {
|
||||
data = dimple.filterData(data, "Month", "Dec-12");
|
||||
|
||||
// Filter the data for a single channel
|
||||
data = dimple.filterData(data, "Channel", "Hypermarkets");
|
||||
|
||||
// Create the chart
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(40, 30, 420, 320)
|
||||
myChart.setBounds(60, 30, 500, 300)
|
||||
|
||||
// Add an x and 2 y-axes. When using multiple axes it's
|
||||
// important to assign them to variables to pass to the series
|
||||
var x = myChart.addCategoryAxis("x", "Brand");
|
||||
var y1 = myChart.addMeasureAxis("y", "Price");
|
||||
var y2 = myChart.addMeasureAxis("y", "Sales Value");
|
||||
|
||||
// Color the sales bars to be highly transparent
|
||||
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
|
||||
|
||||
// Add the bars mapped to the second y axis
|
||||
myChart.addSeries("Sales", dimple.plot.bar, [x, y2]);
|
||||
myChart.addSeries("Min", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.min;
|
||||
myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.avg;
|
||||
myChart.addSeries("Max", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.max;
|
||||
|
||||
// Add series for minimum, average and maximum price
|
||||
var min = myChart.addSeries("Min", dimple.plot.bubble, [x, y1]);
|
||||
min.aggregate = dimple.aggregateMethod.min;
|
||||
var avg = myChart.addSeries("Avg", dimple.plot.bubble, [x, y1]);
|
||||
avg.aggregate = dimple.aggregateMethod.avg;
|
||||
var max = myChart.addSeries("Max", dimple.plot.bubble, [x, y1]);
|
||||
max.aggregate = dimple.aggregateMethod.max;
|
||||
|
||||
// Animate the chart for every date value, any dimension can be passed
|
||||
// here and dimple will animate over its values.
|
||||
myChart.setStoryboard("Date");
|
||||
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Random Bubbles</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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("body", 1000, 600);
|
||||
function getData() {
|
||||
var returnVal = [];
|
||||
var c = Math.ceil(Math.random() * 12);
|
||||
for (var i = 1; i <= c; i++) {
|
||||
returnVal.push({ "SKU":"SKU " + i, "Volume": 5000 - Math.floor(Math.random() * 10000), "Value": 5000 - Math.floor(Math.random() * 10000)});
|
||||
}
|
||||
return returnVal;
|
||||
}
|
||||
var myChart = new dimple.chart(svg, getData());
|
||||
myChart.addMeasureAxis("x", "Volume");
|
||||
myChart.addMeasureAxis("y", "Value");
|
||||
myChart.addMeasureAxis("z", "Value");
|
||||
myChart.addSeries("SKU", dimple.plot.bubble);
|
||||
myChart.draw(1000);
|
||||
|
||||
setInterval(function () {
|
||||
myChart.data = getData();
|
||||
myChart.draw(1000);
|
||||
}, 2000);
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Test Bed</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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("body", 1000, 600);
|
||||
function getData() {
|
||||
var returnVal = [];
|
||||
var bc = Math.ceil(Math.random() * 4);
|
||||
var c = Math.ceil(Math.random() * 12);
|
||||
for (var k = 1; k <= bc; k++) {
|
||||
for (var i = 1; i <= c; i++) {
|
||||
returnVal.push({ "Brand":"Brand " + k, "SKU":"SKU " + i, "Volume": 5000 - Math.floor(Math.random() * 10000), "Value": 5000 - Math.floor(Math.random() * 10000)});
|
||||
}
|
||||
}
|
||||
return returnVal;
|
||||
}
|
||||
var myChart = new dimple.chart(svg, getData());
|
||||
myChart.addAxis("x", "Brand", "Value").showPercent = true;
|
||||
myChart.addPctAxis("y", "Value");
|
||||
myChart.addSeries("SKU", dimple.plot.bar);
|
||||
myChart.draw();
|
||||
|
||||
setInterval(function () {
|
||||
myChart.data = getData();
|
||||
myChart.draw(1000);
|
||||
}, 2000);
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<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) {
|
||||
data = dimple.filterData(data, "Date", "01/12/2012");
|
||||
var myChart = new dimple.chart(svg, data);
|
||||
myChart.setBounds(60, 30, 500, 330)
|
||||
myChart.addMeasureAxis("x", "Unit Sales");
|
||||
myChart.addMeasureAxis("y", "Operating Profit");
|
||||
myChart.addSeries(["SKU", "Channel"], dimple.plot.bubble);
|
||||
myChart.addLegend(200, 10, 360, 20, "right");
|
||||
myChart.draw();
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 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: 22 KiB After Width: | Height: | Size: 22 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.9 KiB After Width: | Height: | Size: 6.9 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: 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: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 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.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 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: 11 KiB After Width: | Height: | Size: 11 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: 9.8 KiB After Width: | Height: | Size: 9.8 KiB |