connect to end points in two linked series in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

Description

connect to end points in two linked series 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> 
      <script type="text/javascript">
$(function () {/*w  ww . ja  va 2  s  .co  m*/
        s1 = [
            [1246752000000, 21.4],
            [1246838400000, 21.3],
            [1246924800000, 18.3],
        ];
        s2 = [
            [1247024800000,20.5],
            [1247824800000,17.9],
        ];
        s3 = [
            [1246924800000, 18.3],
            [1247024800000,20.5]
        ];
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        series:
        [{
            name: 's1',
            data: s1,
            dashStyle : 'solid',
            color: "#3399FF"
        }, {
            name: 's1',
            data: s2,
            linkedTo: ':previous',
            dashStyle : 'shortdot'
        }, {
            data: s3,
            enableMouseTracking: false,
            showInLegend: false,
            marker: {
                enabled: false
            },
            color: "#3399FF"
        }]
    });
});

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

Related Tutorials