TheSnooker
TheSnooker

Reputation: 935

Highchart plugin not accepting array for series data?

I've been playing with the highchart plugin and it's been really nice. That is until I tried to make a pie chart.

For some reason the pie chart requires that the data for a given series is formatted as

 data:[ 
       ["NAME", VALUE],
       ["NAME", VALUE],
       ["NAME", VALUE]
      ]

Where name is a string and value is a integer or float. So I created an array in jquery with just that. However when I run the script nothing shows up on the page. When I hard code data into the plugin it works. However when I try to use the array I made it doesn't. I've checked the console in firebug and I can see the array is there and it's properly formatted. I do not know why the Highcharts plugin is not seeing it.

Here is my code perhaps I'm missing something?

var dataarray = [];
var referaltype = dataset.referals[month];
$.each(referaltype.code, function(key, value) {
    var wantvalue = parseInt(referaltype.number[key]);
    var wantkey = value;
    dataarray[wantkey] = wantvalue;
    delete dataarray[key];
});
console.log(dataarray);
makepiechart(dataarray, month, year);

This is where I build the array to use in the plug in. The data comes out looking pretty much how I expected. "Name" : Value

Here is the plug in

function makepiechart(dataarray,month,year){
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'piechartcontainer',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Type of referals '+month
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            //name: ,
            data: [dataarray]
        }]
    });
}

However nothing happens when the plugin is called. I'm not exactly sure why either. Does anyone out there have any idea what I'm doing wrong?

Upvotes: 1

Views: 914

Answers (1)

TheSnooker
TheSnooker

Reputation: 935

I found out what I was doing wrong. The series option requires a string not an array :-P

    var datastring = "";
    var referaltype = dataset.referals[month];
    $.each(referaltype.code, function(key, value) {
        var wantvalue = parseInt(referaltype.number[key]);
        var wantkey = value;
        datastring += "['"+wantkey+"',"+wantvalue+"]";
    });
    console.log(dataarray);
    makepiechart(dataarray, month, year);

Upvotes: 1

Related Questions