Add 100 points at once dynamically to Highcharts

502 views Asked by At

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/

0

There are 0 answers