You must be logged in to post your query.
Home › Forums › Chart Support › Display Y and Y2 on the same label
Tagged: canvasjs mysql php
Hello,
I am trying to display 2 values per label, y and y2, obtained from data.php:
data.php:
$sql="SELECT hour, success, failed FROM daily_chart"; $data_points = array(); $result = mysqli_query($conn, "$sql"); while($row = mysqli_fetch_array($result)) { $point = array("label" => $row['hour'] , "y" => $row['success'], "y2" => $row['failed']); array_push($data_points, $point); } echo json_encode($data_points, JSON_NUMERIC_CHECK);
JSON result: [{"label":0,"y":450,"y2":5},{"label":1,"y":300,"y2":10},{"label":2,"y":200,"y2":15},{"label":3,"y":170,"y2":20},{"label":4,"y":150,"y2":25},{"label":5,"y":150,"y2":15},{"label":6,"y":175,"y2":35},{"label":7,"y":200,"y2":15},{"label":8,"y":250,"y2":25},{"label":9,"y":300,"y2":15},{"label":10,"y":400,"y2":45},{"label":11,"y":450,"y2":15},{"label":12,"y":500,"y2":65},{"label":13,"y":520,"y2":15},{"label":14,"y":600,"y2":75},{"label":15,"y":550,"y2":15},{"label":16,"y":600,"y2":45},{"label":17,"y":700,"y2":15},{"label":18,"y":750,"y2":65},{"label":19,"y":900,"y2":15},{"label":20,"y":1100,"y2":45},{"label":21,"y":1200,"y2":15},{"label":22,"y":1000,"y2":35},{"label":23,"y":450,"y2":25}]
[{"label":0,"y":450,"y2":5},{"label":1,"y":300,"y2":10},{"label":2,"y":200,"y2":15},{"label":3,"y":170,"y2":20},{"label":4,"y":150,"y2":25},{"label":5,"y":150,"y2":15},{"label":6,"y":175,"y2":35},{"label":7,"y":200,"y2":15},{"label":8,"y":250,"y2":25},{"label":9,"y":300,"y2":15},{"label":10,"y":400,"y2":45},{"label":11,"y":450,"y2":15},{"label":12,"y":500,"y2":65},{"label":13,"y":520,"y2":15},{"label":14,"y":600,"y2":75},{"label":15,"y":550,"y2":15},{"label":16,"y":600,"y2":45},{"label":17,"y":700,"y2":15},{"label":18,"y":750,"y2":65},{"label":19,"y":900,"y2":15},{"label":20,"y":1100,"y2":45},{"label":21,"y":1200,"y2":15},{"label":22,"y":1000,"y2":35},{"label":23,"y":450,"y2":25}]
I use the array above as input to getJSON, but nothing is displayed with the code below:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="canvasjs.js"></script> <script type="text/javascript"> $(document).ready(function () { var dataPointsSuccess = []; var dataPointsFailed = []; // Ajax request for getting JSON data $.getJSON("data.php", function(result) { for( var i = 0; i < result.length; i++) { dataPointsSuccess.push({ label: result[i].label, y: result[i].y }); dataPointsFailed.push({ label: result[i].label, y: result[i].y2 }); } // Chart with label + y and y2 values or multiSeries Chart var chart = new CanvasJS.Chart("multiChart", { title:{ text: "Chart with y and y2 values" }, data: [ { type: "column", dataPoints: dataPointsSuccess }, { type: "column", dataPoints: dataPointsFailed } ] }); chart.render(); }); }); </script> </head> <body> <div id="multiChart" style="width: 80%; height: 300px;></div> </body> </html>
@gigi,
Are you looking for something like this?
__________ Indranil Deo, Team CanvasJS
Hello Indranil,
I need something like this:
For each hour of the day I will have 2 values. I tried the code from Anjali for the 3rd graph: https://canvasjs.com/forums/topic/multiple-charts-from-one-json-result/ But it does not work for me. Please help.
PS: Sorry for registering twice, the password recovery doesn’t send a valid link to reset the password.
Best regards, Gigi.
Gigi,
Please take a look at this new example.
Thanks for reporting the password reset issue. We are looking into it. Meanwhile, please use this link to reset your password.
___________ Indranil Deo, Team CanvasJS
The example provided is almost ok, except that it enters the data manually. This is why the code provided by Anjali is much closer to my need, but it doesn’t work, maybe there is a syntax error. I need to split automatically the data_points into dataPoints1 and dataPoints2.
Thank you for your help! I really appreciate it!
Gigi.
Please take a look at this example. It creates the chart using JSON Data from an external source.
_________ Indranil Deo, Team CanvasJS
Hi Indranil,
Thank you very much, this is exactly what I needed! It works very well, the only modification I made is below, in order to display the label received from JSON.
return label = e.chart.data[0].dataPoints[i].label;
Thank you very much for your time and dedication, I really appreciate it!
Glad you figured it out.
____________ Indranil Deo, Team CanvasJS
You must be logged in to reply to this topic. Login/Register