Changing series' color

[Shacko]

Hi, I'm starting to use jChartFX and I'm testing a few features.

I need to programmatically change a serie's color, and this is the code I'm using:

var line=chart1.getSeries().getItem(0);
line.setColor("#666666");

 The line doesn't turn grey.

I tried doing the same thing (just changing a setColor attribute to "#666666") in this jsfiddle found in a jchartfx demo page

http://jsfiddle.net/softwarefx/YQby7/

at line 52 where we have

var series1 = chart1.getSeries().getItem(0);

series1.setColor("#1D2793");

and still can't get the series change color.

Thank you for your help

[JuanC]

If you want to change series colors programmatically you have to make sure you do NOT include the full jchartfx.css, when you include this css we honor the colors and other attributes in the CSS instead of the API.

JuanC 

[Shacko]

If you want to change series colors programmatically you have to make sure you do NOT include the full jchartfx.css, when you include this css we honor the colors and other attributes in the CSS instead of the API.

JuanC 

 

It worked like a charm!
Sounds like a pretty strange behavior, but default colors are still there even without the css file, so, it's good to know.

Thank you!

 

[JuanC]

It is kind of strange, initially we only had the API and the chart had its "default" colors built-in but we thought for many web developers changing colors through the API would feel strange as they are accustomed to handle this through CSS.

Bottom line is, if you want to change attrbutes globally you can do so through the CSS, if you have to change attributes programatically you might be better off not including the CSS and handling it through the API.

JuanC 

[Groover]

Lets say a serie looks like this in jchartfx.css, what would the java script code look like to achieve the same programatically?

 

.jchartfx .Attribute0 {

fill: #57ACDA;

stroke: #4281A4;

stroke-width: 1;

}

.jchartfx .Attribute0Line {

stroke: #4281A4;

stroke-width: 3;

}

.jchartfx .Attribute0Alt {

fill: #4281A4;

} 

[JuanC]

To change colors and border width programmatically your code would look like the following

    var series = chart1.getSeries().getItem(0);

    series.setColor("#57ACDA");

    series.getBorder().setColor("#4281A4");

    series.getBorder().setWidth(1);

This code would change attributes for the first series, if you want to change attributes for other series please change the getItem parameter accordingly. 

If you are using gradients and want to change the other color in the gradient, you would use series.setAlternateColor

Regards,

JuanC 

[Groover]

Hmm, now the line is gray instead of green and the serie's icon in the legend box is gone, after removing the css above from the jchartfx.css and using this code instead:

var series = seriesList.getItem(i);

series.setPane(pane0);

series.setGallery(cfx.Gallery.Curve);

series.setMarkerShape(cfx.MarkerShape.None);

series.setColor("#93E24E"); //Green

series.getBorder().setColor("#6FAA3B"); //Dark Green

series.getBorder().setWidth(6); 

 

What is being done wrong here?

Thanks! 

[JuanC]

The following code generates a green line, note that to change the width of the line/curve you have to use getLine() instead of getBorder(), getBorder() is used for other galleries such as Bar charts.

Make sure you are not including the jchartfx.css to change the attributes programmatically.

    var items = [10,14,13,8,9,11,10,13];

    chart1.setDataSource(items);

    var series = chart1.getSeries().getItem(0);

    

    series.setColor("#93E24E"); //Green

    series.getBorder().setColor("#6FAA3B"); //Dark Green

    series.getLine().setWidth(6);

    series.setMarkerShape(cfx.MarkerShape.None);

    

    chart1.setGallery(cfx.Gallery.Curve);

 

JuanC 

[Groover]

I removed the reference to jchartfx.css and used this code, but it is still not working.

Any more clues what could be wrong?

Thanks!  

 

  var chart1 = new cfx.Chart();

chart1.getAnimations().getLoad().setEnabled(true);

chart1.getLegendBox().setVisible(true);

chart1.getAxisX().setLabelAngle(45);

      var panes = chart1.getPanes();

    var pane1 = new cfx.Pane();

var pane2 = new cfx.Pane();

    var pane0 = panes.getItem(0);

    panes.add(pane1);

panes.add(pane2);

    pane0.setProportion(2);

pane0.getTitle().setText("Elapsed");

chart1.getAxisY().getTitle().setText("Milliseconds");

    pane1.setProportion(1);

    pane1.setSeparation(20);

    pane1.getTitle().setText("Volume");

pane1.getAxisY().getTitle().setText("Transactions");

pane2.setProportion(1);

    pane2.setSeparation(20);

    pane2.getTitle().setText("Memory Usage (JVM)");

pane2.getAxisY().getTitle().setText("Percent");

var obj = items[0];

if("min"==timeunit){

if (obj["AVG"] === undefined)

obj["AVG"] = cfx.Chart.Hidden;

if (obj["COMPLETED"] === undefined)

obj["COMPLETED"] = cfx.Chart.Hidden;

if (obj["ABORTED"] === undefined)

obj["ABORTED"] = cfx.Chart.Hidden;

}else{

if (obj["AVG"] === undefined)

obj["AVG"] = cfx.Chart.Hidden;

if (obj["MAX"] === undefined)

obj["MAX"] = cfx.Chart.Hidden;

if (obj["MIN"] === undefined)

obj["MIN"] = cfx.Chart.Hidden;

if (obj["COMPLETED"] === undefined)

obj["COMPLETED"] = cfx.Chart.Hidden;

if (obj["ABORTED"] === undefined)

obj["ABORTED"] = cfx.Chart.Hidden;

}

chart1.setDataSource(items);

var seriesList = chart1.getSeries();

var i =0;

while (seriesList.getItem(i)!==undefined&&i<50) {

...

if(seriesList.getItem(i).getText()=="AVG"){

var series = chart1.getSeries().getItem(i);

series.setColor("#93E24E"); //Green

series.getBorder().setColor("#6FAA3B"); //Dark Green

series.getLine().setWidth(6);

series.setMarkerShape(cfx.MarkerShape.None);

chart1.setGallery(cfx.Gallery.Curve);

console.log("COLOR SET for i:"+i);

}

}

...

 

JSON 

[

    {

        "Date": "2013-11-16 19:05",

        "AVG": 5141,

        "COMPLETED": 1,

        "ABORTED": 0,

        "MY-VAIO": 63

    },

    {

        "Date": "2013-11-16 19:06",

        "MY-VAIO": 67

    },

    {

        "Date": "2013-11-16 19:07",

        "AVG": 5171,

        "COMPLETED": 1,

        "ABORTED": 0,

        "MY-VAIO": 68

    },

    {

        "Date": "2013-11-16 19:08",

        "AVG": 4106,

        "COMPLETED": 2,

        "ABORTED": 0,

        "MY-VAIO": 71

    },

    {

        "Date": "2013-11-16 19:09",

        "MY-VAIO": 74

    },

    {

        "Date": "2013-11-16 19:10",

        "AVG": 6068,

        "COMPLETED": 1,

        "ABORTED": 0,

        "MY-VAIO": 77

    },

    {

        "Date": "2013-11-16 19:11",

        "AVG": 7078,

        "COMPLETED": 1,

        "ABORTED": 0,

        "MY-VAIO": 79

    },

    {

        "Date": "2013-11-16 19:12",

        "AVG": 5141,

        "COMPLETED": 2,

        "ABORTED": 0,

        "MY-VAIO": 81

    },

    {

        "Date": "2013-11-16 19:13",

        "AVG": 5071,

        "COMPLETED": 1,

        "ABORTED": 0,

        "MY-VAIO": 83

    },

    {

        "Date": "2013-11-16 19:14",

        "MY-VAIO": 86

    }

]

 

 

Screenshot 

 

 

 

[JuanC]

Everything in your chart looks monochrome so there might be some code you did not posted that is causing this, I removed the data related from your code, added some customization for the last 2 series and got a chart where the curve is green, the bars are red and the area blue.

    chart1.getData().setSeries(3);

    chart1.getAnimations().getLoad().setEnabled(true);

    chart1.getLegendBox().setVisible(true);

    chart1.getAxisX().setLabelAngle(45);

    var panes = chart1.getPanes();

    var pane1 = new cfx.Pane();

    var pane2 = new cfx.Pane();

    var pane0 = panes.getItem(0);

    panes.add(pane1);

    panes.add(pane2);

    pane0.setProportion(2);

    pane0.getTitle().setText("Elapsed");

    chart1.getAxisY().getTitle().setText("Milliseconds");

    pane1.setProportion(1);

    pane1.setSeparation(20);

    pane1.getTitle().setText("Volume");

    pane1.getAxisY().getTitle().setText("Transactions");

    pane2.setProportion(1);

    pane2.setSeparation(20);

    pane2.getTitle().setText("Memory Usage (JVM)");

    pane2.getAxisY().getTitle().setText("Percent");

    

    var seriesList = chart1.getSeries();

    var series = seriesList.getItem(0);

    series.setColor("#93E24E"); //Green

    series.getBorder().setColor("#6FAA3B"); //Dark Green

    series.getLine().setWidth(6);

    series.setMarkerShape(cfx.MarkerShape.None);

    series.setPane(pane0);

    chart1.setGallery(cfx.Gallery.Curve);

    

    series = seriesList.getItem(1);

    series.setColor("#FF0000");

    series.setGallery(cfx.Gallery.Bar);

    series.setPane(pane1);

    

    series = seriesList.getItem(2);

    series.setColor("#0000FF");

    series.setGallery(cfx.Gallery.Area);

    series.setPane(pane2);

 

JuanC 

[Groover]

For anyone interested,

 

There was another referenced css file that caused problem.

After removing the content below from that css file, the colors in my chart(s) are now ok.

 

#chart .Title

{

    font-size: 14px;

    font-weight: bold;

}

#chartToolTip {

    background-color: #FFFFFF;

    color: transparent;

    padding: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

    pointer-events: none;

    border-style: solid;

    border-width: 0px;

    border-color: transparent;

}

#chart .Border {

fill: #FCFDFD;

stroke: #A6C9E2;

stroke-width: 1;

}

#chart .PlotArea {

fill: transparent;

stroke: #C5DBEC;

stroke-width: 1;

}

#chart .AxisY_Text {

fill: #222222;

}

#chart .AxisY_Major {

stroke: #C5DBEC;

}

#chart .AxisY_Minor {

stroke: #C5DBEC;

}

#chart .AxisY_Line {

stroke: #C5DBEC;

stroke-width: 2;

}

#chart .AxisY_Interlaced {

fill: #FCFDFD;

}

#chart .AxisX_Text {

fill: #222222;

}

#chart .AxisX_Line {

stroke: #C5DBEC;

stroke-width: 2;

}

#chart .Title {

fill: #222222;

}