dimple-js
Version:
Dimple is an object-oriented API allowing you to create flexible axis-based charts using [d3.js](http://d3js.org "d3.js").
46 lines (38 loc) • 1.47 kB
HTML
<meta charset="utf-8">
<html>
<div id="chartContainer">
{scriptDependencies}
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 495, 330);
// Define all the axes
var xAxis = myChart.addMeasureAxis("x", "Distribution");
var yAxis = myChart.addMeasureAxis("y", "Price");
var segments = myChart.addMeasureAxis("p", "Unit Sales");
var size = myChart.addMeasureAxis("z", "Sales Value");
var ring = myChart.addSeries(["Price Tier", "Channel"], dimple.plot.pie);
var pie = myChart.addSeries(["Price Tier", "Owner"], dimple.plot.pie);
// Zoom in the axis bounds
xAxis.overrideMin = 40;
xAxis.overrideMax = 70;
yAxis.overrideMax = 150;
// Set the maximum radius for the bubbles
ring.radius = 75;
pie.radius = 75;
// Create fixed 10px ring with a 5px
// margin (negative sizes are calculated inwards)
ring.innerRadius = "-10px";
pie.outerRadius = "-15px";
// Draw averages for the pie and ring
ring.aggregate = dimple.aggregateMethod.avg;
pie.aggregate = dimple.aggregateMethod.avg;
// Animate by date
myChart.setStoryboard("Date");
myChart.draw();
});
</script>
</div>
</html>