create Area range chart from CSV file? - Javascript highcharts

Javascript examples for highcharts:Area Chart

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

Description

create Area range chart from CSV file?

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.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from ww w.j a va 2 s .  c  o  m*/
function data() {
  return "date,average,maximum,minimum\n2017-01-01,0.04,0.02963,0.05595\n2017-01-02,0.04,0.02929,0.05566\n2017-01-03,0.04,0.02921,0.05579\n2017-01-04,0.04,0.02920,0.05682\n2017-01-05,0.04,0.02942,0.06489\n2017-01-06,0.05,0.02971,0.07201\n2017-01-07,0.04,0.02861,0.05390\n2017-01-08,0.04,0.02820,0.05243\n2017-01-09,0.04,0.02896,0.05203\n2017-01-10,0.07,0.04215,0.24689\n2017-01-11,0.04,0.02853,0.05130\n2017-01-12,0.04,0.02777,0.05065\n2017-01-13,0.04,0.02769,0.05022\n2017-01-14,0.04,0.02723,0.04985"
}
function test() {
  var c=[];
  var ranges = [];
  var averages = [];
  var current = [];
  var reference = [];
  data = data();
  var lines = data.split('\n');
  for(i=1;i<lines.length; i++) {
    var items = lines[i].split(',');
    c.push(items[0]);
    ranges.push([items[0],Number(items[2]),Number(items[3])]);
    averages.push([items[0],Number(items[1])]);
  }
  Highcharts.chart('container', {
      title: {
          text: 'July Data'
      },
      xAxis: {
          categories: c
       },
      yAxis: {
          title: {
              text: 'Value'
          }
      },
      tooltip: {
          crosshairs: true,
          shared: true,
          valueSuffix: 'mm/day'
      },
      series: [{
          name: 'Average',
          data: averages,
          zIndex: 1,
          marker: {
              fillColor: 'white',
              lineWidth: 2,
              lineColor: Highcharts.getOptions().colors[0]
          }
      },
      {
          name: 'Climatology',
          data: ranges,
          type: 'arearange',
          lineWidth: 0,
          linkedTo: ':previous',
          color: Highcharts.getOptions().colors[0],
          fillOpacity: 0.3,
          zIndex: 0,
          marker: {
              enabled: false
          }
      }]
  });
}
test();
    }

      </script> 
   </head> 
   <body> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials