for some years my stockchart worked fine.
I did this script by trial and error and was happy that it finally worked, because I'm not a coder
But since few days only the complete time span will be shown as chart.
For shorter periods the chart will be blank.
I think, that's due to bad importing values from the SQL table.
In the firefox console I get this message:
Highcharts warning #15: www.highcharts.com/errors/15/
I create the array with this php script:
Code: Select all
<?php
date_default_timezone_set('Europe/Berlin');
require_once 'config.php';
$result = mysqli_query($db,"SELECT UNIX_TIMESTAMP(datum_zeit) AS zeit, stock_1, stock_2, stock_3, stock_4, stock_5, stock_6, stock_7, stock_8, stock_9, temp FROM Messwerte ORDER BY datum_zeit DESC LIMIT 90000");
while($row = mysqli_fetch_assoc($result)) {
$datum = $row['zeit'];
$wert1 = $row['stock_1'];
$wert2 = $row['stock_2'];
$wert3 = $row['stock_3'];
$wert4 = $row['stock_4'];
$wert5 = $row['stock_5'];
$wert6 = $row['stock_6'];
$wert7 = $row['stock_7'];
$wert8 = $row['stock_8'];
$wert9 = $row['stock_9'];
$wert10 = $row['temp'];
$datum *= 1000; // convert from Unix timestamp to JavaScript time
$data[] = array($datum, $wert1, $wert2, $wert3, $wert4, $wert5, $wert6, $wert7, $wert8, $wert9, $wert10);
}
echo json_encode($data);
die();
mysql_close($db);
?>
Code: Select all
$(function() {
$.getJSON("./daten.php", function(data) {
var series1 = [];
var series2 = [];
var series3 = [];
var series4 = [];
var series5 = [];
var series6 = [];
var series7 = [];
var series8 = [];
var series9 = [];
var series10 = [];
for (var i = 0; i < data.length; i++) {
series1.push([data[i][0], parseFloat(data[i][1])]);
series2.push([data[i][0], parseFloat(data[i][2])]);
series3.push([data[i][0], parseFloat(data[i][3])]);
series4.push([data[i][0], parseFloat(data[i][4])]);
series5.push([data[i][0], parseFloat(data[i][5])]);
series6.push([data[i][0], parseFloat(data[i][6])]);
series7.push([data[i][0], parseFloat(data[i][7])]);
series8.push([data[i][0], parseFloat(data[i][8])]);
series9.push([data[i][0], parseFloat(data[i][9])]);
series10.push([data[i][0], parseFloat(data[i][10])]);
};
- 0: Array(11) [ 1654499795000, "47.849", "39.687", … ]
0: 1654499795000
1: "47.849"
2: "39.687"
3: "36.237"
4: "39.774"
5: "31.654"
6: "44.038"
7: "42.021"
8: "44.863"
9: "28.527"
10: "16.5"
length: 11
And draw the chart with this:
Code: Select all
$('#container').highcharts('StockChart', {
chart: {
borderColor: '#3d3d3d', //Rahmen
borderWidth: 2,
borderRadius: 7,
backgroundColor: '#000000', //Hintergrundfarbe chart
zoomType: 'x',
spacingLeft: 15,
spacingRight: 0,
events: {
margin: 0,
spacing: 0,
load() {
const chart = this;
chart.update({
title: {
style: {
color: '#009933',
fontWeight: 'bold',
fontSize: '14px'
},
floating: true,
y: 15,
// text: 'Aktuelle Temperatur: ' + wert1 + '°C ' + '(' + lastTime + ' Uhr)'
text: 'Aktuelle Temperatur: ' + wert1 + '°C ' + '(' + zeit_letzter_datensatz_mez + ' Uhr)'
}
}, false)
}
},
},
scrollbar: {
barBackgroundColor: '#cccccc',
barBorderRadius: 7,
barBorderWidth: 0,
trackBackgroundColor: 'black',
trackBorderColor: 'silver',
buttonBorderRadius: 7,
trackBorderRadius: 7
},
navigator: {
height: 40,
series: [
{data: series1,
fillOpacity: 0.00},
{data: series2,
fillOpacity: 0.00},
{data: series3,
fillOpacity: 0.00},
{data: series4,
fillOpacity: 0.00},
{data: series5,
fillOpacity: 0.00},
{data: series6,
fillOpacity: 0.00},
{data: series7,
fillOpacity: 0.00},
{data: series8,
fillOpacity: 0.00},
{data: series9,
fillOpacity: 0.00}
]
},
legend: {
itemStyle: {
color: 'grey',
fontWeight: 'bold'
},
title: {
text: '↓↓↓ Anklicken zum Aus- und Einblenden. Strg + anklicken de- und reaktiviert alle anderen Kurven. Ausgeblendet = rot ↓↓↓',
style: {
fontStyle: 'italic',
color: '#666',
fontWeight: 'normal',
fontSize: '14px',
horizontalAlign: 'center'
}
},
enabled: true,
floating: true,
itemHiddenStyle: {
color: 'red'
},
itemHoverStyle: {
color: '#FFFFFF'
},
y: -120
},
rangeSelector: { //Zeitraum-Auswahl
verticalAlign: 'top',
buttonPosition: {
align: 'right'
},
inputPosition: {
align: 'left'
},
selected: 2, // Vorauswahl: 1 Woche
inputDateFormat: '%d.%m.%Y',
inputEditDateFormat: '%d.%m.%Y',
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
width: 60,
style: {
color: '#696969',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#ababab',
style: {
color: '#e8e8e8'
}
}
// disabled: { ... }
}
},
buttons: [{
type: 'day',
count: 1,
text: '1 Tag'
},
{
type: 'week',
count: 1,
text: '1 Woche'
},
{
type: 'month',
count: 1,
text: '1 Monat'
},
/* {
type: 'year',
count: 1,
text: '1y'
},
*/
{
type: 'all',
text: 'Gesamt'
}],
selected: 2 // Hier einstellen, womit der der chart startet: 1 Tag, 1 Woche usw.
},
xAxis: {
ordinal: false,
labels: {
format: '{value:%d.%m.%Y<br/>%H:%M}'
}
},
tooltip: {
// xDateFormat: '%d.%m.%Y<br/>%H:%M', // mit Zeilenumbruch
xDateFormat: '%d.%m.%Y - %H:%M',
style: {
fontWeight: 'bold'
}
},
credits: {
enabled: false
},
yAxis: [{
gridLineWidth: 0.4,
gridLineDashStyle: 'ShortDot', //gestrichelte Skalen-Linien
gridLineColor: '#B5B5B5',
// tickAmount: 10, //Anzahl waagerechte Linien
title: {
text: 'Gewicht (kg) | Temperatur (°C)',
offset: 15,
rotation: 270,
},
// Gestrichelte rote Line bei 0:
plotLines: [{
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 0.4,
}]
}],
time: {
timezone: 'Europe/Berlin'
},
plotOptions:{
series:{
showInNavigator: false,
turboThreshold:50000, //larger threshold or set to 0 to disable
lineWidth: 1.2,
dataGrouping: {
enabled: false,
dateTimeLabelFormats: {
day: ['%d-%m-%d - %H:%M', '%d-%m-%Y - %H:%M'],
week: ['%d-%m-%d - %H:%M', '%d-%m-%Y - %H:%M'],
month: ['%d-%m-%d - %H:%M', '%d-%m-%Y - %H:%M'],
year: ['%d-%m-%d - %H:%M', '%d-%m-%Y - %H:%M']
}
},
events: {
legendItemClick: function(e) {
// Upon cmd-click of a legend item, rather than toggling visibility, we want to hide all other items.
var hideAllOthers = (e.browserEvent.metaKey || e.browserEvent.ctrlKey);
if (hideAllOthers) {
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++) {
// rather than calling 'show()' and 'hide()' on the series', we use setVisible and then
// call chart.redraw --- this is significantly faster since it involves fewer chart redraws
if (series[i].index === seriesIndex) {
if (!series[i].visible) {
series[i].setVisible(true, false)
};
}
else {
if (series[i].visible) {
series[i].setVisible(false, false)
} else {
series[i].setVisible(true, false);
}
}
}
this.chart.redraw();
return false;
}
}
}
}
},
series: [
{ //1. series
name: 'Stock 1',
type: 'line',
data: series1,
color: '#ffff00',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //2. series
name: 'Stock 2',
type: 'line',
data: series2,
color: '#b84dff',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //3. series
name: 'Stock 3',
type: 'line',
data: series3,
color: '#b36200',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //4. series
name: 'Stock 4',
type: 'line',
data: series4,
color: '#7FFF00',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //5. series
name: 'Stock 5',
type: 'line',
data: series5,
color: '#ff00ff',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //6. series
name: 'Stock 6',
type: 'line',
data: series6,
color: '#ff0000',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //7. series
name: 'Stock 7',
type: 'line',
data: series7,
color: '#00F5FF',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //8. series
name: 'Stock 8',
type: 'line',
// lineWidth: 1.5,
data: series8,
color: '#ff6600',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //9. series
name: 'Stock 9',
type: 'line',
data: series9,
color: '#4d4dff',
tooltip: {
valueDecimals: 3,
valueSuffix: ' kg'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
},
},
{ //10. series
name: 'Temp',
type: 'line',
data: series10,
color: '#009933',
tooltip: {
valueDecimals: 1,
valueSuffix: ' °C'
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
},
}],
}
Only the complete period will be drawn.
It stopped working on 2 servers: 1 in the web and 1 local on a rasperry PI without any changes by me.
Please help me, what can I do?