I working with dimple.js Pie Bubbles chart but and I set data for the chart but chart doesn't work properly.I don't know what is the problem with my data. Sorry because of my silly question I am new in d3.js and dimple.js
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="chartContainer"></div>
</body>
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/dimple.js"></script>
<script>
var svg = dimple.newSvg("#chartContainer", 590, 400);
// Define all the axes
data = [
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) },
{ "Distribution" : (Math.random() * 100), "Price" : (Math.random() * 100), "Unit Sales" : (Math.random() * 100) , "Sales Value" : (Math.random() * 100) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 495, 330);
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>
</html>
You don't have a date field in your data.
The line:
Iterates the distinct values in the date field, you either need to change the name to something in your data or add a field called Date.