highstocks intraday chart with timestamp and non decimal y axis

Question

Have a highstock chart with a large number of data around 60-80 thousand timestamp and sum. The problem is that none of the data which i give to highstock contains decimal but highstock shows some values that are decimals like 1.5 but my data does not have any 1.5. Does the highstock averages the data if timestamp is more than 1hour or anything? If it does averages the data than how to stop this averaging as i dont need decimal data

var chart = Highcharts.stockChart('container', {

    chart: {
        height: 400
    },

    title: {
        text: 'Tweets Count'
    },


xAxis: {
     gapGridLineWidth: 0,
     events: {
     afterSetExtremes: function (e) {
     min=e.min
     max=e.max
     src="http://34.66.198.6/"+id+"/map/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
     loadIframe("map",src)
     src="http://34.66.198.6/"+id+"/hashtags/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
     loadIframe("hashtags",src)
     src="http://34.66.198.6/"+id+"/mentions_screen_name/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
     loadIframe("mentions_screen_name",src)
     src="http://34.66.198.6/"+id+"/screen_name/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
     loadIframe("screen_name",src)
     src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
     loadIframe("sentiments",src)
     src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/All/all"
     loadIframe("twitter",src)
     src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/All/all/word"
     loadIframe("word-cloud",src)
         }
     }
 },

yAxis:{
 text:'Tweets Count'
 }

, rangeSelector: { buttons: [{ type: 'hour', count: 1, text: '1H' }, { type: 'day', count: 1, text: '1D' }, { type: 'month', count: 1, text: '1M' }, { type: 'year', count: 1, text: '1Y' }, { type: 'all', count: 1, text: 'All' }], selected: 1, inputEnabled: false },

    series: [{
        name: 'Tweets Count',
        data: {{data}},
        type: 'area',
        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
    }], 

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                chart: {
                    height: 300
                },
                subtitle: {
                    text: null
                },
                navigator: {
                    enabled: false
                }
            }
        }]
    }
});

If i zoom into the data the decimal values are gone and my actual data shows. — samiullah ilyas

ppotaczek ppotaczek · Accepted Answer · 2019-07-05T13:31:37

Highstock provides dataGrouping feature, which is enabled by default.

Please check the docs below and compare the result with:

disabled dataGrouping: http://jsfiddle.net/BlackLabel/tokz3aum/
enabled dataGrouping http://jsfiddle.net/BlackLabel/co16j85p/

You can disable dataGrouping or define your own approximation function which will round the result, for example:

series: [{
    data: [...],
    dataGrouping: {
        approximation: function(arr) {
            var len = arr.length,
                ret = Highcharts.approximations.sum(arr);

            if (Highcharts.isNumber(ret) && len) {
                ret = ret / len;
            }

            return Math.round(ret);
        }
    }
}]

Live demo: http://jsfiddle.net/BlackLabel/q6ukvrp9/

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

Docs: https://www.highcharts.com/docs/advanced-chart-features/data-grouping

highstocks intraday chart with timestamp and non decimal y axis

1 Answers