title: Highcharts: how to loop through array to add series
body: <p>I am using Highcharts and need to loop though an array to display the different series so it displays as you can see here: <a href="http://jsfiddle.net/afnguyen/RUZb2/" rel="nofollow">http://jsfiddle.net/afnguyen/RUZb2/</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>$(function () {
          $('#container').highcharts({
              title: {
                  text: 'Retaielr Clicks',
                  x: -20 //center
              },
              subtitle: {
                  text: 'Date',
                  x: -20
              },
              xAxis: {
                  categories: [32,33,24]
              },
              yAxis: {
                  title: {
                      text: 'Clicks'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  valueSuffix: '°C'
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'middle',
                  borderWidth: 0
              },
              series: [{
                  name: 'Tesco',
                  data: [43, 27, 47]
              }, {
                  name: 'Asda',
                  data: [48, 30, 45]
              }, {
                  name: 'Boots',
                  data: [62, 43, 59]
              }, {
                  name: 'Superdrug',
                  data: [63, 49, 64]
              }, {
                  name: 'Ocado',
                  data: [43, 34, 48]
              }, {
                  name: 'Waitrose',
                  data: [39, 24, 47]
              }]
          });
      });
  </code></pre>
  
  <p>The data comes from 3 arrays:</p>
  
  <pre><code>weekNoArray[32,32,32,32,32,32,33,33,33,33,33,33,34,34,34,34,34,34] //this is used in the xAxis categories
  
  retailerNameArray[Tesco,Asda,Boots,Superdrug,Ocado,Waitrose,Tesco,Asda,Boots,Superdrug,Ocado,Waitrose,Tesco,Asda,Boots,Superdrug,Ocado,Waitrose]  //this needs to be each series name (but only one of each)
  
  clicksArray[43,48,62,63,43,39,27,30,43,49,34,24,47,45,59,64,48,47] //i need to loop through each of these putting them in the data
  </code></pre>
  
  <p>Can anyone help in the best way to do this?</p>
  
  <p>So what i m struggling with is how to loop in the series i.e. the following won t work:</p>
  
  <pre><code>for (var i = 0; i &lt; data.length; i++)
                  {
                      var leadrow = data[i];
                      series: [{
                          name: retailerNameArray[i],
                          data: clicksArray[i]
                      }]
                  }
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>Below is the actual code that i am using</p>
  
  <pre><code> $.ajax({
          type: "POST",
          url: theUrl,
          data: { 'manufacturer': manufacturer, 'country': country, 'category': category, 'startDate': startDate, 'endDate': endDate, 'chartType': chartType },
          dataType: "json",
          success: function (data) {
          var retailerNameArray = [];
          var clicksArray = [];
          var weekNoArray = [];
          var rowTotalArray = [];
          var weekArray = [];
          var columnTotalArray = [];
          var cumTotalArray = [];
          var weekCounterArray = [];
          var overallClickCountArray = [];
          var resellerShareArray = [];
  
          var retailerCount = 0;
          for (var i = 0; i &lt; data.length; i++) {
              var cumLeadrow = data[i];
              //Only display on graph if not 0
              if (cumLeadrow.RetailerClickCount &gt; 0) {
                  // assign to array
                  retailerCount = cumLeadrow.RetailerCount;
                  var clicks = cumLeadrow.RetailerClickCount;
                  clicksArray.push(clicks);
                  var weekNum = cumLeadrow.WeekNo;
                  weekNoArray.push(weekNum);
                  var rowTotal = cumLeadrow.RowTotal;
                  rowTotalArray.push(rowTotal);
                  var date = cumLeadrow.WeeklyDate;
                  weekArray.push(date);
                  var columnTotal = cumLeadrow.ColumnTotal;
                  var retailer = cumLeadrow.RetailerDescription;
                  retailerNameArray.push(retailer);
                  var resellerShare = cumLeadrow.ResellerShare;
                  if (i &lt; retailerCount) {
                      columnTotalArray.push(columnTotal);
  
                      resellerShareArray.push(resellerShare);
                  }
  
                  var cumTotal = cumLeadrow.CummulativeTotal;
                  cumTotalArray.push(cumTotal);
                  var weekCounter = cumLeadrow.WeeklyCounter;
                  weekCounterArray.push(weekCounter);
                  var overallClickCount = cumLeadrow.OverallClickCount;
                  overallClickCountArray.push(overallClickCount);
              }
          }
  
          alert(clicksArray);
          alert(weekNoArray);
          alert(retailerNameArray);
  
          var lowerChart = chartType.toLowerCase();
  
          // Create the chart
          $('#chartContainer').highcharts({
              chart: {
                  type: lowerChart
              },
              title: {
                  text: manufacturer + '  Cumulative Leads in  ' + country + "/" + category + '&lt;br/&gt; from ' + startDate + ' to ' + endDate
              },
              xAxis: {
                  categories: weekNoArray,
                  labels: {
                      rotation: -45,
                      align: 'right',
                      style: {
                          fontSize: '13px',
                          fontFamily: 'Verdana, sans-serif'
                      }
                  }
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Retailer Clicks'
                  },
                  stackLabels: {
                      enabled: false,
                      style: {
                          fontWeight: 'bold',
                          color: (Highcharts.theme &amp;&amp; Highcharts.theme.textColor) || 'gray'
                      }
                  }
              },
              legend: {
                  align: 'right',
                  x: -50,
                  verticalAlign: 'top',
                  y: 0,
                  floating: true,
                  backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColorSolid) || 'white',
                  borderColor: '#CCC',
                  borderWidth: 1,
                  shadow: false
              },
              credits: {
                  enabled: false
              },
              tooltip: {
                  formatter: function () {
                      return '&lt;b&gt;' + this.x + '&lt;/b&gt;&lt;br/&gt;' +
                          this.series.name + ': ' + this.y + '&lt;br/&gt;';
                  }
              },
              plotOptions: {
                  bar: {
                      dataLabels: {
                          enabled: true
                      }
                  }
              },
              series: [{
                  name: retailerNameArray,
                  data: clicksArray
              }]
          });
  </code></pre>
  
  <p>The arrays have the values which I have detailed above. But currently they are in one series the fiddler example and the code below it is the outcome that i want so i need to loop through the arrays to add the series but i m not sure how to do this - i hope that makes sense</p>
  
  <p>Many thanks</p>