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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -