Pako
Posts: 50
Joined: Sun Feb 23, 2020 8:35 pm

Highstock patially not working since few days - values from JSON object

Hello,

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);
?>
This array I open with:

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])]);
			};
The array looks like this:
  • 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)']]
                },
            }],

        }
The charts for 1 day, 1 week and 1 month will not be shown!
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?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highstock patially not working since few days - values from JSON object

Hello Pako!
Thanks for contacting us with your question!

I was trying to reproduce your problem based on the code, which you pasted, but in my case, everything is working correctly - you can check the demo below. I think that your problem is in data. Referring to Error #15 in your console, your dates are probably not sorted properly. I suggest you check your data and be sure if the dates are sorted correctly.

Demo: https://jsfiddle.net/BlackLabel/89dfrhs6/

Let me know if that helps you and feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
Pako
Posts: 50
Joined: Sun Feb 23, 2020 8:35 pm

Re: Highstock patially not working since few days - values from JSON object

Hello Hubert,

thanks for your reply.
But few minutes ago I was able to solve the problem by sorting the arrays with:

Code: Select all

series1.sort();...
What makes me wonder is, why did it work for some years perfectly, and suddenly it cracked without changing anything (except browser updates).
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highstock patially not working since few days - values from JSON object

Pako,

It is hard to say, the development of Highcharts is based on the assumption that the data should be sorted. If the chart was working for the last few years and it broke recently, maybe the data in your database have changed and now there is an error there? It's really hard to say, so it is only my guess.

Regards!
Hubert Kozik
Highcharts Developer
Pako
Posts: 50
Joined: Sun Feb 23, 2020 8:35 pm

Re: Highstock patially not working since few days - values from JSON object

Now another problem appears:
When I use

Code: Select all

src="https://code.highcharts.com/stock/highstock.js"
all is fine.
But when I use the local source:

Code: Select all

 src="highstock10.1.js"
I get 2x this error:
But there charts are drawn.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highstock patially not working since few days - values from JSON object

Pako,

Please check that you are following these instructions correctly:
https://www.highcharts.com/docs/getting ... own-domain

You have several ways to include files locally but if you add the correct paths to local files it should work fine.
Regards!
Hubert Kozik
Highcharts Developer
Pako
Posts: 50
Joined: Sun Feb 23, 2020 8:35 pm

Re: Highstock patially not working since few days - values from JSON object

If I understand that right, I don't need to locally save highmaps.js, because it's included in the highstock.js package, right?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highstock patially not working since few days - values from JSON object

Pako,
Highcharts maps package is not included in Highcharts Stock, but Highcharts is already included in Highcharts Stock. So if you want to use Highcharts maps locally to have to save them.

If stock or maps are required on the same page as each other or with basic Highcharts, they can be loaded as modules as in the article, which I have attached in my previous post.
Regards!
Hubert Kozik
Highcharts Developer
Pako
Posts: 50
Joined: Sun Feb 23, 2020 8:35 pm

Re: Highstock patially not working since few days - values from JSON object

This didn't work for me: more and more errors popped up.
Now I deleted the last line in the highstock.js:

Code: Select all

//# sourceMappingURL=highcharts-more.js.map:
And now the errors are gone.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highstock patially not working since few days - values from JSON object

Pako,
I am attaching for you a zip with a simple HTML page based on https://www.highcharts.com/download/. As you can see there are no errors in the console and the chart is drawing properly.
ZIP file: https://www60.zippyshare.com/v/mA52GUQW/file.html

Regards!
Hubert Kozik
Highcharts Developer
Pako
Posts: 50
Joined: Sun Feb 23, 2020 8:35 pm

Re: Highstock patially not working since few days - values from JSON object

Ah ok, now I got it:

I always saved the highstock.js directly from his page:
https://code.highcharts.com/stock/highstock.js
So the highstock.js.map was missing on the server.
I saved it in the same folder as the highstock.js and now it works.

Thank you!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highstock patially not working since few days - values from JSON object

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”