Highchart : Line Chart not Loading the data from Database on screen

Highchart : Line Chart not Loading the data from Database on screen - javascript

I am Trying to make a HighChart's Line Chart Based on the data from the Database.
I Fetched the Data from The Database as I can see that data in the console .
The php Code I Used is :
<?php
$query = "
SELECT YEAR(created_at) AS year,
MONTHNAME(created_at) AS month,
COUNT(*) AS count
FROM users
GROUP BY month ASC ORDER BY created_at ASC
" ;
$result = mysqli_query($conn, $query) ;
while ($row = mysqli_fetch_assoc($result)) {
$data1[] = $row['month'];
$data2[] = $row['count'];
}
?>
Now I Fetched the Data in Highchart's script as Follows :
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
},
title: {
text: 'Download Trends'
},
credits: {
enabled: false
},
xAxis: {
categories: ['<?php echo join($data1, "','"); ?>'],
},
yAxis: {
min: 0,
title: {
text: 'No. of Downloads'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Qty',
data: ['<?php echo join($data2, "','"); ?>'],
}]
});
});
</script>
I using the container div with id container as follows :
<div id="container"></div>
The Problem is that the data is not showing in correct Manner . its been showing only half of the data as you can see below :
its not showing the Line.
Please Help

Your data serie is made of strings, and Highcharts works with numbers for this kind of graph.
Remove the simple quotes in the data section and it should works :
data: [<?php echo join($data2, ","); ?>]

Related

MYSQL Database to Highcharts graph via Ajax

I have a database with timestamp for three different parameters but for educational purposes only I am trying to do just one graph on one parameter in real time.
Here is my php code:
if ($result->num_rows > 0) {
$count =0;
echo '[';
while($row = $result->fetch_assoc()) {
echo '['.$row["time"].','.$row["temperature"].']';
$count++;
if ($count<"100") {
echo ',';
}
}
echo ']';
}
else {
echo "[[],[]]";
}
$link->close();
?>
The following php code displays:
[[1511533905000,34],[1511534125000,34],[1511534201000,34],[1511535161000,34],[1511535221000,34],[1511535281000,34],[1511535306000,34],[1511535606000,34],[1511535907000,34],[1511536207000,34],[1511536507000,34],[1511536807000,34],[1511537108000,34],[1511537408000,34],[1511537708000,34],[1511538070000,85],[1511538370000,31],[1511538670000,31],[1511538971000,30],[1511539271000,30],[1511539571000,30],[1511539872000,30],[1511540172000,30],[1511540472000,30],[1511540773000,30],[1511936414000,25],[1511936714000,24],[1511937014000,85],[1511937315000,24],[1511937616000,24],[1511937916000,24],[1511938216000,24],[1511938517000,24],[1511938817000,24],[1511939117000,24],[1511939417000,24],[1511939718000,24],[1511940018000,24],[1511950908000,85],[1511951208000,23],[1511951509000,23],[1511951809000,23],[1511952109000,23],[1511952410000,23],[1511952710000,22],[1511953010000,22],[1511953310000,22],[1511953611000,22],[1511953911000,22],[1511954211000,22],[1511954512000,22],[1511954812000,22],[1511955112000,22],[1511955412000,22],[1511955713000,22],[1512056186000,31],[1512056486000,85],[1512056787000,30],[1512057087000,31],[1512057387000,30],[1512057688000,30],[1512057988000,30],[1512058289000,30],[1512058589000,30],[1512058889000,30],[1512059189000,30],]
now here is the html code:
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//defaultSeriesType: 'spline',
},
title: {
text: 'Live random data'
},
events:{
load: refreshChart()
},
xAxis: {
type: 'datetime',
},
tooltip: {
valueSuffix: ' C'
},
yAxis: {
type: 'linear',
title: {
text: 'Temperature ( C)'
},
},
series: [{}]
});
$.getJSON("index.php", function(json) { /*Get the array data in data.php using jquery getJSON function*/
options.series[0].data = json; /*assign the array variable to chart data object*/
chart = new Highcharts.Chart(options); /*create a new chart*/
});
function refreshChart(){ /*function is called every set interval to refresh(recreate the chart) with the new data from data.php*/
setInterval(function(){
$.getJSON("index.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
},6000);
}
});
But the graph doesnt display anything? Anyhelp pls?

SOLVED!! I just converted the output of my array in the index.php.
$output[] = array(((float)($row["time"])),((int)($row["temperature"])));
in this way both the timestamp and the value of the temperature are both valid json.

Highcharts dynamic graph with database value

I am working with Highchart. I want to draw dynamic graph with database value. I use json format.
Here is my json file:
<?php
// Set the JSON header
header("Content-type: text/json");
include"../veri_ayar.php";
$sql = "SELECT Guc FROM Urun ORDER BY KayitTarihi DESC LIMIT 1";
$result = mysqli_query($conn, $sql);
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
$x = time() * 1000;
foreach($data as $dat)
{
$date .= $dat['Guc'];
}
mysqli_close($conn);
$ret=array($x, $date);
echo json_encode($ret);
?>
And my output is : [1479814215000,"43"]
When I write to just $date for control it looks like: just 43 but when I write to json format it looks like "43".
When I want to draw graph my graph is shift left but no data in graph. just shift to left.
Here is my graph script:
<script>
var chart;
function requestData() {
$.ajax({
url: 'veri-json.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>

Highcharts JS with values from database

I have this code for the Highchart column:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
},
...
series: [{
data: [
['Shanghai', 23.7],
['Lagos', 16.1],
['Istanbul', 14.2],
['Karachi', 14.0],
],
}]
});
});
and this file query.php:
<?php
include 'bd_cnx.php';
$sql = "SELECT
...";
$result = $conn->query($sql);
if ($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$ret[] =[$row['NUME_J'], floatval($row['TOTAL'])];
}
}
echo json_encode($ret);
?>
How can I insert the returned values from query.php in the function javascript to series.data?
Thank you!

var data ;
$.ajax({
method:"POST",
url:"query.php",
data:{},
success:
function(response){
data=response;
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
},
...
series: [{
data: data,
}]
});
},
});

It's covered in the documentation, with examples. Check out their web site: - you may find even more useful ideas. BTW, remember to send the correct JSON Content-Type, or some browsers may balk.
This is one way:
$(function () {
// Get the CSV and create the chart
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {...
You can also get live data.
Finally, you can assign the series variable in several ways, and redraw the chart.

how to make barchart from date 1 until 31 with different value?

i have some problem with this.
i want to make a barchart with xAxis = day from 1-31 ( for this month)
this is my table: http://prntscr.com/4xaljv
case : i have average price Execpt the promo price : 1.000.000
how can i use that data to make a barchart like this one :
http://prntscr.com/4xal4p
anyone can help or make some sugestion about this case?
im trying using high chart and make some problem with value of each date.
this is my code:
<script type="text/javascript">
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
enabled: false
},
xAxis: {
categories: ['1']
},
legend: {
enabled: false
},
yAxis: {
title: {
text: 'Jumlah Penduduk'
}
},
series:
[
<?php
for ($day=1; $day <= $num ; $day++) {
while($k<count($tglevent)){
if($day==$tglevent[$k]){
$promo = $hargapromo[$k];
break;
}
$k++;
}
if ($hargapromo[$k] != NULL || $hargapromo[$k] > 0) {
$harga_promo = ($promo+$data_rata2->average)/2;
}else{
$harga_promo = $data_rata2->average;
}
?>
{
name: [<?= $day ?>],
data: [<?= $data_rata2->average ?>]
},
<?php
}
?>
]
});
});
</script>

Your SQL should be something like this:
SELECT date, avg(price) FROM myTable GROUP BY 1
This will give you the average prive per day, no need (more speed) to calculate it in your program.
Note that you can use MySQLs data-Functions as well:
SELECT year(date), month(date), day(date), avg(price) FROM myTable GROUP BY 1,2,3

No chart is shown using HighCharts

I have started using HighCharts and I have come up with the below code to test it out but the problem is that no chart is shown.
I want a simple line chart with dates running along the bottom and numbers running upwards.
Code
<?php
$sql = array(
'user' => 'removed',
'password' => 'removed',
'server' => 'removed',
'db' => 'removed'
);
$conn = oci_connect($sql['user'], $sql['password'], $sql['server'].'/'.$sql['db']);
if (!$conn) {
$e = oci_error();
trigger_error( htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR );
}
$result = oci_parse($conn, "SELECT EntryDate, COUNT(OrderNo) FROM Orders GROUP BY EntryDate");
oci_execute($result);
while ($row = oci_fetch_array($result)) {
$data0[] = $row['0'];
$data1[] = $row['1'];
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: [<?php echo join($data0, ',') ?>]
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
data: [<?php echo join($data1, ',') ?>],
pointStart: 0,
pointInterval
}]
});
</script>
<div id="container" style="height:100%; width:100%;"></div>
Results
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: [01-NOV-12,02-NOV-12,03-NOV-12,05-NOV-12,06-NOV-12,07-NOV-12,08-NOV-12,09-NOV-12,12-NOV-12,13-NOV-12,14-NOV-12,15-NOV-12,16-NOV-12,19-NOV-12,20-NOV-12,21-NOV-12,22-NOV-12,23-NOV-12,24-NOV-12,26-NOV-12,27-NOV-12,28-NOV-12,29-NOV-12,30-NOV-12,01-DEC-12,02-DEC-12,03-DEC-12,04-DEC-12,05-DEC-12,06-DEC-12,07-DEC-12,10-DEC-12,11-DEC-12,12-DEC-12,13-DEC-12,14-DEC-12,17-DEC-12,18-DEC-12,19-DEC-12,20-DEC-12,21-DEC-12,03-JAN-13,04-JAN-13,05-JAN-13,07-JAN-13,08-JAN-13,09-JAN-13,10-JAN-13,11-JAN-13,14-JAN-13,15-JAN-13,16-JAN-13,17-JAN-13,18-JAN-13,21-JAN-13,22-JAN-13,23-JAN-13,24-JAN-13,25-JAN-13,28-JAN-13,29-JAN-13,30-JAN-13,31-JAN-13,01-FEB-13,04-FEB-13,05-FEB-13,06-FEB-13,07-FEB-13,08-FEB-13,11-FEB-13,12-FEB-13,13-FEB-13,14-FEB-13,15-FEB-13,16-FEB-13,18-FEB-13,19-FEB-13,20-FEB-13,21-FEB-13,22-FEB-13,25-FEB-13,26-FEB-13,27-FEB-13,28-FEB-13,01-MAR-13,02-MAR-13,04-MAR-13,05-MAR-13,06-MAR-13,07-MAR-13,08-MAR-13,11-MAR-13,12-MAR-13,13-MAR-13,14-MAR-13,15-MAR-13,16-MAR-13,17-MAR-13,18-MAR-13,19-MAR-13,20-MAR-13,21-MAR-13,22-MAR-13,25-MAR-13,26-MAR-13,27-MAR-13,28-MAR-13,02-APR-13,03-APR-13,04-APR-13,05-APR-13,08-APR-13,09-APR-13,10-APR-13,11-APR-13,12-APR-13,15-APR-13,16-APR-13,17-APR-13,18-APR-13,19-APR-13,22-APR-13,23-APR-13,24-APR-13,25-APR-13,26-APR-13,29-APR-13,30-APR-13,01-MAY-13,02-MAY-13,03-MAY-13,07-MAY-13,08-MAY-13,09-MAY-13,10-MAY-13,13-MAY-13,14-MAY-13,15-MAY-13,16-MAY-13,17-MAY-13,18-MAY-13,20-MAY-13,21-MAY-13,22-MAY-13,23-MAY-13,24-MAY-13,25-MAY-13,28-MAY-13,29-MAY-13,30-MAY-13,31-MAY-13,03-JUN-13,04-JUN-13,05-JUN-13,06-JUN-13,07-JUN-13,10-JUN-13,11-JUN-13,12-JUN-13,13-JUN-13,14-JUN-13,17-JUN-13,18-JUN-13,19-JUN-13,20-JUN-13,21-JUN-13,24-JUN-13,25-JUN-13,26-JUN-13,27-JUN-13,28-JUN-13,01-JUL-13,02-JUL-13,03-JUL-13,04-JUL-13,05-JUL-13,08-JUL-13,09-JUL-13,10-JUL-13,11-JUL-13,12-JUL-13,15-JUL-13,16-JUL-13,17-JUL-13,18-JUL-13,19-JUL-13,22-JUL-13,23-JUL-13,24-JUL-13,25-JUL-13,26-JUL-13,29-JUL-13,30-JUL-13,31-JUL-13,01-AUG-13,02-AUG-13,05-AUG-13,06-AUG-13,07-AUG-13,08-AUG-13,09-AUG-13,12-AUG-13,13-AUG-13,14-AUG-13,15-AUG-13,16-AUG-13,19-AUG-13,20-AUG-13,21-AUG-13,22-AUG-13,23-AUG-13,27-AUG-13,28-AUG-13,29-AUG-13,30-AUG-13,02-SEP-13,03-SEP-13,04-SEP-13,05-SEP-13,06-SEP-13,09-SEP-13,10-SEP-13,11-SEP-13,12-SEP-13,13-SEP-13,15-SEP-13,16-SEP-13,17-SEP-13,18-SEP-13,19-SEP-13,20-SEP-13,21-SEP-13,23-SEP-13,24-SEP-13,25-SEP-13,26-SEP-13,27-SEP-13,28-SEP-13,30-SEP-13,01-OCT-13,02-OCT-13,03-OCT-13,04-OCT-13,05-OCT-13,07-OCT-13,08-OCT-13,09-OCT-13,10-OCT-13,11-OCT-13,12-OCT-13,14-OCT-13,15-OCT-13,16-OCT-13,17-OCT-13,18-OCT-13,21-OCT-13,22-OCT-13,23-OCT-13,24-OCT-13,25-OCT-13,28-OCT-13,29-OCT-13,30-OCT-13,31-OCT-13,01-NOV-13,04-NOV-13,05-NOV-13,06-NOV-13,07-NOV-13,08-NOV-13,11-NOV-13,12-NOV-13,13-NOV-13,14-NOV-13,15-NOV-13,18-NOV-13,19-NOV-13,20-NOV-13,21-NOV-13,22-NOV-13,25-NOV-13,26-NOV-13,27-NOV-13,28-NOV-13,29-NOV-13,02-DEC-13,03-DEC-13,04-DEC-13,05-DEC-13,06-DEC-13,09-DEC-13,10-DEC-13,11-DEC-13,12-DEC-13,13-DEC-13,16-DEC-13,17-DEC-13,18-DEC-13,19-DEC-13,20-DEC-13,02-JAN-14,03-JAN-14,06-JAN-14,07-JAN-14,08-JAN-14,09-JAN-14,10-JAN-14,13-JAN-14,14-JAN-14,15-JAN-14,16-JAN-14,17-JAN-14,20-JAN-14,21-JAN-14,22-JAN-14,23-JAN-14,24-JAN-14,27-JAN-14,28-JAN-14,29-JAN-14,30-JAN-14,31-JAN-14,03-FEB-14,04-FEB-14,05-FEB-14,06-FEB-14,07-FEB-14,10-FEB-14,11-FEB-14,12-FEB-14,13-FEB-14,14-FEB-14,17-FEB-14,18-FEB-14,19-FEB-14,20-FEB-14,21-FEB-14,24-FEB-14,25-FEB-14,26-FEB-14,27-FEB-14,28-FEB-14,03-MAR-14,04-MAR-14,05-MAR-14,06-MAR-14,07-MAR-14,10-MAR-14,11-MAR-14,12-MAR-14,13-MAR-14,14-MAR-14,17-MAR-14,18-MAR-14,19-MAR-14,20-MAR-14,21-MAR-14,24-MAR-14,25-MAR-14,26-MAR-14,27-MAR-14,28-MAR-14,31-MAR-14,01-APR-14,02-APR-14,03-APR-14,04-APR-14,07-APR-14,08-APR-14,09-APR-14,10-APR-14,11-APR-14,14-APR-14,15-APR-14,16-APR-14,17-APR-14,22-APR-14,23-APR-14,24-APR-14,25-APR-14,28-APR-14,29-APR-14,30-APR-14,01-MAY-14,02-MAY-14,06-MAY-14,07-MAY-14,08-MAY-14,09-MAY-14,12-MAY-14,13-MAY-14,14-MAY-14,15-MAY-14,16-MAY-14,19-MAY-14,20-MAY-14,21-MAY-14,22-MAY-14,23-MAY-14,27-MAY-14,28-MAY-14,29-MAY-14,30-MAY-14,02-JUN-14,03-JUN-14,04-JUN-14,05-JUN-14,06-JUN-14,09-JUN-14,10-JUN-14,11-JUN-14,12-JUN-14,13-JUN-14,16-JUN-14,17-JUN-14,18-JUN-14,19-JUN-14,20-JUN-14,23-JUN-14,24-JUN-14,25-JUN-14,26-JUN-14,27-JUN-14,30-JUN-14,01-JUL-14,02-JUL-14,03-JUL-14,04-JUL-14,07-JUL-14,08-JUL-14,09-JUL-14,10-JUL-14,11-JUL-14,14-JUL-14,15-JUL-14,16-JUL-14,17-JUL-14,18-JUL-14,21-JUL-14,22-JUL-14,23-JUL-14,24-JUL-14,25-JUL-14,28-JUL-14,29-JUL-14,30-JUL-14,31-JUL-14,01-AUG-14,04-AUG-14,05-AUG-14,06-AUG-14,07-AUG-14,08-AUG-14,11-AUG-14,12-AUG-14,13-AUG-14,14-AUG-14,15-AUG-14,18-AUG-14,19-AUG-14,20-AUG-14,21-AUG-14,22-AUG-14,26-AUG-14,27-AUG-14,28-AUG-14,29-AUG-14,01-SEP-14,02-SEP-14,03-SEP-14,04-SEP-14,05-SEP-14]
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
data: [543,555,91,488,626,498,639,516,553,687,616,887,514,483,643,443,699,436,131,389,721,475,878,431,409,19,513,841,631,636,286,701,746,574,597,404,561,772,450,367,122,380,552,111,383,460,640,573,423,469,758,680,550,206,350,464,363,702,595,467,646,589,713,409,499,672,682,670,506,581,495,866,602,566,211,477,605,568,809,647,577,791,517,808,319,201,515,831,611,653,431,453,737,510,573,621,163,65,810,870,631,774,648,639,714,697,589,543,395,738,548,883,670,745,629,553,572,676,806,860,605,686,766,693,712,594,657,579,927,867,657,723,643,826,552,824,730,726,910,485,200,715,799,697,879,579,178,705,865,766,532,734,776,700,764,688,781,643,725,818,560,616,865,828,730,548,698,533,796,850,581,590,569,904,746,376,603,940,548,893,486,713,708,744,978,675,642,737,759,632,715,446,992,756,863,507,532,744,812,538,709,577,815,590,831,575,620,768,618,878,621,806,776,814,555,524,958,752,853,774,613,923,720,888,671,6,483,626,639,755,681,325,547,759,788,520,617,458,611,1021,878,909,653,139,515,794,750,708,555,155,549,744,755,997,531,534,801,702,824,550,574,773,829,705,475,603,688,881,805,645,634,873,644,748,619,655,791,655,800,632,585,814,646,743,693,564,823,699,848,539,580,726,587,722,504,562,557,408,443,285,517,299,483,536,610,731,509,554,667,651,570,544,570,650,688,503,598,699,655,676,612,566,632,730,706,707,569,591,885,728,780,504,648,691,840,664,648,746,760,651,629,499,674,843,582,764,745,767,724,661,831,584,788,954,716,690,581,719,926,807,749,454,681,945,798,856,686,603,905,711,845,470,604,845,753,615,767,713,852,546,819,864,831,746,600,862,733,907,717,770,868,789,997,605,886,808,763,652,721,633,698,760,713,681,898,821,819,721,787,738,767,728,540,660,759,767,620,615,687,852,751,727,527,680,733,735,750,623,862,811,845,805,720,772,811,861,755,648,773,799,884,801,652,605,700,884,896,714,877,808,810,669,774,784,766,989,794,741,810,870,818,576,629,676,744,733,679,750,880,878,604,450],
pointStart: 0,
pointInterval
}]
});
</script>
<div id="container" style="height:100%; width:100%;"></div>
Please can someone let me know what I am doing wrong?

I see two issues. First one is categories should be a list of strings, as other people already have mentioned:
categories: ["<?php echo join($data0, '","') ?>"]
Second issue: new Highcharts.Chart() is called before #container exists in the DOM. So you have to wrap the whole JS in a function to call it after DOM has loaded. This little jQuery piece will call the Highcharts function after the DOM has loaded.
<script type="text/javascript">
$(document).ready(function() {
// your JS-code
});
</script>
Btw, both of these errors are logged in the JS console (don't know which browser you're using and thus how to access it).

Your categories must be strings - currently their output as simple characters after eachother.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: ['01-NOV-12', '02-NOV-12']
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
data: [543,555]
}]
});
You can achieve this by changing your categories: [<?php echo join($data0, ',') ?>] to the following:
categories: [<?php echo "'".implode($data0, "','")."'" ?>]
The implode(seperator, array) function will put all of the values in your array right after each other, seperated by the given characters - expanding that to begin and end with an apostrophe will result in your dates being output as string category names.
Also you've got a pointInterval attribute there at the end of your JS without any value, that was also resulting in the failure of the code.
I've deprecated some of your sample data, but you'll get the point.

The categories should be an array of strings
categories: ["<?php echo join('","',$data0) ?>"]

The javascript code isn't executed on document ready event. Thus perhaps the div with id='container' hasn't been created yet and the chart has nowhere to be drawn. Try putting the code after the div like that:
<div id='container'>
</div>
<script>
//highcharts config code
</script>
You could also put the javascript in a anonymous function and execute it after the declaration:
<div id='container'>
</div>
<script>
(function(){
//Highcharts config code here.
} ());
</script>
Also as the other answers are pointing out, the config is in json format so you should use valid JSON values e.g. string, number, true or false, or null.

Try change this line
categories: ["<?php echo implode('","',$data0) ?>"]

We Keep Coding

JavaScript is the programming language of the Web.

Highchart : Line Chart not Loading the data from Database on screen - javascript

Your data serie is made of strings, and Highcharts works with numbers for this kind of graph. Remove the simple quotes in the data section and it should works : data: [<?php echo join($data2, ","); ?>]

Related

MYSQL Database to Highcharts graph via Ajax

Highcharts dynamic graph with database value

Highcharts JS with values from database

how to make barchart from date 1 until 31 with different value?

No chart is shown using HighCharts

Categories

Resources