ChartJS does not display when using local Chart.js file -
i having problem getting chart.js display chart when using chart.min.js file installed result of using: npm install chart.js --save (however, if use cdn supplied file - chart display)
to avoid putting paths code, copied chart.min.js file install directory: ./node_modules/chart_js/dist/chart.min.js directory web page is. right file copy? anyways, when reload app browser, blank display. there no error messages @ all.
however, if instead use cdn supplied file: <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/0.2.0/chart.min.js" type="text/javascript"></script>
everything works. chart displays.
here html file:
<html> <head> <meta charset="utf-8"/> <title>chart.js demo</title> <script src="chart.min.js" </script> </head> <body> <h1>chart.js sample</h1> <canvas id="countries" width="600" height="400"></canvas> <script> var piedata = [ { value: 20, color:"#878bb6" }, { value : 40, color : "#4acab4" }, { value : 10, color : "#ff8153" }, { value : 30, color : "#ffea88" } ]; // context of canvas element want select var countries= document.getelementbyid("countries").getcontext("2d"); new chart(countries).pie(piedata); </script> </body> </html> so, doing wrong? there issue download?
appreciate this!
i running on mac os x 10.10.5 have tried using both safari , firefox browsers, , have same issue of local chart.min.js file not working.
you better use latest syntax creating chart, instead of old one.
also, correct directory chart.js file resides, when installed through npm :
./node_modules/chart.js/dist/chart.min.js here full code works on chrome, firefox , safari :
<html> <head> <meta charset="utf-8" /> <title>chart.js demo</title> <script src="./node_modules/chart.js/dist/chart.min.js"></script> </head> <body> <h1>chart.js sample</h1> <div class="chart-container" style="width: 600px; height: 400px"> <canvas id="countries"></canvas> </div> <script> var piedata = { datasets: [{ data: [20, 40, 10, 30], backgroundcolor: ["#878bb6", "#4acab4", "#ff8153", "#ffea88"] }] }; // context of canvas element want select var countries = document.getelementbyid("countries").getcontext("2d"); new chart(countries, { type: 'pie', data: piedata }); </script> </body> </html>
Comments
Post a Comment