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

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #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>  
    #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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.