Jump to content
JChartFX Community
  • 0

Treemap conditional attribute problems


ChrisS
 Share

Question

 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);

  • Like 1
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...