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?

Perhaps if you explain a bit more what you are trying to achieve with this, people will be able to suggest a better/cleaner way to do it. Why would you want to add data to the array right after declaring it? — ubik
– ubik, Commented May 17, 2012 at 8:30
what i want to do is to add the data into the array after a ajax query returns a set of data for pie chart. form what i understand of the highchart library for pie chart the series data should be some thing like this data: [ ['Service Ok', 45.0], ['Service Warning', 26.8], ] — nashr rafeeg
– nashr rafeeg, Commented May 17, 2012 at 8:37

McGarnagle · Accepted Answer · 2012-05-17 08:31:35Z

5

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.

answered May 17, 2012 at 8:31

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ricardo Lohmann · Accepted Answer · 2012-05-17 17:32:52Z

You have an error on your code:
You said you want to dynamically load the values, rigth ?
But you code just sets the initial serie data and then render it.
So in your case if you want to 'dinamically' change your serie data you have to destroy the current chart, update it's data and then render it again. Propably you loss performance.

The correct way to do it is using highstock api and don't update it manually. If you do it probably you'll get some errors when you use chart zoom, because to update the chart points this api have to calculate the points again, and it's made when you use the functions above.
As you can see on the serie reference to update your chart data you have to use the following functions:
Set new data: chart.series[0].setData(newData, redraw); example
Add a new point: chart.series[0].addPoint(arrayOfPoints, redraw); example

Look this fiddle, here I update the chart serie manually, without use api functions, and what happens ? Nothing.

For the best performance you can use the following code:

    function createChart() {
        chart = new Highcharts.Chart(options);
    }

    // when you want to update it's data
    $(element).yourEvent(function() {
        var newData = ['Service Ok', 50.0];
        if(chart.hasRendered) {
            chart.series[0].setData(newData, true);
        } else {
            // only use it if your chart isn't rendered
            options.series[0].data.push(newData);
            createChart();
        }
    });

$(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: ['Service Ok ',   45.0]
        }]
    }

    var chart;
    $(document).ready(function() {
        createChart();
    });
});

Eugene Trofimenko · Accepted Answer · 2012-05-17 08:48:00Z

1

I think it might helps you JavaScript push() Method specification

and Highcharts control specification

Series is an array of objects so you should do like this:

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

In this case you will get

series: [{

    type: 'pie',

    name: 'service status',

    data: [
             ["Service Ok", 45.0 ]
          ]

    }]

DEMO with pie chart

edited May 17, 2012 at 8:48

answered May 17, 2012 at 8:31

Eugene Trofimenko

1,6411 gold badge13 silver badges19 bronze badges

Comments

Paras · Accepted Answer · 2012-05-17 08:37:32Z

0

Try this

$(function() {
var options = {   
    series: [{
        type: 'pie',
        name: 'service status',
        data: []
        }]
};    
    var objData={ "type":'bar','name':'second','data':[]};
    options.series.push(objData);
});

answered May 17, 2012 at 8:37

Paras

3,1078 gold badges37 silver badges46 bronze badges

Comments

Kanishka Panamaldeniya · Accepted Answer · 2012-05-17 08:39:08Z

0

try

options.series[0]data[0]= 'Service Ok';
options.series[0]data[1]= 45.0;

answered May 17, 2012 at 8:39

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

Collectives™ on Stack Overflow

how to add items to an array dynamically in javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related