Spline lines in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Spline lines in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  w w w. j a v a 2s . co  m
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Sample Plot'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Requsts'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f}'
        },
        series: [{
            "name": "Version 1.0",
                "data": [
                ["10/9/2014, 11:47:03 AM", 170.023]
            ].map(function (e) {
                return [new Date(e[0]).getTime(), e[1]];
            })
        }, {
            "name": "Version 1.1",
            data: [
                ["10/8/2014, 1:00:00 AM", 1967.02],
                ["10/9/2014, 11:00:19 AM", 167.023],
                ["10/9/2014, 9:34:49 PM", 1974.03],
                ["10/9/2014, 9:45:33 PM", 1983.02],
                ["10/9/2014, 10:36:10 PM", 1989.03],
                ["10/10/2014, 3:05:37 AM", 1972.02],
                ["10/10/2014, 5:01:43 AM", 1980.02],
                ["10/10/2014, 8:37:18 AM", 16.0215],
                ["10/10/2014, 2:37:44 PM", 1994.02]
            ].map(function (e) {
                return [new Date(e[0]).getTime(), e[1]];
            })
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials