Home forums Using CanvasJS How can I use PHP MySQL Dynamic data Reply To: How can I use PHP MySQL Dynamic data

#25145

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://canvasjs.com/assets/script/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://canvasjs.com/assets/script/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>