custom aggregate methods for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

custom aggregate methods for 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  w  w .  j a  v a 2s  .  c om*/
    var input = [['apple',2,4,10,12.5],
                ['pear',1,5,10,12],
                ['orange',3,4,10,13.5],
                ['grape',4,4,10,11.5]],
        data = [],
        categories = [];
    for (i=0;i<input.length;i++) {
        categories.push(input[i][0]);
        data.push({x: i,
                   y: input[i][1],
                   myMin: input[i][2],
                   myMax: input[i][3],
                   myMean: input[i][4]});
    }
    $('#container').highcharts({
         tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>' +
                    'No. of ' + this.x + ': ' + this.y + '<br/>' +
                    'min : ' + this.point.myMin + '<br/>' +
                    'max : ' + this.point.myMax + '<br/>' +
                    'mean : ' + this.point.myMean;
            }
        },
        xAxis: {
            categories: categories
        },
        chart: {
            marginRight: 50
        },
        series: [{
            data: data
        }]
    });
});

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

Related Tutorials