score:1

Accepted answer

i tried plotting null data against future timestamp values, but stockchart does not accept such kind of data and displays nothing.

it happens because by default xaxis.ordinal = true it means that points are equally spaced in the chart regardless of the actual time or x distance between them. the solution is simple, set xaxis.ordinal = false and set axis extremes to show future time before the graph line. check the demo and code posted below.

var power = [],
  speed = [],
  torque = [],

  i = 0;
let time = 1542278447000;
for (i; i < 100; i += 1) {
  let torquevalue = math.floor(math.random() * (100 - 5 + 1)) + 5;
  let speedvalue = math.floor(math.random() * (100 - 5 + 1)) + 5;
  powervalue = torquevalue * speedvalue
  time = time + 1000
  torque.push([
    time, // the date
    torquevalue // the torque
  ]);
  speed.push([
    time, // the date
    speedvalue // the speed
  ]);
  power.push([
    time, // the date
    powervalue // the power
  ]);
}

// create the chart
highcharts.stockchart('container', {
  chart: {
    events: {
      load: function() {
        var chart = this,
          multiplier,
          datalength,
          x,
          y;

        setinterval(function() {
          chart.series.foreach(function(series) {
            multiplier = series.datamax;
            datalength = chart.series[0].xdata.length;
            x = chart.series[0].xdata[datalength - 1] + 1000;
            y = math.round(math.random() * multiplier);

            series.addpoint([x, y], false, true);
          });

          chart.xaxis[0].setextremes(null, x + 15000);
        }, 1000);

      }
    }
  },
  rangeselector: {
    enabled: false,
    selected: 2
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },

  title: {
    text: ''
  },
  exporting: {
    enabled: false
  },

  subtitle: {
    text: ''
  },

  xaxis: {
    title: {
      text: 'time'
    },
    ordinal: false
  },

  yaxis: [{
    opposite: false,
    startontick: true,
    endontick: true,
    labels: {
      align: 'left',
      x: -22
    },
    title: {
      text: 'torque',
      x: -15
    },
    height: '30%',
    offset: 0,
    linewidth: 2,
    resize: {
      enabled: true
    }
  }, {
    opposite: false,
    labels: {
      align: 'left',
      x: -22
    },
    title: {
      text: 'speed',
      x: -15
    },
    top: '33%',
    height: '30%',
    offset: 0,
    linewidth: 2
  }, {
    opposite: false,
    labels: {
      align: 'left',
      x: -22
    },
    title: {
      text: 'power',
      x: -15
    },
    top: '66%',
    height: '30%',
    offset: 0,
    linewidth: 2
  }],

  legend: {
    enabled: true
  },
  tooltip: {
    split: true
  },

  credits: {
    enabled: false
  },

  plotoptions: {
    series: {}
  },

  series: [{
    color: '#77787b',
    type: 'spline',
    name: 'torque',
    id: 'power',
    zindex: 2,
    data: torque
  }, {
    color: '#335572',
    type: 'spline',
    name: 'speed',
    id: 'speed',
    data: speed,
    yaxis: 1
  }, {
    color: '#ee4650',
    type: 'spline',
    name: 'power',
    id: 'power',
    data: power,
    yaxis: 2
  }]
});
.header {
  padding: 20px 20px 10px 0px;
  width: 100%;
  display: flex;
  font-size: 16px;
  color: #5e5e5e;
  font-family: 'montserrat medium', 'montserrat regular', 'montserrat'
}

span {
  width: 50%;
  font-family: 'montserrat medium', 'montserrat regular', 'montserrat'
}

span:last-child {
  text-align: right;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/stock/indicators/volume-by-price.js"></script>

<div class='header'>
  <span>
  date: 15/11/2018
  </span>
  <span>
  thrust: 3079.21 n
  </span>
</div>
<div id="container" style="height: 500px; min-width: 310px"></div>

demo:

api reference:



addition

if you want to make it work with navigator enabled set the same extremes also on navigator xaxis and after that redraw the chart (chart.redraw()). notice, that it will work correctly if you have navigator.adapttoupdateddata = false.

code:

  chart: {
    events: {
      load: function() {
        var chart = this,
            offset = 15000,
          multiplier,
          datalength,
          x,
          y,
          min,
          max;

        setinterval(function() {
          chart.series.foreach(function(series) {
            multiplier = series.datamax;
            datalength = chart.series[0].xdata.length;
            x = chart.series[0].xdata[datalength - 1] + 1000;
            y = math.round(math.random() * multiplier);

            series.addpoint([x, y], false, true);
          });

          min = chart.xaxis[0].usermin || null;
          min = min < chart.xaxis[0].datamin ? null : min;

          max = x + offset;

          chart.xaxis[0].setextremes(min, max, false);
          chart.navigator.xaxis.setextremes(min, max, false);
          chart.redraw();
        }, 1000);

      }
    }
  }

demo:

api reference:


Related Query

More Query from same tag