javascript - JS, HTML5 - PieChart not loading in -
javascript - JS, HTML5 - PieChart not loading in <div> -
im trying loade piechart js file in div in html code. can't work except when have script containing js code in html code. want have code separated.
here code far:
index.html<head> <meta name="viewport" content="width=device-width" /> <title>index</title> <script type="text/javascript" src="scripts\chart.js"></script> <script type="text/javascript" src="scripts\canvasjs.min.js"></script> </head> <body> <div> <div id="chartcontainer" onload="loadpiechart()" style="height: 300px; width: 300px; margin-left:auto; margin-right:auto; background-color:#323232;"></div> </div> </body>
chart.js function loadpiechart() { var chart = new canvasjs.chart("#chartcontainer", { theme: "theme2",//theme1 title: { text: "stats" }, legend: { verticalalign: "bottom", horizontalalign: "center" }, data: [ { // alter type "bar", "splinearea", "area", "spline", "pie",etc. indexlabelfontsize: 20, indexlabelfontfamily: "monospace", indexlabelfontcolor: "darkgrey", indexlabellinecolor: "darkgrey", indexlabelplacement: "outside", type: "pie", showinlegend: true, tooltipcontent: "{y} - <strong>#percent%</strong>", datapoints: [ { label: "stat1", y: 30, color: "#5877f5", exploded: true, legendtext: "30%" }, { label: "stat2", y: 70, color: "#eb483f", legendtext: "70%" } ] } ] }); chart.render(); }
i solved problem this:
<script type="text/javascript"> window.onload = loadchart; </script>
html: <head> <meta name="viewport" content="width=device-width" /> <title>index</title> <script type="text/javascript" src="scripts\chart.js"></script> <script type="text/javascript" src="\scripts\canvasjs.min.js"></script> <script type="text/javascript"> window.onload = loadchart; </script> </head> <body> <div> <div id="chartcontainer" style="height: 300px; width: 300px; margin-left:auto; margin-right:auto;"></div> </div> </body> </html>
js: function loadchart() { var chart = new canvasjs.chart("chartcontainer", { theme: "theme2",//theme1 title: { text: "stats" }, legend: { verticalalign: "bottom", horizontalalign: "center" }, data: [ { // alter type "bar", "splinearea", "area", "spline", "pie",etc. indexlabelfontsize: 20, indexlabelfontfamily: "monospace", indexlabelfontcolor: "darkgrey", indexlabellinecolor: "darkgrey", indexlabelplacement: "outside", type: "pie", showinlegend: true, tooltipcontent: "{y} - <strong>#percent%</strong>", datapoints: [ { label: "stat1", y: 30, color: "#5877f5", exploded: true, legendtext: "30%" }, { label: "stat2", y: 70, color: "#eb483f", legendtext: "70%" } ] } ] }); chart.render();
javascript jquery html charts
Comments
Post a Comment