Highcharts shows data but cannot display a chart
I am trying to display dynamic charts that we can change the graph by year, month and day.
I did it successfully, I can change the X Axis based on each time and the data through the Json array went well too, however the chart does not appear.
JavaScript:
$.ajax({
url: 'content/getChart.php',
type: "POST",
async: true,
dataType: 'json',
data: {
type: type,
part: part,
year: year_val,
month: month_val,
day: day_val,
days_in_month: days_in_month
},
success: function (data){
var data_array = [];
$.each(data, function(i, val) {
//data_array.push({x: val.time * 1000, y: val.value}); //first result
data_array.push(val.time * 1000, val.value);
});
purchase_chart.series[0].setData(data_array);
console.log(data_array);
}
});
PHP:
$purchase_array = array();
$array_test = array();
$resQry = "";
for($i = $start; $i <= $end; $i++){
$resQry = "";
$resQry .= "SELECT COUNT(*) AS `total_sum`";
$resQry .= "FROM `purchase`";
if($type == "daily" && $year != 0 && $month != 0 && $day != 0){
$resQry .= "WHERE YEAR(`purchase_date`) = '$year' AND MONTH(`purchase_date`) = '$month' AND DAY(`purchase_date`) = '$i' ";
$timemk = mktime(0, 0, 0, $month, $i, $year);
}
else if($type == "monthly" && $year != 0 && $month != 0){
$resQry .= "WHERE YEAR(`purchase_date`) = '$year' AND MONTH(`purchase_date`) = '$i' ";
$timemk = mktime(0, 0, 0, $i, 0, $year);
}
else if($type == "yearly" && $year != 0){
$resQry .= "WHERE YEAR(`purchase_date`) = '$i' ";
$timemk = mktime(0, 0, 0, 0, 0, $i);
}
$resQry .= "ORDER BY `purchase_date`";
$result = $conn->query($resQry);
$row = $result->fetch_array();
$purchase_array[$timemk]['time'][] = $timemk;
$purchase_array[$timemk]['value'][] = (int)$row['total_sum'];
}
$conn->close();
echo(json_encode($purchase_array));
I tried many ways, but only got me to this.
Json output:
[{"x": 1385766000000,"y": [0]},
{"x": 1417302000000,"y": [0]},
{"x": 1448838000000,"y": [0]},
{"x": 1480460400000,"y": [12]},
{"x": 1511996400000,"y": [0]},
{"x": 1543532400000,"y": [0]},
{"x": 1575068400000,"y": [0}]
The result is still the same as the old code. However, if I put the json array manually, it gives me big error # 15.
and also if i put the array like this (manually) the graph appears
[[1385766000000,0],
[1417302000000,0],
[1448838000000,0],
[1480460400000,12],
[1511996400000,0],
[1543532400000,0],
[1575068400000,0]]
+3
source to share
1 answer
Try changing .setData(data_array);
to the following line:
purchase_chart.series[0].setData([data_array], true);
It will automatically trigger the chart redraw action.
Also, the following parameter may help:
// Front-End: change datetime to milliseconds
data_array.push([val.time * 1000, val.value]);
// Back-End [1]: submit time; remove convertation to string
$timemk = mktime(...);
// Back-End [2]: order dates; Highchart will stack when data is not ordered
$resQry .= "ORDER BY `purchase_date`";
// Back-End [3]: remove array bind for values
$purchase_array[$timemk] = array(
'time' => $timemk,
'value' => (int) $row['total_sum']
);
+1
source to share