swchen swchen - 1 month ago 6
JSON Question

How to draw the highcharts by using the data got from MySQL database

I want to draw a highcharts by using the value got from MySQL database. I get the value from database and encode into jason successfully, but the highcharts doesn't come up, can you help me?

====2016/10/05 update====

I add JSON_NUMERIC_CHECK in my json_encode function to parse the strings into numeric type, but still can't show the highcharts correctly, can you help me?

====2016/10/06 update====

I upload the screenshot of my result here to show that I truely have the right json format of my data which got from my apache server. Left part is my code, the highlighted line 25 shows my result in right part of my screenshot. You can see the result I parse from database in json format is [3,2,6,9,5]. Why there is no highcharts below my webpage?

Screenshot here↓↓↓↓↓
enter image description here

database↓

CREATE TABLE `db` (
`name` varchar(2) DEFAULT NULL,
`status` varchar(6) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `db` (`name`, `status`) VALUES
('dd', 'done'),
('ee', 'done'),
('dd', 'done'),
('aa', 'done'),
('cc', 'done'),
('ee', 'done'),
('cc', 'done'),
('dd', 'done'),
('cc', 'done'),
('ee', 'done'),
('bb', 'done'),
('dd', 'done'),
('ee', 'done'),
('cc', 'done'),
('dd', 'done'),
('dd', 'done'),
('dd', 'done'),
('ee', 'done'),
('cc', 'done'),
('cc', 'change'),
('aa', 'change'),
('aa', 'change'),
('dd', 'change'),
('bb', 'change'),
('dd', 'change');


index.php↓

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

<h2 align="center">INDEX</h2>



<form action="highcharts.php">
<input type="submit" name="submit_schedule" value="View_highcharts">
</form>

</body>
</html>


highcharts.php↓

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!--invoke jquery first then highcharts libraries when you use highcharts to draw the plot.-->
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="highcharts.js"> <!--put .js file in c:\xampp\htdocs-->
</script>

</head>

<body>
<h2 align="center">HighCharts.js demo</h2>

<?php
echo "JSON WORKS↓↓↓<br><br>";
$sth = mysqli_query(new mysqli("localhost","root","","ask"), "select distinct name, count(status) as number from db group by name");
$rows = array();
while($r = mysqli_fetch_assoc($sth)) {
$rows[] = $r['number'];
}
json_encode($rows);
$rows_json = json_encode($rows, JSON_NUMERIC_CHECK);
print "this line is rows_json: $rows_json";
echo "<br><br>JSON WORKS↑↑↑";
?>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>


highcharts.js↓

$(function () {
$.getJSON('highcharts.php', function(data) {
$("#container").highcharts({
chart: {
type: 'column'
},
title: {
text: 'js_demo'
},
xAxis: {
categories: ['aa', 'bb', 'cc', 'dd', 'ee']
},
yAxis: {
min: 0,
title: {
text: 'number of count'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'done',
data: data
}]
});
});
});

Answer

I found a solution of my question:

  1. just REMOVE this line:

    $.getJSON('highcharts.php', function(data) {}

  2. set the variable get from php, put it under <head> tag.

  3. paste the js code under <head> tag instead of invoke highcharts.js into highcharts.php

  4. echo the variable in the series object in js