I am trying to display own MYSQL-data with an intraday area chart.
Unfortunately this doesn't work with the chosen ntraday area chart but works with a highchart scatter plot.
Because the timestamps of the data are not continous, I am prepocessing the data, so that the values are sumed up for every minute:
Code: Select all
<?php
$con=mysqli_connect("localhost","test", "test", "test");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
}
//if ($result = mysqli_query($con, "SELECT SUM(zahl) as StundenSumme, EXTRACT(YEAR from zeit) AS year, EXTRACT(MONTH from zeit) AS month, EXTRACT(DAY from zeit) AS day, EXTRACT(HOUR from zeit) AS hour FROM `ratzen` WHERE 1 GROUP BY year,$
if ($result = mysqli_query($con, "SELECT SUM(zahl) as MinutenSumme, EXTRACT(YEAR from zeit) AS year, EXTRACT(MONTH from zeit) AS month, EXTRACT(DAY from zeit) AS day, EXTRACT(HOUR from zeit) AS hour, EXTRACT(MINUTE from zeit) AS minute F$
printf("Select returned %d rows.\n", mysqli_num_rows($result));
}
while($row = mysqli_fetch_array($result)) {
$hour = $row['hour'];
$month = $row['month'];
$year = $row['year'];
$day = $row['day'];
$minute = $row['minute'];
$second = 0;
//FROM 'ratzen' WHERE 1 GROUP BY year, month, day, hour, minute;
//extract $row;
//$time = strtotime($row['zeit'])*1000;
$number = $row['MinutenSumme'];
$time = (mktime($hour,$minute, $second, $month, $day, $year))*1000;
$overhead1 = $number+0.1;
$overhead2 = $number+0.11;
$overhead3 = $number+0.111;
// echo $row['zeit'] ."/";// convert from Unix timestamp to JavaScript time
$data[] = "[$time, $number, $overhead1, $overhead2, $overhead3]";
}
echo join($data, ',');
mysqli_close($con);
?>
Underneath, the chart should display this data. Unfortunately this works for the scatter plot but not with the intraday area chart.Select returned 5 rows. [1539813120000, 7, 7.1, 7.11, 7.111],[1539813180000, 13, 13.1, 13.11, 13.111],[1539813240000, 24, 24.1, 24.11, 24.111],[1539813300000, 17, 17.1, 17.11, 17.111],[1539813360000, 27, 27.1, 27.11, 27.111]
I suppose that either the data is not processed for this kind of diagram or I misused the code of this diagramm from https://www.highcharts.com/stock/demo/intraday-area
This is the html/JS code that follows the php mentioned above. Where is the mistake and why does the chart don't show up?
Code: Select all
<html>
<head>
<title>HighChart</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script src="https://code.highcharts.com/stock/highstock.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>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</head>
<body>
<script type="text/javascript">
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL stock price by minute'
},
subtitle: {
text: 'Using ordinal X axis'
},
xAxis: {
gapGridLineWidth: 0
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'AAPL',
type: 'area',
data: [<?php echo join($data, ',') ?>],
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
series: [{
name: 'AAPL',
type: 'area',
data: [<?php echo join($data, ',') ?>],
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}]
});
});
//data: [<?php echo join($data, ',') ?>]
// }]
//});
</script>
</body>
</html>