0

I'm trying to add 100 points at once dynamically to Highcharts and shift the chart after 1000 added points. But I do not get it to work in a good way. Here is my code. What is it that I am doing wrong?

var chart;
var minData = 1000;

function myFunction() {
    setInterval(function() {
        for (var i = 0; i < 100; i++) {
            var y = Math.random();
            var shift = (chart.series[0].data.length >= minData ? true : false);
            chart.series[0].addPoint(y, false, shift);
        }

        chart.redraw();
    }, 1000);
}


$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "spline",
            zoomType: 'x'
        },
        title: {
            text: 'Inverter ~ AC Currents'
        },
        subtitle: {
            text: 'Click and drag in the plot area to zoom in'
        },
        plotOptions: {
            spline: {
                turboThreshold: 5000,
                lineWidth: 2,
                states: {
                    hover: {
                        enabled: true,
                        lineWidth: 3
                    }
                },
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 5,
                            lineWidth: 1
                        }
                    }
                }
            }
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 100,

            labels: {
                rotation: -45,


                align: 'right',
                style: "font: 'normal 10px Verdana, sans-serif'"
            },
            title: {
                text: 'Date/Time'
            }
        },
        yAxis: {
            title: {
                text: 'Current ~ Amps'
            }
        },
        tooltip: {
            formatter: function() {
                var celcius = parseInt(this.point.t - 273);
                var farenheit = parseInt((9 / 5) * (this.point.t - 273) + 32);
                return ' ' +
                    '<span style="color:blue;font-weight:bold;">' + this.series.name + '</span><br />' +
                    '<span style="color:blue;font-weight:bold;">' + Highcharts.dateFormat('%m/%d/%Y %H:%M:%S', this.point.x) + '</span><br />' +
                    '<span style="color:red;font-weight:normal;">' + 'Amps: </span><span style="font-weight:800;">' + this.point.y + '</span><br />';
            }
        },
        exporting: {
            enabled: true
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });
});

http://jsfiddle.net/o9sgrxzd/

sheilak
  • 5,833
  • 7
  • 34
  • 43
David karlson
  • 21
  • 3
  • What is it about your code/example that isn't "in a good way"? Seems to be both adding and shifting. – Halvor Holsten Strand Feb 20 '16 at 17:08
  • I do not want a large part of the data is drawn at once. I want the data to be plotted fast in a soft way. Can I hide the beginning and end of the graph in which data is added and shifted out? – David karlson Feb 20 '16 at 20:39
  • So you want it to be more smooth-scrolling? You'd have to be more specific on how you receive data then. In your example you are adding 100 points at once, every 1000ms. Why not just add 1 point every 10ms, and redraw after each one? That way it is smooth. But that might not be realistic if you receive your data in a way which you have not described. – Halvor Holsten Strand Feb 20 '16 at 20:49
  • Actually the data coming to be ECG signal at 500 Hz. That is 500 points per second. Every second, 500 points coming to the WebSocket in the form of JSON [1.261992,1.261988,1.261987,1.261990,1.261993, ....]. I started experimenting to plot 100 randomly points every second, but do not look so good. I want this to be plotted directly and I want it to be more smooth-scrolling. – David karlson Feb 20 '16 at 21:46
  • You probably want to set duration of the animation (something around 900ms): http://jsfiddle.net/o9sgrxzd/6/ but I think that 500points every second may be to much to handle. For example very small amount of points will give you quite smooth animation: http://jsfiddle.net/o9sgrxzd/7/ still, not continuous, since you don't know how much time JS operations will take and you can not predict if there will be any delay on the connection browser <-> server. – Paweł Fus Feb 22 '16 at 15:15

0 Answers0