Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1905
igPieChart - Fixed slice colors
posted

Within my Pie chart, I have specific elements that I want to show as the same color always.  I have tried using the brushes option ot set my colors in the same order as my dataset, but of course sometimes some pieces of the data might be ), and therefore not draw, which then throws the brushes off.

How can I make sure that Element A always has color "#FEFEFE" and Element F always has color "#123456"?

Parents
No Data
Reply
  • 16310
    Verified Answer
    Offline posted

    Hello rsimm,

    Thank you for posting in the Infragistics forums !

    You can keep your array with the brushes colors in the same order as the dataset

    var brushes = ["#ffacac", "#ffff00", "#afadac", "#eeaf00", "#aaff00"];

    and simply check if any piece of the data will not be drawn in the chart.

    For the given piece of data we can remove the corresponding color from the array and then set the Brushes property of the igPieChart the modified brushes array. This can be done after initializing the igPieChart as follows:

    memberPath = $("#chart").igPieChart("option", "valueMemberPath");
    datasource = $("#chart").igPieChart("option", "dataSource");

    $.each(datasource, function (index, obj) {                // goes through every object in the data source array
        $.each(obj, function (propName, propVal) {         // goes through every property of the object
            if (propName == memberPath) {                    // will return true for the property that is set as valueMemberPath of the igPieChart
                if (propVal == null || propVal == "") {        // returns true if this property value is empty
                    brushes.splice(index, 1);                       // remove the brush for the given object (slice), because it will not be drawn
                    $("#chart").igPieChart("option", "brushes", brushes);           // sets the brushes property
                }
            }
        });
    });

    Please refer to my sample for a demonstration how this works. I hope it suits your scenario. Please let me know if you have any further questions on the matter, I will be glad to help.

    igPieChart.zip
Children