Treemap conditional attribute problems

[ChrisS]

 Hello,

I'm working on getting a treemap chart working and what I want to do is base the size of the elements in the treemap based on series 0, and color based on series 1.  However, it seems that basing the color (via condition) is using some other number (calculation maybe?) done inside the treemap code, or maybe it's ignoring setdataelement() function altogether?  Removing the condition statements puts in the "normal" colors as defined in the css.

Setting setDataElement (in the conditional attributes) to either 0 or 1 yields the same result (everything falls in the "green" color).  As you can see in the data, series 1 has values that fall into the conditional attribute ranges for green, yellow and red.

Here is the code:

chart1 = new cfx.Chart();

// Set green for percentages greater than 2%; percentage is in series 1
var condition1 = new cfx.ConditionalAttributes();
condition1.getCondition().setDataElement(1);
condition1.getCondition().setFrom(.02)
condition1.setColor("#008000");
chart1.getConditionalAttributes().add(condition1);

// Set yellow for percentages between -2% and 2%; percentage is in series 1
var condition2 = new cfx.ConditionalAttributes();
condition2.getCondition().setDataElement(1);
condition2.getCondition().setFrom(0);
condition2.getCondition().setTo(.02);
condition2.getCondition().setToOpen(true);
condition2.setColor("#FFFF00");
chart1.getConditionalAttributes().add(condition2);

// Set red for percentages less than -2%; percentage is in series 1
var condition3 = new cfx.ConditionalAttributes();
condition3.getCondition().setDataElement(1);
condition3.getCondition().setTo(0);
condition3.getCondition().setToOpen(true);
condition3.setColor("#FF0000");
chart1.getConditionalAttributes().add(condition3);

// Data; 4 series
var data = chart1.getData();
data.setItem(0, 0, 175);
data.setItem(1, 0, -0.002);
data.setItem(2, 0, 22);
data.setItem(3, 0, 0.737);
data.setItem(0, 1, 152);
data.setItem(1, 1, -0.010);
data.setItem(2, 1, 19);
data.setItem(3, 1, 0.484);
data.setItem(0, 2, 115);
data.setItem(1, 2, -0.11);
data.setItem(2, 2, 14);
data.setItem(3, 2, -1.325);
data.setItem(0, 3, 684);
data.setItem(1, 3, -0.040);
data.setItem(2, 3, 8);
data.setItem(3, 3, -0.051);

var treeMap = new cfx.treemap.TreeMap();
chart1.setGalleryAttributes(treeMap);

chart1.getSeries().getItem(0).setVisible(true);
chart1.getSeries().getItem(0).bringToFront();
chart1.getSeries().getItem(1).setVisible(false);
chart1.getSeries().getItem(2).setVisible(false);
chart1.getSeries().getItem(3).setVisible(false);

var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);

[FP2006]

Any update on this?  Thanks.

Attachments.zip

[FP2006]

Was struggling with conditional colors and treemaps...any thoughts or can you point us to another source to research further?

 

Thanks. 

[JuanC]

DataElement in the condition does not indicate which series the condition uses, instead it is an enumeration where 0 means Series Y Value, 1 means Series X Value and 2 means Series Initial Value.

In future builds we will add conditions that will allow you to check against any other field in your data (useful when passing json data) even if such field was not used to plot any data.

With the current bits, you can tweak your sample so that instead of having an extra series (note that in the sample you were actually adding 3 extra series) use X values that TreeMap ignores, e.g.

// Set green for percentages greater than 2%; percentage is in series 1

var condition1 = new cfx.ConditionalAttributes();

condition1.getCondition().setDataElement(1);

condition1.getCondition().setFrom(.02)

condition1.setColor("#008000");

chart1.getConditionalAttributes().add(condition1);

// Set yellow for percentages between -2% and 2%; percentage is in series 1

var condition2 = new cfx.ConditionalAttributes();

condition2.getCondition().setDataElement(1);

condition2.getCondition().setFrom(-0.02);

condition2.getCondition().setTo(0.02);

condition2.setColor("#FFFF00");

chart1.getConditionalAttributes().add(condition2);

// Set red for percentages less than -2%; percentage is in series 1

var condition3 = new cfx.ConditionalAttributes();

condition3.getCondition().setDataElement(1);

condition3.getCondition().setTo(-0.02);

condition3.setColor("#FF0000");

chart1.getConditionalAttributes().add(condition3);

// Data; 4 series

var data = chart1.getData();

var xData = chart1.getData().getX(); 

data.setItem(0, 0, 175); 

xData.setItem(0, 0, 0.3); 

data.setItem(0, 1, 152); 

xData.setItem(0, 1, -0.010); 

data.setItem(0, 2, 115); 

xData.setItem(0, 2, -0.11); 

data.setItem(0, 3, 684); 

xData.setItem(0, 3, -0.040); 

var treeMap = new cfx.treemap.TreeMap(); 

chart1.setGalleryAttributes(treeMap);

 

JuanC