Javascript+Highcharts: Substituting series.data for my own

Question

I've been doing this script for a volunteering university-site job.

Please ignore all parameters apart from wattages and schools . Those are SQL result sets that have been converted to arrays using json_encode() . Result sets have Strings as values, I believe, so both wattages and schools should be arrays of strings.

What I want to do is input my own data for the pie graph, in this case mySeries , which I build/fill up at the start and put as data later.

function createPieChartGradient(data,title,xlabel,ylabel,type,step,div_id,wattages,schools){

    var float_watt = new Array();
    for(var index = 0; index < wattages.length; index++)
    {
        float_watt[index] = parseFloat(wattages[index]).toFixed(2);
    }

    var mySeries = [];  //Hopefully this creates a [String, number] array that can be used as Data.
    for (var i = 0; i < float_watt.length; i++) {
        mySeries.push([schools[i], float_watt[i]]);
    }

    var options = {
        chart: {
            renderTo: 'graph',
            zoomType: 'x',
            defaultSeriesType: type
        },
        title: {
                text: 'Consumption Percentage of IHU Schools, Last 7 days'
            },
        tooltip: {
            //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        xAxis: {
            categories: [],
            tickPixelInterval: 150,
           // maxZoom: 20 * 1000,
            title: {
            style: {
                fontSize: '14px'
            },
                text: xlabel
            },
            labels: {
                rotation: -45,
                step: step,
                align: 'right'//,
            //  step: temp
            }
        },
        yAxis: {
            title: {
            style: {
                fontSize: '14px'
            },
                text: ylabel
            },
            labels: {
                align: 'right',
                formatter: function() {
                    return parseFloat(this.value).toFixed(2);
                }
            },
            min: 0
        },
        legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'center',
             floating: true,
             shadow: true
          },

        series: [{
                    type: 'pie',
                    name: 'Consumption Percentage',
                    data: mySeries       //Problematic line.
                }]                                                                                      //Faculty with the smallest wattage -> Green.
    };  //end of var options{}                                                                          //Next: -> Yellow.
                                                                                                        //Last -> Red.
    //Draw the chart.
    var chart = new Highcharts.Chart(options);                                                          //TODO: Change colours.
    document.write("FINISHED");
}

The thing is, the above won't work. Since I'm not using an environment (writing in notepad++ and testing on my apache web server, via the results) I have manually aliminated the problematic line to be data: mySeries .

Any idea why that is? Aren't they the same type of array, [String, number] ?

Additionally, are there any environments that will help me debug javascript programs? I'm really at my wit's end with this situation and I'd very much prefer to have an IDE tell me what's wrong, or at least point me at the right direction.

Answer 1

You see where you are calling "toFixed"? Let's run a small experiment:

var wattages = [2.0, 3.0];

 var float_watt = new Array();
 for(var index = 0; index < wattages.length; index++)
 {
    float_watt[index] = parseFloat(wattages[index]).toFixed(2);
 }

 console.log(JSON.stringify(float_watt));

The output is not what you expect:

["2.00", "3.00"]

See how it got converted to a string? If you delete the "toFixed" and let your formatter do its job, things will go just fine.

EDIT

Here's how you fix your formatter:

    plotOptions: {
        pie: {
            dataLabels: {
                formatter: function() {
                    return parseFloat(this.y).toFixed(2);
                }
            }
        }
    },

The yLabels formatter is doing nothing for the pie.