CODEWITHSUNDEEP
javascripthighcharts
Anupa Sankar
Anupa Sankar

Reputation: 531

For higher number of data in time series highchart calculates average value

I have a highchart time series in my website.

When I try to generate time series of 1 month I got the correct value as shown below ( I got correct value of ch4 in Feb 27, 02.00 as 9.90)enter image description here

When I try to generate time series for 2 months for the same time it shows the different value (I got the average value of ch4 in the interval Feb 27, 00.00 to Feb 27, 02.59 ).

enter image description here

I needed is to show the maximum value of ch4 in the 2 month chart, not the average.

( I needed to show 9.90 as the value of ch4 in the interval Feb 27, 00.00 to Feb 27, 02.59)

How can I do that?

Below is the properties of the time series that I am using:

options = {
	legend: { enabled: true },
	chart: { renderTo: 'container'/*, type: 'spline'*/ },
	tooltip: {
		shared: true,
		pointFormat: "<span style=\"color:{point.color}\">\u25CF</span> {series.name}: <b>{point.y:.2f}</b><br/>"
		//  xDateFormat: '%d-%b-%Y %H:%M',
	},

	xAxis: { type: 'datetime', dateTimeLabelFormats: { day: '%e.%b.%y', hour: '%H:%M', year: '%Y', month: '%b-%Y', } },
	yAxis:
			[{ // PressureAttributes yAxis --0
				title: { text: 'Pressure Attributes (m Bar)', style: {/*color: Highcharts.getOptions().colors[0]*/ } },
				labels: {
					formatter: function () { return this.value ; },
				rotation:-90},
				opposite: false,
				gridLineWidth: 0,
				offset: 120
			}, { //CH4,O2,CO2    yAxis --1
				title: { text: 'Gas Attribute (%v/v)', style: { /*color: Highcharts.getOptions().colors[0]*/ } },
				labels: {
					formatter: function () { return this.value  ; },
					rotation: -90
				},
				opposite: false,
				gridLineWidth: 0,
				offset: 40
			}, { // Temperature yAxis --3
				title: { text: 'Temperature ( °C )', style: {/*color: Highcharts.getOptions().colors[0]*/ } },
				labels: {
					formatter: function () { return this.value  ; },
					rotation: -270
				},
				opposite: true,
				gridLineWidth: 0,
				offset: 40
			}, { // PPM yAxis --4
				title: { text: 'Gas Attribute (PPM)', style: {/*color: Highcharts.getOptions().colors[0]*/ } },
				labels: {
					formatter: function () { return this.value ; },
					rotation: -270
				},
				opposite: true,
				gridLineWidth: 0,
				offset: 120
			}]
,
	navigator: { enabled: true, adaptToUpdatedData: false },
	title: { text: 'Reading Time Series' },
	scrollbar: { liveRedraw: false },
	rangeSelector:{inputEnabled: false},
	series: [
				   { name: 'VOC', data: [], yAxis: 3 },
				   { name: 'H2S', data: [], yAxis: 3 },
				   { name: 'CO', data: [], yAxis: 3 },
				   { name: 'O2', data: [], yAxis: 1 },
				   { name: 'CH4', data: [], yAxis: 1 },
				   { name: 'CO2', data: [], yAxis: 1 },
				   { name: 'BH Pressure', data: [], yAxis: 0 },
				   { name: 'ATM Pressure', data: [], yAxis: 0 },
				   { name: 'Temperature', data: [], yAxis: 2 },
				   { name: 'Battery', data: [], yAxis: 3 }
	]
};

Do I need to set any special property to achieve my goal?

Upvotes: 0

Views: 310

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

It is caused by dataGrouping. In the Highcharts API we can read:

plotOptions.line.dataGrouping

Data grouping is the concept of sampling the data values into larger blocks in order to ease readability and increase performance of the JavaScript charts. Highstock by default applies data grouping when the points become closer than a certain pixel value, determined by the groupPixelWidth option.

You can disable the dataGrouping in this way:

plotOptions: {
    series: {
        dataGrouping: {
            enabled: false
        }
    }
},

API Reference: https://api.highcharts.com/highstock/plotOptions.line.dataGrouping

Upvotes: 2

Related Questions