Home › Forums › Chart Support › How can I use PHP MySQL Dynamic data › Reply To: How can I use PHP MySQL Dynamic data

May 12, 2019 at 3:58 pm #25145

Ganesh

Hi, I am trying to implement CanvasJS in my code so that I can display my mysql data in different charts and apply filter later like Select results Year wise, Department wise

But I am getting the plain text displayed in webpage when I follow this code like this :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
[{"label":"Sample size calculation","y":42},{"label":"Statistical analysis","y":206},{"label":"Data management","y":25},{"label":"Research method","y":7},{"label":"Writing a manuscript","y":2},{"label":"Health technology assessment \/ Economic Evaluation","y":7},{"label":"Data Logical","y":5},{"label":"Others","y":2}]<div id="chartContainer" style="height: 380px; width: 800; margin: 0px auto;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    
    <script src="jquery.js"></script>
    <script src="canvasjs.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("getjson.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            //type: 'pie',
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        });
    </script>
</body>
</html>

I have two php files like you suggested:
1. getjson.php
2. render.php

1. getjson.php

<?php

header('Content-Type: application/json');

include "console/connect_db.php";

    $data_points = array();
    $sql = "SELECT COUNT(*) as count,a.id_skill,s.skill FROM appointment a,skills_data s WHERE 
        a.id_skill=s.id_skill and a.ap_status ='complete' GROUP BY `id_skill`";
    $result = $conn->query($sql);
    while($row = $result->fetch_assoc())
    {
        $point = array("label" => $row['skill'] , "y" => $row['count']);
        
        array_push($data_points, $point);
    }
    
    echo json_encode($data_points, JSON_NUMERIC_CHECK);

?>

2. render.php

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
require "getjson.php";
?>
<div id="chartContainer" style="height: 380px; width: 800; margin: 0px auto;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    
    <script src="jquery.js"></script>
    <script src="canvasjs.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON("getjson.php", function (result) {

                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            //type: 'pie',
                            dataPoints: result
                        }
                    ]
                });

                chart.render();
            });
        });
    </script>
</body>
</html>