HighCharts column chart populated with series data from a function

Question

I'm trying to populate a HighCharts dataset with results from SQL Server in Classic ASP. (In the examples obviously there are numbers and names instead of vbscript variables)

The first example is without a function - and works. http://jsfiddle.net/zbpamrhs/

$(function () {

  var OnOff = 3

  var DivName = []
  var DivN = []
  var DivTotal = []
  var DivColor = []

  DivName[0] = 'Div'
  DivName[1] = 'Unit A'
  DivName[2] = 'Unit B'
  DivName[3] = 'Unit C'

  DivN[0] = 22
  DivN[1] = 10
  DivN[2] = 7
  DivN[3] = 3

  DivTotal[0] = 5.6
  DivTotal[1] = 5.8
  DivTotal[2] = 5.4
  DivTotal[3] = 5.7

  DivColor[0] = '#333333'
  DivColor[1] = '#c9e7ff'
  DivColor[2] = '#4898a4'
  DivColor[3] = '#ffd949'



  $('#DivCompTotalC').highcharts({
      chart: {
          type: 'column'
      },
      title: {
          text: ''
      },
      credits: {
          enabled: false
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          itemWidth: 180,
          useHTML: true,
          x: 0,
          y: 40,
          borderWidth: 0
      },
      xAxis: {
          categories: ['']

      },
      yAxis: {
          max: 7.01,
          labels: {
              enabled: false
          },
          gridLineColor: 'transparent',

          plotLines: [{

              value: DivTotal[0],
              color: DivColor[0],
              width: 2,

              label: {
                  text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0],
                  align: 'right',
                  y: -5,
                  x: 0,
                  style: {
                      fontSize: '13px'
                  }
              },
              zIndex: 2
          }],
          title: {
              text: ''
          }

      },

      plotOptions: {
          column: {
              pointPadding: 0.2,
              groupPadding: 0.10,
              borderWidth: 0
          },
          series: {
              dataLabels: {

                  enabled: true,
                  y: 5,
                  style: {
                      fontSize: '14px'
                  }
              },
              enableMouseTracking: false,
              events: {
                  legendItemClick: function () {
                      return false;
                  }
              }
          }
      },



         series: [{
            name: DivName[1] + ' [' + DivN[1] + ']',
            color: '#c9e7ff',
            data: [DivTotal[1]]
        }, {
            name: DivName[2] + ' [' + DivN[2] + ']',
            color: '#ffd949',
            data: [DivTotal[2]]
        }, {
            name: DivName[3] + ' [' + DivN[3] + ']',
            color: '#4898a4',
            data: [DivTotal[3]]
        }]


  });

});

I cannot find what's wrong in the second http://jsfiddle.net/bfb6crpv/

$(function () {

  var OnOff = 3

  var DivName = []
  var DivN = []
  var DivTotal = []
  var DivColor = []

  DivName[0] = 'Div'
  DivName[1] = 'Unit A'
  DivName[2] = 'Unit B'
  DivName[3] = 'Unit C'

  DivN[0] = 22
  DivN[1] = 10
  DivN[2] = 7
  DivN[3] = 3

  DivTotal[0] = 5.66666666666667
  DivTotal[1] = 5.81208053691275
  DivTotal[2] = 5.41304347826087
  DivTotal[3] = 5.74683544303798

  DivColor[0] = '#333333'
  DivColor[1] = '#c9e7ff'
  DivColor[2] = '#4898a4'
  DivColor[3] = '#ffd949'



  $('#DivCompTotalC').highcharts({
      chart: {
          type: 'column'
      },
      title: {
          text: ''
      },
      credits: {
          enabled: false
      },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'top',
          itemWidth: 180,
          useHTML: true,
          x: 0,
          y: 40,
          borderWidth: 0
      },
      xAxis: {
          categories: ['']

      },
      yAxis: {
          max: 7.01,
          labels: {
              enabled: false
          },
          gridLineColor: 'transparent',

          plotLines: [{

              value: DivTotal[0],
              color: DivColor[0],
              width: 2,

              label: {
                  text: DivName[0] + '=' + DivTotal[0] + '<br>N=' + DivN[0],
                  align: 'right',
                  y: -5,
                  x: 0,
                  style: {
                      fontSize: '13px'
                  }
              },
              zIndex: 2
          }],
          title: {
              text: ''
          }

      },

      plotOptions: {
          column: {
              pointPadding: 0.2,
              groupPadding: 0.10,
              borderWidth: 0
          },
          series: {
              dataLabels: {

                  enabled: true,
                  y: 5,
                  style: {
                      fontSize: '14px'
                  }
              },
              enableMouseTracking: false,
              events: {
                  legendItemClick: function () {
                      return false;
                  }
              }
          }
      },



      series: []

  });

  var newSeries = [];
  for (var i = 1; i <= OnOff; i++) {
      var newData = [];

      var seria = {};
      seria['name'] = DivName[i] + ' [' + DivN[i] + ']';
      seria['data'] = DivTotal[i];
      seria['color'] = DivColor[i];
      newSeries.push(seria);
  }
  //alert(JSON.stringify(newSeries));
  var chart = $('#DivCompTotalC').highcharts();
  //alert(JSON.stringify(chart));
  $.each(newSeries, function (i, ns) {
      chart.addSeries(ns);
  });

});

Answer 1

There are multiple issues :

1. You are trying to addSeries instead of points as compared to the first working fiddle. chart.addSeries(ns);

2. seria['data'] = DivTotal[i]; data is supposed to be an array as per the working fiddle.

Working fiddle with existing series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/10/

Working fiddle with no series - http://jsfiddle.net/nitincool4urchat/bfb6crpv/13/

Docs - http://api.highcharts.com/highcharts#Series.addPoint

Related question : trying to dynamically update Highchart column chart but series undefined