add trend line to line charts - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

add trend line to line charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript" src="http://rawgit.com/virtualstaticvoid/highcharts_trendline/master/regression.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from   w  ww .  j  av  a2  s .  c  om
   max-width: 600px;
   height: 600px;
   margin: 1em auto;
}


      </style> 
      <script type="text/javascript">
    $(function(){
$(function () {
     var sourceData = [
          [0, 99.75], [1, 99.77],
          [2, 99.78], [3, 99.84],
          [4, 99.82], [5, 99.82],
          [6, 99.76], [7, 99.78],
          [8, 99.8], [9, 99.65],
          [10, 99.94], [11, 99.8]
      ];
        $('#container').highcharts({
            title: {
                text: 'RNA',
                x: -20 //center
            },
            subtitle: {
                text: 'Outage Reasons',
                x: -20
            },
            xAxis: {
                categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
                    '24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
            },
            yAxis: {
                title: {
                    text: 'Outage'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ''
            },
            legend: {
                layout: 'vertical',
                //align: 'right',
                //verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
                data: sourceData
            },{
                type: 'line',
                marker: { enabled: false },
                data: (function() {
                  return fitData(sourceData).data;
                })()
            }],
            credits: {
                enabled: false
            }
      });
});
    });

      </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"></div>  
   </body>
</html>

Related Tutorials