Jump to content
JChartFX Community

Groover

Members
  • Posts

    21
  • Joined

  • Last visited

Groover's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. Problem solved! For anyone interested, The setColor function will throw an error when used on the Title object, use setTextColor instead. Ex: var chart1 = new cfx.Chart(); var panes = chart1.getPanes(); var pane0 = panes.getItem(0); pane0.getTitle().setTextColor("#222222");
  2. Hi, Is it possible to draw a curved area chart that fills the area between high/low values instead of high/zero ? Thanks!
  3. Hi, I am trying to change the text style for the title and X/Y-axis text, but nothing changes no matter what I do. How should this be done programmatically or with css? Thanks!
  4. 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; }
  5. 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
  6. 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!
  7. Hi, I have created a combined chart using the JSON below. First I made a Curve chart, it looks incorrect and then a Line chart which looks ok. [ { "Date": " 10:00", "MY-VAIO": 4107, "COMPLETED": 42 }, { "Date": " 11:00", "MY-VAIO": 4478, "COMPLETED": 59 }, { "Date": " 12:00", "MY-VAIO": 4246, "COMPLETED": 61 }, { "Date": " 13:00", "MY-VAIO": 4074, "COMPLETED": 59 }, { "Date": " 14:00", "MY-VAIO": 4003, "COMPLETED": 60 }, { "Date": " 15:00", "MY-VAIO": 3981, "COMPLETED": 60 }, { "Date": " 16:00", "MY-VAIO": 4217, "COMPLETED": 60 }, { "Date": " 17:00", "MY-VAIO": 5024, "COMPLETED": 60 }, { "Date": " 18:00", "MY-VAIO": 2043, "COMPLETED": 4 }, { "Date": " 19:00", "MY-VAIO": 3265, "COMPLETED": 13 }, { "Date": " 21:00", "MY-VAIO": 45770, "COMPLETED": 223 }, { "Date": " 22:00", "MY-VAIO": 5427, "COMPLETED": 19 } ] for some reason the Curve chart enter negatives territory, but it should not. ... while the Line chart looks ok Is there any way of correcting the Curve chart? Thanks!
  8. 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; }
  9. One more obeservation, it appears that if the value cfx.Chart.Hidden is present anywhere in the series with this gallery type cfx.Gallery.Curve, then there will only be dots rendered with no curved line between them in the serie. Also dont know how to handle this. Thanks!
  10. Hi JuanC, don't know if this is correct, the series AVG,COMPLETED and ABORTED are not visible at all in the charts SAMPLE JSON [ { "Date": "2013-11-14 09:53", "AVG": "cfx.Chart.Hidden", "COMPLETED": "cfx.Chart.Hidden", "ABORTED": "cfx.Chart.Hidden", "MY-VAIO": 28 }, { "Date": "2013-11-14 09:54", "AVG": 5606, "COMPLETED": 2, "ABORTED": 0, "MY-VAIO": 67 }, { "Date": "2013-11-14 09:55", "AVG": "cfx.Chart.Hidden", "COMPLETED": "cfx.Chart.Hidden", "ABORTED": "cfx.Chart.Hidden", "MY-VAIO": 71 }, { "Date": "2013-11-14 09:56", "AVG": 5130, "COMPLETED": 2, "ABORTED": 0, "MY-VAIO": 74 } ] Is this how the sample JSON above should look like to render the missing series? [ { "Date": "2013-11-14 09:53", "AVG": "0", "COMPLETED": "0", "ABORTED": "0", "MY-VAIO": 28 }, { "Date": "2013-11-14 09:54", "AVG": 5606, "COMPLETED": 2, "ABORTED": 0, "MY-VAIO": 67 }, { "Date": "2013-11-14 09:55", "AVG": "cfx.Chart.Hidden", "COMPLETED": "cfx.Chart.Hidden", "ABORTED": "cfx.Chart.Hidden", "MY-VAIO": 71 }, { "Date": "2013-11-14 09:56", "AVG": 5130, "COMPLETED": 2, "ABORTED": 0, "MY-VAIO": 74 } ] Thanks!
  11. Hi, With some help from a Groovy forum I found a way to fill in "missing" values with default values through out the json before passing it to jChartFX. The default value I am using is 0, but assuming that the missing values are 0 is actually wrong, it would be better to not show the missing values at all. Is there a value that can be used for filling in missing values so that the series will still be rendered but the missing values not? Thanks!
  12. Hi, It seem like series not present in the first time step will not be rendered at all when feeding the chart with JSON. For example, with the JSON below, only the the series MY-HOST will be present in the chart. Is there any way to to make sure all series are included and drawn in the chart, even with an unreliable JSON like this? Thanks! Sample JSON [ { "Date": "2013-11-12 19:45", "MY-HOST": 66 }, { "Date": "2013-11-12 19:46", "MY-HOST": 48 }, { "Date": "2013-11-12 19:47", "AVG": 27592, "COMPLETED": 1, "ABORTED": 0, "MY-HOST": 36 }, { "Date": "2013-11-12 19:48", "AVG": 10142, "COMPLETED": 2, "ABORTED": 0, "MY-HOST": 28 }, { "Date": "2013-11-12 19:49", "AVG": 3201, "COMPLETED": 1, "ABORTED": 0, "MY-HOST": 31 }, { "Date": "2013-11-12 19:50", "MY-HOST": 35 } ]
  13. Thanks JuanC, this is good enough to make it work.
  14. Hi, Is it possible to get series by its name instead of getItem(N)? ---------------------------------------------- var seriesList = chart1.getSeries(); var series1 = seriesList.getItem(0); //HIGH var series2 = seriesList.getItem(1); //LOW var series3 = seriesList.getItem(2); //AVG series1.setPane(pane0); series2.setPane(pane0); series3.setPane(pane0); series1.setGallery(cfx.Gallery.Scatter); series2.setGallery(cfx.Gallery.Scatter); series3.setGallery(cfx.Gallery.Curve); -------------------------------------------------------- The sequence of the properties can vary over time in the JSON object used for feeding the chart in my case. Thanks!
×
×
  • Create New...