Shacko Posted August 29, 2013 Report Share Posted August 29, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted August 29, 2013 Report Share Posted August 29, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 Shacko Posted August 29, 2013 Author Report Share Posted August 29, 2013 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! Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted August 29, 2013 Report Share Posted August 29, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 Groover Posted November 15, 2013 Report Share Posted November 15, 2013 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; } Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted November 15, 2013 Report Share Posted November 15, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 Groover Posted November 16, 2013 Report Share Posted November 16, 2013 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! Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted November 16, 2013 Report Share Posted November 16, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 Groover Posted November 16, 2013 Report Share Posted November 16, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted November 16, 2013 Report Share Posted November 16, 2013 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 Quote Link to comment Share on other sites More sharing options...
0 Groover Posted November 16, 2013 Report Share Posted November 16, 2013 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; } Quote Link to comment Share on other sites More sharing options...
Question
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
Link to comment
Share on other sites
10 answers to this question
Recommended Posts
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.