Megatron Megatron - 3 months ago 67
jQuery Question

Highcharts - Pie Chart change slice colors dynamically

The chart calls in JSON file that hold a string(color) and integer(count). I want to change the color of the each slice in a pie chart according to what the JSON file holds. So if the JSON file is

[["Green",1],["Red",44],["Yellow",30]]
I would like the the "Green" slice to have the color of green...etc. I've tried:

plotOptions: {
pie: {
//colors: ['#739600', '#bb0826', '#fcc60A'],
formatter: function () {
if ('Green' === this.value) {
return '<span style="fill: #739600;">' + this.value + '</span>';
}
else if ('Red' === this.value) {
return '<span style="fill: #bb0826;">' + this.value + '</span>';
}
else if ('Yellow' === this.value) {
return '<span style="fill: #fcc60A;">' + this.value + '</span>';
}
}, ...


It's not working how I expected. http://jsfiddle.net/LazerickL/bvaxmcLr/4/

Any help would be appreciated.

UPDATE

I had to restructure my JavaScript to call $.getJSON function. So, how would I proceed to implement the color slices for my latest code below? Thanks for any help!

$(document).ready(function() {
var options = {
chart: {
renderTo: 'containter',
defaultSeriesType: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: null
},

credits: {
enabled: false
},
tooltip: {
pointFormat:
'{series.name}: <b>{point.y}</b>'
},

plotOptions: {
pie: {
//colors: ['#739600', '#bb0826', '#fcc60A'],
allowPointSelect: true,
cursor: 'pointer',
depth: 30,
showInLegend: true,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.point.y;
}
}
}
},
series: [{
type: 'pie',
name: 'Amount',
data: []
}]
}

$.getJSON("js/test.json", function (json) {
options.series[0].data = json;
var chart = new Highcharts.Chart(options);
});


});

Answer

To set your colors on your pies you'll need to update how you're pushing things into the data array to include the color of your pie. I accomplish this by adding a field to your data array but you could use an if statement like you had in the function if you prefer. Here is an updated fiddle: http://jsfiddle.net/bvaxmcLr/8/

Also, your placement of the formatter function is invalid. That formatter javascript only applies to data labels as far as I know.

The important change from your script is removing the formatter function and updating to this to push the color value onto each data point:

  var data={'d':[
        {'Status_Color':'Green', 'Corrective_Action_ID':3},
        {'Status_Color':'Red', 'Corrective_Action_ID':5},
        {'Status_Color':'Yellow', 'Corrective_Action_ID':10},
    ]};
     $.each(data.d, function (key, value) {
        var colorVal = '';
        if(value.Status_Color=='Green'){
            colorVal = '#739600';
        }
        if(value.Status_Color=='Red'){
            colorVal = '#bb0826';
        }
        if(value.Status_Color=='Yellow'){
            colorVal = '#fcc60A';
        }

        var temp = {name:value.Status_Color, color:colorVal, y:value.Corrective_Action_ID};
        options.series[0].data.push(temp);

    })

Here is the whole script:

$(function () {

$(document).ready(function () {

    var options = {

    chart: {
        renderTo: 'container',
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
    },
    plotOptions: {
        pie: {

            depth: 45,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        type: 'pie',
        name: 'Amount',
        data: []
    }]

    }
    var data={'d':[
        {'Status_Color':'Green', 'Corrective_Action_ID':3},
        {'Status_Color':'Red', 'Corrective_Action_ID':5},
        {'Status_Color':'Yellow', 'Corrective_Action_ID':10},
    ]};
     $.each(data.d, function (key, value) {
        var colorVal = '';
        if(value.Status_Color=='Green'){
            colorVal = '#739600';
        }
        if(value.Status_Color=='Red'){
            colorVal = '#bb0826';
        }
        if(value.Status_Color=='Yellow'){
            colorVal = '#fcc60A';
        }

        var temp = {name:value.Status_Color, color:colorVal, y:value.Corrective_Action_ID};
        options.series[0].data.push(temp);

    })

    chart = new Highcharts.Chart(options);

});

});

Comments