CODEWITHSUNDEEP
highcharts
shifu
shifu

Reputation: 670

Draw line before marker appear Highchart

I am working on dynamic update using highchart. Is there a way, wherein the line will go first on the next point before marker appear? Currently what is happening is that, the marker appear first on the point before the line connects.

$(document).ready(function () {
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
});

and also if there is a way I could do to move the line movements on the center so that the right will always be blank like the image below

enter image description here

Please refer to this link. Appreciate your help. Thank you.

Upvotes: 1

Views: 263

Answers (1)

morganfree
morganfree

Reputation: 12472

Spacing can be achieved with axis minPadding (space on the left) and maxPadding (space on the right).

xAxis: {
  type: 'datetime',
  tickPixelInterval: 150,
  maxPadding: 0.5
},

As for the animation - you can add point with a disabled marker and then set timeout which will fire after the animation is finished and it will enable marker.

    load: function() {

      // set up the updating of the chart each second
      var series = this.series[0];
      setInterval(function() {
        var x = (new Date()).getTime(), // current time
          y = Math.random();

        series.addPoint({
          x: x,
          y: y,
          marker: {
            enabled: false
          }
        }, true, true);

        setTimeout(() => series.data[series.data.length - 1].update({marker: {enabled: true}}, true, false), 500)
      }, 1000);
    }

By default the animation for adding point is set to 500 so if you change the animation aduration, you need to change the delay param in setTimeout.

example: http://jsfiddle.net/687215jj/1/

Upvotes: 2

Related Questions