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"?
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.
Thanks. That does work. Sure would be nice if we could just specify a colorMemberPath though.
Hello,
I am glad that my suggestion helps you resolve your issue.
Please refer to http://help.infragistics.com/jQuery/2014.1/ui.igPieChart for all the possible options that you could specify for the igPieChart. (there is no colorMemberPath property)
I hope this helps.
Thanks. I have read through the API docs pretty thoroughly, and I don't see anything that lets me set an item level value in the datasource to set the color. The only way this works is via the javascript that you have posted.
Hello rsim,
You are right that there is no API to set the color specifically for each slice. However I have pointed a reference to the API documentation for you to see what API's are available.
Please do not hesitate to contact me if you have further questions on the issue, I will be glad to help.
Is there a better way to do this with the latest version of the controls?
I tried your sample code but it fails since I am using dataSourceUrl to set my data source.
Alternatively, is there a way to make this work with dataSourceUrl ?
Defining a brushesh array has nothing to do with the DataSourceUrl and should not be affected by it. Could you please send a sample or explain what exactly the issue is ?
Hristo, I found one more issue. If the pie is missing more than one slice, the wrong colors get removed by this function because it removes the array items by index starting with the first which causes the second slice to refer to the wrong index as they have been renumbered by the first remove. I worked around this by processing the array in reverse order (code follows)
Hi Greg,
Thanks for your explanation. I missed to consider that my code is iterating the data using jQuery $.each and the dataSourceUrl in your case actually would return a string. I am glad you have resolved the issue. True that it seems too much effort to just apply color, but as you understand it is like a custom scenario, because the default colors do not suit you.
You can still log a feature request about that at ideas.infragistics.com
Hristo, using DataSourceUrl and your code, I would get a jquery error on one of the $.each lines in your code.
I fixed it by wrapping the pie chart code with
$.getJSON(myurl, function (data) {
And then I removed the datasourceUrl property and instead set datasource to data.
At this point, the error went away but my colors were still mismatched. I had to change my datasource to include entries with 0 for the missing slices then the code started working.
This seems like a lot of code to just set the slice colors.