javascript - charts.js update global variables -
javascript - charts.js update global variables -
having issues getting below work. im not sure if eve possible read few posts regarding re-creating graph in charts.js unsure if thats whats needed here. simple illustration pass values function donutdata variable.
<!doctype html> <html> <head> <title>doughnut chart</title> <script src="../chart.js"></script> <style> body{ padding: 0; margin: 0; } #canvas-holder{ width:30%; } </style> </head> <body> <div id="canvas-holder"> <canvas id="chart-area" width="500" height="500"/> </div> <div id="demo">dd</div> <button onclick="myfunction(20,30,50)">click me</button> <script> var doughnutdata = {}; function myfunction(a,b,c) { var item1 = parseint(a); var item2 = parseint(b); var item3 = parseint(c); var total = item1 + item2 + item3; var item1percent = (item1 / total) * 100; var item2percent = (item2 / total) * 100; var item3percent = (item3 / total) * 100; if(isnan(item1percent)) { var item1percent = 0; } if(isnan(item2percent)) { var item2percent = 0; } if(isnan(item3percent)) { var item3percent = 0; } var doughnutdata = [ { value: item1percent.tofixed(2), color:"#f7464a", highlight: "#ff5a5e", label: "red" }, { value: item2percent.tofixed(2), color: "#46bfbd", highlight: "#5ad3d1", label: "green" }, { value: item3percent.tofixed(2), color: "#fdb45c", highlight: "#ffc870", label: "yellow" } ]; loadfunction(); document.getelementbyid("demo").innerhtml = doughnutdata; } function loadfunction() { var ctx = document.getelementbyid("chart-area").getcontext("2d"); window.mydoughnut = new chart(ctx).doughnut(doughnutdata, {responsive : true}); } window.onload = function(){ var ctx = document.getelementbyid("chart-area").getcontext("2d"); window.mydoughnut = new chart(ctx).doughnut(doughnutdata, {responsive : true}); }; myfunction(1,2,3); </script> </body> </html>
any pointers or help appreciated.
you defining local variable doughnutdata in myfunction(..) "var doughnutdata". remove "var" , create global.
doughnutdata = [ { value: item1percent.tofixed(2), color:"#f7464a", highlight: "#ff5a5e", label: "red" }, { value: item2percent.tofixed(2), color: "#46bfbd", highlight: "#5ad3d1", label: "green" }, { value: item3percent.tofixed(2), color: "#fdb45c", highlight: "#ffc870", label: "yellow" } ];
javascript charts.js
Comments
Post a Comment