Create area range chart - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

Create area range chart

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">
$(function () {//from ww  w  . j av a 2  s .  co  m
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
       $('#container').highcharts({
          chart: {
              type: 'arearange'
          },
          title: {
              text: 'Temperature variation by day'
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: {
                  text: null
              }
          },
          tooltip: {
              crosshairs: true,
              shared: true,
              valueSuffix: '?C'
          },
          legend: {
              enabled: false
          },
          series: [{
              name: 'Temperatures',
              data: data,
              color: '#FF0000',
              negativeColor: '#0088FF'
          }]
      });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts.js"></script> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts-more.js"></script> 
      <div id="container" style="height: 400px; width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials