jquery - how to add items to an array dynamically in javascript

Question

First of all I am a total javascript newbie so please bear with me. I have the following script to draw pie charts using the Highchart framework

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: []
        }]
    }

    var chart;
    options.series.data.push('['
    Service Ok ',   45.0]')
    $(document).ready(function() {
        chart = new Highcharts.Chart(options)
    });

});?

What i am trying to do is to dynamically load the values into series.data array as an array of objects. What am doing wrong here, and is there a better way to load the data into the data array?

Answer 1

The series property is an array, so you would need to write it like this (to add a single data point to the series):

options.series[0].data.push( ["Service Ok", 45.0 ]);

I was looking at this JS Fiddle.