You must be logged in to post your query.
Home › Forums › Chart Support › Display data from MySQL database in line chart
Tagged: line chart CanvasJS
I have tried to display a data from MySQL table in line chart. the x-axis hold the staff names and y-axis contains the id number. I faced a problem that the string (staff name) is not showing in the x-axis and it shows only the numeric value The code that I have tried so far is:
<?php $dataPoints = array(); //Best practice is to create a separate file for handling connection to database try{ // Creating a new connection. // Replace your-hostname, your-db, your-username, your-password according to your database $link = new PDO('mysql:host=localhost;dbname=aa', 'root', ''); $handle = $link->prepare('select * from staff'); $handle->execute(); $result = $handle->fetchAll(PDO::FETCH_OBJ); foreach($result as $row){ array_push($dataPoints, array("x"=> $row->Name, "y"=> $row->id)); } $link = null; } catch(PDOException $ex){ print($ex->getMessage()); } ?> <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, exportEnabled: true, theme: "light1", title:{ text: "PHP Column Chart from Database" }, xaxis data: [{ type: "line", //change type to bar, line, area, pie, etc yValueFormatString: "$#,##0K", indexLabel: "{y}", indexLabelPlacement: "inside", indexLabelFontWeight: "bolder", indexLabelFontColor: "white", dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> }] }); chart.render(); } </script> </head> <body> <center><div id="chartContainer" style="height: 370px; width: 50%;"></div></center> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>
@zaid1987,
CanvasJS accepts only numeric or dateTime value for x-values and numeric value for y-values.
In here, array_push($dataPoints, array("x"=> $row->Name, "y"=> $row->id));, you are assigning string values to x-values and CanvasJS doesn’t accepts string values for dataPoint x-values. You need to assign string values to label to render the chart as shown in the code snippet
array_push($dataPoints, array("x"=> $row->Name, "y"=> $row->id));
array_push($dataPoints, array("label"=> $row->Name, "y"=> $row->id));
Also, you can checkout this Gallery Page for an example in which dataPoints has y-values and labels for rendering the chart in PHP.
If this doesn’t solve your issue, kindly create a sample project reproducing the issue you are facing and share it over Google-Drive or Onedrive along with the sample database so that we can look into your code, understand it better and help you out.
__ Priyanka M S Team CanvasJS
You must be logged in to reply to this topic. Login/Register