I would like to be able to set the Column color within the series individually, preferably with a brushMemberPath option type of thing where I can specify in the data set what color the column should display as.
How can I do this?
I am using igniteUI 2014.1
Hello rsimm,
Thank you for posting in our community.
What I can suggest for achieving your requirement is looping trough the colors from your data source and push them in an array. Afterwards this array could be set to the brushes option of the igDataChart. This property defines the palette from which automatically assigned series brushes are selected. The value provided should be an array of css color strings.
I made a small sample illustrating my suggestion and I am attaching it for your reference.
In my sample project there is a Color property in the underlying data source that defines what is the color going to be. Afterwards, I am looping trough all colors and I push them into an array which later is used as the value for the brushes property. For example:
var data = [ { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394, "Color": "pink" }, { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396, "Color": "red" }, { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351, "Color": "yellow" }, { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277, "Color": "green" }, { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218, "Color": "purple" } ]; var arrayColors = []; var jsonLength = data.length; for (var i = 0; i < jsonLength; i++) { arrayColors.push(data[i].Color); } $("#chart").igDataChart({ width: "100%", height: "400px", title: "Population per Country", subtitle: "Five largest projected populations for 2015", dataSource: data, brushes: arrayColors, . . . .
var data = [
{ "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394, "Color": "pink" },
{ "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396, "Color": "red" },
{ "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351, "Color": "yellow" },
{ "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277, "Color": "green" },
{ "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218, "Color": "purple" }
];
var arrayColors = [];
var jsonLength = data.length;
for (var i = 0; i < jsonLength; i++) {
arrayColors.push(data[i].Color);
}
$("#chart").igDataChart({
width: "100%",
height: "400px",
title: "Population per Country",
subtitle: "Five largest projected populations for 2015",
dataSource: data,
brushes: arrayColors,
.
I hope you find this information helpful.
Please let me know if you need any further assistance with this matter.
That sets the brush colors to be used for the the entire series. The same thing that series.brush does. In other words it makes every column from that series get drawn in that color.
What I want is to be able to specify the color for each individual column within the series.
Hi, please see this and let me know if it helps: http://jsfiddle.net/gmurray/y78h9t1m/
-Graham
That worked great for me thanks.
One suggestion...in the assigningCategoryStyle callback function ui.fill contains the currently designated color for the column. A series has a 'fillMemberPath' option within it, but if you set it then it throws the error "undefined is not a valid function' when trying to draw the chart. Im sure this option is carry over from a different type of chart, but it would be great if we could set that and have it load up the brush from that value instead of having to use the callback.
Thanks.
Thank you for your feedback.
We appreciate that you took time to convey your comments and I assure you that we consider our customer feedback to be crucial for steering improvements at Infragistics.
Please let me know if I could provide you nay further assistance with this matter.