Ah, now I see! I needed two instances of “chart” – say chart1 and chart2, then two “chartcontainers” – chartcontainer1 and chartcontainer2. Then I could do chart1.render() and chart2.render (): worked like a charm. Thanks much.
All right! I used the line you provided, which worked beautifully. Once I realized it was something I needed to do, I downloaded jquery, and changed the incorrect <script src=”jquery.js”></script> to the correct <script src=”/jquery/jquery-1.10.1.js”></script> <!– make sure jquery is available! –> Which works like a charm as evidenced in: http://www.capegreenenergy.com/dev/sunilJSON.html
Thanks again for your ultra fast help. I look forward to playing with this over the summer. Jack Adams
OK now my ignorance is really going to show! What does it mean to have jquery properly referenced in the URL? Thanks again, very much. Jack Adams
I am an EE Prof., enjoying this package. Thanks for a great site with lots of examples. I am looking to take data from mysql which is generated via sensor enabled Arduinos sending info (temp, humidity, ect) regularly to the mysql. I have the Arduino to mysql working, and can extract the data from mysql and plot with another package, but can’t render the data in canvasjs. To get comfortable with canvasjs I have made a couple of simple files to test, and am stuck. For simplicity, have made a table with just three ints: id, x, and y. The following PHP seems to work. The table “testing” just has three columns: id, x, and y which are all set to int, and id is set to autoincrement (using phpmyadmin). <?php header(‘Content-Type: application/json’); $con=mysqli_connect(“localhost”, “cjsuser”, “temp2013”, “canvasjsdb”); // Check connection if (mysqli_connect_errno($con)) { echo “Failed to connect to DataBase: ” . mysqli_connect_error(); }else { $data_points = array(); $result = mysqli_query($con, “SELECT * FROM testing”); while($row = mysqli_fetch_array($result)) { $point = array(“label” => $row[‘x’] , “y” => $row[‘y’]); array_push($data_points, $point); } echo json_encode($data_points, JSON_NUMERIC_CHECK); } mysqli_close($con); ?> This is live at: http://www.capegreenenergy.com/dev/sunilJSON.php It returns: [{“label”:1,”y”:10},{“label”:2,”y”:20},{“label”:3,”y”:15}]
However, the following doesn’t render, and I think I am missing something obvious. <html> <head> <title>JSON TEST</title> <script src=”jquery.js”></script> <script src=”/js/canvasjs.js”></script> <script type=”text/javascript”> $(document).ready(function () { $.getJSON(“sunilJSON.php”, function (result) { var chart = new CanvasJS.Chart(“chartContainer”, { data: [ { dataPoints: result } ] }); chart.render(); }); }); </script> </head> <body> <h2>OK NOW IN THE BODY</h2> <div id=”chartContainer” style=”width: 800px; height: 380px;”></div> <h2>OK this is after chartContainer</h2> </body> </html> This is live at: http://www.capegreenenergy.com/dev/sunilJSON.html and as you can see it is live but the chart does not render.
I used a simple example from your site to make sure my directory structure is ok (I have /dev and /js at the same level of hierarchy). This one works fine: http://www.capegreenenergy.com/dev/simpleChart.html
<html> <head> <script type=”text/javascript”> window.onload = function () { //function () {
var chart = new CanvasJS.Chart(“chartContainer”, {
title:{ text: “Fruits sold in First Quarter” }, data: [//array of dataSeries { //dataSeries object
/*** Change type “column” to “bar”, “area”, “line” or “pie”***/ type: “column”, dataPoints: [ { label: “banana”, y: 18 }, { label: “orange”, y: 29 }, { label: “apple”, y: 40 }, { label: “mango”, y: 34 }, { label: “grape”, y: 24 } ] } ] });
chart.render(); } </script> <script type=”text/javascript” src=”/js/canvasjs.js”></script> </head> <body> Thanks again for a cool package and thanks in advance for helping me get unstuck :)