Extend line until new value occurs in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Extend line until new value occurs in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

body {//from  w  ww  .  java2  s  . c om
   font-family: Arial, Verdana, sans-serif;
}


      </style> 
      <script type="text/javascript">
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        title: {
            text: 'Step line ends prematurely'
        },
        series: [{
            data: [[0, 1], [1, 2], [3, 4]],
            name: 'Longer'
        }, {
            data: [[0, 2], [1, 3]],
            name: 'Shorter'
        }]
    });
    // append point
    var chart = $('#container').highcharts();
    var max_length1 = chart.series[0].data.length-1; //longer
    var max_x1 = chart.series[0].data[max_length1].x;
    var max_length2 = chart.series[1].data.length-1; //shorter
    var max_x2 = chart.series[1].data[max_length2].x;
    var max_y2 = chart.series[1].data[max_length2].y;
    var delta_x = (max_x2-chart.series[1].data[max_length2-1].x);
    var delta_y = (max_y2-chart.series[1].data[max_length2-1].y);
    var new_y = max_y2+(delta_y/delta_x)*(max_x1-max_x2);
    chart.series[1].addPoint([max_x1,new_y]);
});

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/master/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials