I extract data from my mysqli db into JSON file like this.:
<?php
session_start();
include_once("../config.php");
$Name13 = $_SESSION['RNaam'];
$conn = new mysqli($servername ,$username, $password, $db);
$sqli = "SELECT * FROM metingen where Id > '20000' and Lijn ='Lijn 2' and FlakeType1 ='FLK PE DSD329 0216 P2S2' AND KleurL BETWEEN '60'AND '80' ORDER BY Id asc";
$result2 = mysqli_query($conn, $sqli);
//$rows = array();
$rows['metingen'] = 'metingen';
$rows['Datum'] = 'Datum';
while($r1 = mysqli_fetch_array($result2)) {
$rows['data'][] = $r1['Datum'];
$rows['data'][] = $r1['KleurL'];
}
$result2 = array();
//array_push($result2,$data);
array_push($result2,$rows);
print json_encode($result2, JSON_NUMERIC_CHECK);
$conn->close();
?>```
The result of my JSON looks like this.:
[{"metingen":"metingen","Datum":"Datum","data":["17-1-2022",77.42,"17-1-2022",77.46,"17-1-2022",75.71,"17-1-2022",78.37,"18-1-2022",78.86,"18-1-2022",78.41,"18-1-2022",76.51,"18-1-2022",76.03,"18-1-2022",75.48,"18-1-2022",75.6,"18-1-2022",75.25,"18-1-2022",76.53,"18-1-2022",78.01,"18-1-2022",77.63,"18-1-2022",78.51,"18-1-2022",78.67,"19-1-2022",76.16,"19-1-2022",75.38,"19-1-2022",75.55,"19-1-2022",73.71,"19-1-2022",76.91,"19-1-2022",77.25,"19-1-2022",78,"19-1-2022",77.81,"19-1-2022",77.65,"22-1-2022",77.21,"22-1-2022",76.97,"22-1-2022",77.43,"22-1-2022",78.08,"22-1-2022",75.76,"22-1-2022",76.12,"23-1-2022",76.07,"23-1-2022",76.32,"23-1-2022",77.43,"23-1-2022",77.97,"23-1-2022",78.03,"23-1-2022",77.86,"23-1-2022",76.41,"23-1-2022",76.69,"23-1-2022",76.44,"23-1-2022",76.4,"24-1-2022",76.2,"24-1-2022",75.97,"24-1-2022",76.85,"24-1-2022",76.2,"24-1-2022",77.56,"1-2-2022",74.88.......```
The page with highcharts looks like this.:
<!DOCTYPE HTML>
<?php
session_start();
?>
<script>
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
</script>
<html>
<head>
<?php
echo '<!-- <meta http-Equiv="Cache-Control" Content="no-cache"> -->';
echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">';
echo '<meta http-Equiv="Pragma" Content="no-cache">';
echo '<meta http-Equiv="Expires" Content="0">';
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grafiek</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("datatest01112022.php", function(json) {
/*options.series[0].name = json[0]['Reg_sample'];
options.series[0].data = json[0]['KleurL'];*/
chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Gemeten L* waarde van Prep 2 bij Extrusie 2',
x: -20 //center
},
subtitle: {text: '',x: -20},
xAxis: { title: {
text: 'Datum'
}},
yAxis: {
title: {
text: 'KleurL'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
//return '<b>'+ this.series.name +'</b><br/>'+
return '<b>Meetwaarden</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},
yAxis: {
plotLines: [{value: 70,color: 'red',dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
{value: 80,color: 'red',dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
{value: 75,color: 'green',dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn' },
}]
},
series: json,
});
});
});
});
</script>
</head>
<body>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
<!--<script src="highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>-->
</body>
</html>```
Why dosn't plot the highcharts the values and put the date/time into the x-axis in the line, but if i remove the date/time from my JSON file it works?
Can anybody solve my problem?
You need to adapt your data to the format required by Highcharts. In your case, it can be an array of arrays, each with two values.
data: [
[0, 1],
[1, 2],
[2, 8]
]
You should do that in your php script, but you can also use JS part:
const processedData = [];
for (let i = 0; i < json[0].data.length; i += 2) {
processedData.push([json[0].data[i], json[0].data[i + 1]]);
}
json[0].data = processedData;
Live demo: http://jsfiddle.net/BlackLabel/35cem86h/
API Reference: https://api.highcharts.com/highcharts/series.line.data