title: How can I create Highcharts Arearange graph from CSV file?
body: <p>My CSV contents look like:</p>
  
  <pre><code>date,average,maximum,minimum
  2017-01-01,0.02963,0.05595
  2017-01-02,0.02929,0.05566
  2017-01-03,0.02921,0.05579
  2017-01-04,0.02920,0.05682
  2017-01-05,0.02942,0.06489
  2017-01-06,0.02971,0.07201
  2017-01-07,0.02861,0.05390
  2017-01-08,0.02820,0.05243
  2017-01-09,0.02896,0.05203
  2017-01-10,0.04215,0.24689
  2017-01-11,0.02853,0.05130
  2017-01-12,0.02777,0.05065
  2017-01-13,0.02769,0.05022
  2017-01-14,0.02723,0.04985
  </code></pre>
  
  <p>I want to produce a highcharts Multiple seriesgraph with arearange (using maximum and minimum) and line(average). But I am not be able to write the date as the x axis values.</p>
  
  <p>So far, I tried with the following example: <a href="https://www.highcharts.com/demo/arearange-line" rel="nofollow noreferrer">https://www.highcharts.com/demo/arearange-line</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="test()"&gt;
  &lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  function test() 
  {
          var c=[];
          var ranges = [];
          var averages = [];
          var current = [];
          var reference = [];
          $.get('data.csv', function(data) 
          {
              var lines = data.split('\n');
              for(i=1;i&lt;lines.length; i++) 
              {
                  var items = lines[i].split(',');
                  c.push(items[1]);
                  ranges.push([items[0],items[2],items[3]]);
                  averages.push([items[0],items[1]]);
              }
  
          });
  
  Highcharts.chart('container', {
  
      title: {
          text: 'July Data'
      },
  
      xAxis: {    
          categories: c
       },
  
      yAxis: {
          title: {
              text: 'Value'
          }
      },
  
      tooltip: {
          crosshairs: true,
          shared: true,
          valueSuffix: 'mm/day'
      },
  
      legend: {
      },
  
      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
          }
      }]
  });
  };
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>