CODEWITHSUNDEEP
javascriptjsonhighchartsformat
BarryDale2014
BarryDale2014

Reputation: 59

Highcharts Pie chart not accepting values

I'm using JavaScript to format the y values of a piechart to two decimal places but they are not appearing on the chart.

I need to take the percentage of each and then return them. fiddle

If the fiddle doesn't work this is my code. 

$(function () {
      var dataPie =[];
    var abc =[{"val":"19981","name":"TOTAL"},{"val":"2051","name":"\"NATURAL GAS\""},{"val":"274","name":"\"OTHER FOSSIL FUELS\""},{"val":"8826","name":"\"DUAL FUEL\""},{"val":"5351","name":"\"NUCLEAR\""},{"val":"2628","name":"\"HYDRO\""},{"val":"501","name":"\"WIND\""},{"val":"350","name":"\"OTHER RENEWABLES\""},{"val":" ","name":"\"UNKNOWN\" "}];
 $.each(abc,function(i,el)
{
     var total = null;
     if(el.name == "TOTAL"){
            total = parseInt(el.val);
        }else{
            var p = parseInt(el.val) / total * 100;
            dataPie.push({name :el.name,y: p});
        }

});
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares January, 2015 to May, 2015'
        },
        tooltip: { 
            pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.2f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: "Brands",
            colorByPoint: true,
            data: dataPie
        }]
    });
});

Upvotes: 0

Views: 227

Answers (1)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

highcharts is capable to do that ,you need to simply use 

 {point.percentage:.2f}

See the fiddle, which has your last question's data updated here

Upvotes: 1

Related Questions