title: How to create area range chart
body: <p>I want to create <code>area range chart</code> as given in the following <a href="http://jsfiddle.net/D4w7G/3" rel="nofollow">link</a></p>
  
  <p>I want to add data to ranges using loop on my data. What should be the type of the <code>ranges</code> to create chart?</p>
  
  <p>Please suggest. Thanks in advance. Here's the JSFiddle code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function () {
  var ranges = [[1246406400000,33,22],[1246492800000,24,12],[1246579200000,15,1],[1246665600000,28,17],[1246752000000,22,12],[1246838400000,34,22],[1246924800000,30,19],[1247011200000,27,15],[1247097600000,35,24],[1247184000000,29,14],[1247270400000,32,20],[1247356800000,32,21],[1247443200000,34,23],[1247529600000,19,9],[1247616000000,31,21],[1247702400000,22,7],[1247788800000,25,11],[1247875200000,19,6],[1247961600000,33,18],[1248048000000,33,18],[1248134400000,21,7],[1248220800000,31,19],[1248307200000,25,15],[1248393600000,29,19],[1248480000000,34,23],[1248566400000,21,9],[1248652800000,27,12],[1248739200000,19,4],[1248825600000,32,19],[1248912000000,32,20],[1248998400000,16,1]], ranges2 = [[1246406400000,22,-22],[1246492800000,12,-12],[1246579200000,1,-1],[1246665600000,17,-17],[1246752000000,12,-12],[1246838400000,22,-22],[1246924800000,19,-19],[1247011200000,15,-15],[1247097600000,24,-24],[1247184000000,14,-14],[1247270400000,20,-20],[1247356800000,21,-21],[1247443200000,23,-23],[1247529600000,9,-9],[1247616000000,21,-21],[1247702400000,7,-7],[1247788800000,11,-11],[1247875200000,6,-6],[1247961600000,18,-18],[1248048000000,18,-18],[1248134400000,7,-7],[1248220800000,19,-19],[1248307200000,15,-15],[1248393600000,19,-19],[1248480000000,23,-23],[1248566400000,9,-9],[1248652800000,12,-12],[1248739200000,4,-4],[1248825600000,19,-19],[1248912000000,20,-20],[1248998400000,1,-1]], ranges3 = [[1246406400000,-22,-45],[1246492800000,-12,-30],[1246579200000,-1,-17],[1246665600000,-17,-43],[1246752000000,-12,-40],[1246838400000,-22,-45],[1246924800000,-19,-43],[1247011200000,-15,-45],[1247097600000,-24,-50],[1247184000000,-14,-37],[1247270400000,-20,-44],[1247356800000,-21,-42],[1247443200000,-23,-42],[1247529600000,-9,-37],[1247616000000,-21,-40],[1247702400000,-7,-24],[1247788800000,-11,-27],[1247875200000,-6,-27],[1247961600000,-18,-34],[1248048000000,-18,-46],[1248134400000,-7,-36],[1248220800000,-19,-48],[1248307200000,-15,-30],[1248393600000,-19,-49],[1248480000000,-23,-50],[1248566400000,-9,-38],[1248652800000,-12,-27],[1248739200000,-4,-26],[1248825600000,-19,-45],[1248912000000,-20,-40],[1248998400000,-1,-17]];
  
  
          $('#container').highcharts({
  
              title: {
                  text: 'Sentiment Flood Map'
              },
  
              xAxis: {
                  type: 'datetime'
              },
  
              yAxis: {
                  title: {
                      text: null
                  }
              },
  
              tooltip: {
                  crosshairs: true,
                  shared: true,
                  valueSuffix: ''
              },
  
              legend: {
              },
  
              series: [ {
                  name: 'Positive',
                  data: ranges,
                  type: 'arearange',
                  lineWidth: 0,
                  linkedTo: ':previous',
                  color: Highcharts.getOptions().colors[2],
                  fillOpacity: 0.8,
                  zIndex: 0
              }
                       , {
                  name: 'Neutral',
                  data: ranges2,
                  type: 'arearange',
                  lineWidth: 0,
                  linkedTo: ':previous',
                  color: Highcharts.getOptions().colors[1],
                  fillOpacity: 0.8,
                  zIndex: 0
              }
                       , {
                  name: 'Negative',
                  data: ranges3,
                  type: 'arearange',
                  lineWidth: 0,
                  linkedTo: ':previous',
                  color: Highcharts.getOptions().colors[3],
                  fillOpacity: 0.8,
                  zIndex: 0
              }
                      ]
  
          });
  
  });
  </code></pre>