Added Animated Price Example
|
@ -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",
|
"id":"advanced_lollipop_with_hover",
|
||||||
"title":"Tooltip Charts",
|
"title":"Tooltip Charts",
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
var popup = null;
|
var popup = null;
|
||||||
|
|
||||||
// Position the main chart
|
// Position the main chart
|
||||||
myChart.setBounds(70, 30, 490, 290);
|
myChart.setBounds(60, 30, 500, 290);
|
||||||
|
|
||||||
// Add the main chart axes
|
// Add the main chart axes
|
||||||
myChart.addCategoryAxis("x", "Brand");
|
myChart.addCategoryAxis("x", "Brand");
|
||||||
|
|
|
@ -4,18 +4,38 @@
|
||||||
<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) {
|
||||||
data = dimple.filterData(data, "Month", "Dec-12");
|
|
||||||
|
// Filter the data for a single channel
|
||||||
data = dimple.filterData(data, "Channel", "Hypermarkets");
|
data = dimple.filterData(data, "Channel", "Hypermarkets");
|
||||||
|
|
||||||
|
// Create the chart
|
||||||
var myChart = new dimple.chart(svg, data);
|
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 x = myChart.addCategoryAxis("x", "Brand");
|
||||||
var y1 = myChart.addMeasureAxis("y", "Price");
|
var y1 = myChart.addMeasureAxis("y", "Price");
|
||||||
var y2 = myChart.addMeasureAxis("y", "Sales Value");
|
var y2 = myChart.addMeasureAxis("y", "Sales Value");
|
||||||
|
|
||||||
|
// Color the sales bars to be highly transparent
|
||||||
myChart.assignColor("Sales", "#222222", "#000000", 0.1);
|
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("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;
|
// Add series for minimum, average and maximum price
|
||||||
myChart.addSeries("Max", dimple.plot.bubble, [x, y1]).aggregate = dimple.aggregateMethod.max;
|
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();
|
myChart.draw();
|
||||||
});
|
});
|
||||||
</script>
|
</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 |