Plotting with CanvasJS in HTML from an external .JS file
Question
I have this working javascript / HTML code that plots a basic line chart with CanvasJS for some basic test data. See below. I dont want to use google charts because I have tried it and google charts has memory leaks which makes google charts more or less useless for me.
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: false, backgroundColor: "#000000", title:{ text: "Price chart for crypto currency: ", fontSize: 22, fontFamily: "arial", fontWeight: "lighter", fontColor: "white", horizontalAlign: "left"}, axisY:{ includeZero: false, tickColor: "white", lineColor: "white", labelFontColor: "white", gridColor: "white", gridThickness: 0.5}, axisX:{ minimum: 1, maximum: 5.1, interval: 1, tickColor: "white", lineColor: "white", labelFontColor: "white", gridColor: "white", gridThickness: 0.5}, data: [{type: "line", dataPoints: [ { x: 1, y: 450 }, { x: 2, y: 414}, { x: 3, y: 520}, { x: 4, y: 460 }, { x: 5, y: 450 } ] }] }); chart.render(); } </script> </head> <body> <div id="chartContainer" style="width: 80%; height: 450px;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>
Now, I want to pull out the essential plotting code function and put it into javascript function called PlotData() in an external .js file called plot.js that is located in the same folder as the HTML file. The idea in the end is to the call such function from HTML with the data as a function parameter like this PlotData([{x:1, y:450}, {x:2, y:414} etc etc ]). This will make HTML code less complex and more generic which means I can use it for other data as well.
I have tried to do this below. I have not yet put the data into the function parameter because the code is not working. I have to solve one problem at a time. First, get the external .js plotting code working and then add the data as a plotting function parameter.
function PlotData() { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: false, backgroundColor: "#000000", title:{ text: "Price chart for crypto currency: ", fontSize: 22, fontFamily: "arial", fontWeight: "lighter", fontColor: "white", horizontalAlign: "left"}, axisY:{ includeZero: false, tickColor: "white", lineColor: "white", labelFontColor: "white", gridColor: "white", gridThickness: 0.5}, axisX:{ minimum: 1, maximum: 5.1, interval: 1, tickColor: "white", lineColor: "white", labelFontColor: "white", gridColor: "white", gridThickness: 0.5}, data: [{type: "line", dataPoints: [ { x: 1, y: 450 }, { x: 2, y: 414}, { x: 3, y: 520}, { x: 4, y: 460 }, { x: 5, y: 450 } ] }] }); chart.render(); }
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src='plot.js'> </script> <script> window.onload = PlotData(); </script> </head> <body> <div id="chartContainer" style="width: 80%; height: 450px;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>
I know how to add data to a function parameter xxx(a) from an external .js file called test3 located in the same folder as the HTML code successfully.
function xxx(a) { alert("Value of a = " + a); }
<!DOCTYPE html> <html> <head> <script type="text/javascript" src='test3.js'> </script> </head> <body> <script> xxx([1,2,3,4,5]); </script> </body> </html>
but because complexity of the plotting code I am unable to emulate such working code.
1 answers
solution1
0 ACCPTED 2019-03-14 05:44:38
You can pass data from HTML to the function defined in external JS file and render the chart. Here is the working code: https://1drv.ms/u/s!Am6ZJqYg9Zmfgyj5JROGJigcwArr
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.