Jump to content
JChartFX Community
  • 0

Changing series' color


Question

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

Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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 

Link to post
Share on other sites
  • 0

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! :)

 

Link to post
Share on other sites
  • 0

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 

Link to post
Share on other sites
  • 0

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;

post-2107-13939743520378_thumb.jpg

Link to post
Share on other sites
  • 0

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 

Link to post
Share on other sites
  • 0

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! 

Link to post
Share on other sites
  • 0

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 

Link to post
Share on other sites
  • 0

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 

Statistics_Mozilla_Firefox_2013_11_16_19 

 

 


Link to post
Share on other sites
  • 0

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 

post-2107-13939743528954_thumb.jpg

Link to post
Share on other sites
  • 0

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;

} 

 

 

Link to post
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...
×
×
  • Create New...