javascript - Animated Pie Bubbles dimple data -
i working dimple.js pie bubbles chart , set info chart chart doesn't work properly.i don't know problem data. sorry because of silly question new in d3.js , 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 axes info = [ { "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 axis bounds xaxis.overridemin = 40; xaxis.overridemax = 70; yaxis.overridemax = 150; // set maximum radius bubbles ring.radius = 75; pie.radius = 75; // create fixed 10px ring 5px // margin (negative sizes calculated inwards) ring.innerradius = "-10px"; pie.outerradius = "-15px"; // draw averages pie , ring ring.aggregate = dimple.aggregatemethod.avg; pie.aggregate = dimple.aggregatemethod.avg; // animate date mychart.setstoryboard("date"); mychart.draw(); </script> </html>
you don't have date field in data.
the line:
mychart.setstoryboard("date"); iterates distinct values in date field, either need alter name in info or add together field called date.
javascript d3.js dimple.js
No comments:
Post a Comment