FORUMS

Select any forum below to ask question

Home › forums › Using CanvasJS › Display data from MySQL database in line chart

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Priyanka M S 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 15, 2018 at 12:25 pm #23057

    zaid1987
    Member

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
    October 15, 2018 at 2:24 pm #23059

    Priyanka M S
    Member

    @zaid1987,

    CanvasJS accepts only numeric or dateTime x-values and numeric y-values.
    In here, array_push($dataPoints, array("x"=> $row->Name, "y"=> $row->id));, you are assgning string values to x-values which CanvasJS do not accept. Assigning string values to label (array_push($dataPoints, array("label"=> $row->Name, "y"=> $row->id));) should work fine in your case.

    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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.