Groover
-
Posts
21 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Groover
-
-
Hi,
Is it possible to draw a curved area chart that fills the area between high/low values instead of high/zero ?
Thanks!
-
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!
-
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;
}
-
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
-
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!
-
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!
-
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;
}
-
Many thanks JuanC, this solves the problem!
-
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!
-
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!
-
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!
-
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
}
]
-
Thanks JuanC, this is good enough to make it work.
-
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!
-
Hi,
Dont know why this error is happening when creating a High/Low chart combined with a barchart.
TypeError: b.bG is not a constructor
JSON
[
{
"DATE": "2013-10-30",
"HIGH": 523,
"LOW": 110,
"COMPLETED": 8
}
,{
"DATE": "2013-10-31",
"HIGH": 429,
"LOW": 143,
"COMPLETED": 16392
}
]
HIGH/LOW should go into the HIGH/LOW chart and the COMPLETED into the bar chart below.
Parts of the code:
var chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.HighLowClose);
chart1.getAnimations().getLoad().setEnabled(true);
chart1.getLegendBox().setVisible(true);
chart1.getAxisX().setLabelAngle(45);
var panes = chart1.getPanes();
var pane1 = new cfx.Pane();
var pane0 = panes.getItem(0);
panes.add(pane1);
pane0.setProportion(3);
pane0.getTitle().setText("Elapsed");
chart1.getAxisY().getTitle().setText("(ms)");
pane1.setProportion(1);
pane1.setSeparation(20);
pane1.getTitle().setText("Volume");
chart1.setDataSource(items);
var seriesList = chart1.getSeries();
var i =0;
while (seriesList.getItem(i)!==undefined&&i<50) { // &&i<50 just to prevent indefinite loop
i++;
}
var series = seriesList.getItem(i-1);
series.setPane(pane1);
series.setGallery(cfx.Gallery.Bar);
doTitle(chart1, title,process_,shortprocess);
var chartDiv = document.createElement("div");
var width = $( window ).width() -20;
chartDiv.style.cssText = 'width:'+width+'px;height:600px;display:inline-block;overflow: visible;';
$(chartDiv).appendTo(divHolder);
document.body.appendChild(divHolder)
chart1.create(chartDiv);
$(divHolder).dialog({
height:'600',
width: width,
dialogClass:'transparent',
draggable: false,
close: function() {
$( divHolder ).remove();
},
open: function(){
$(divHolder).parent().find( 'span.ui-dialog-title' ).remove();
$(divHolder).parent().addClass('chartDialogZIndex');
}
}).parent().draggable();
This will trigger the error and no chart is created:
chart1.setGallery(cfx.Gallery.HighLowClose);
This will create a bar chart instead of a High/Low chart, why?
chart1.setGallery(cfx.Gallery.HighLow);
Thanks for any help in solving this issue!
-
For anyone interested,
changing the order of how the js files are imported solved the problem.
-
Hi,
It should be possible to activate animation when drilling down to the next chart according this page
http://www.jchartfx.com/api/Link/Reload
chart1.getAllSeries().getLink().setReload(true);
A quick search in the jChartFX js files says that the setReload function is missing.
Why?
Thanks!
-
Hi,
did you manage to get this working?
I would also like to format the tooltip.
Thanks!
-
Hi,
How to change the proportions of the chart relative to the chart div?
Thanks!
-
Hi,
any ideas why this is not working? jchartfx.full.js is included!
Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>jChartFX using JQueryUI</title>
<link type="text/css" href="http://www.jchartfx.com/styles/css/jquery-ui-1.8.18.custom.css"
rel="Stylesheet" />
<link type="text/css" href="http://www.jchartfx.com/resources/Include/cupertino/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/jChartFX/7.0.4728.16930/jchartfx.full.js"></script>
<script type="text/javascript" src="js/jchartfx.animation.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery.json-1.3.min.js"></script>
</head>
<body>
<div id="div_Chart" style="height:400px;width:500px;display:inline-block"/>
<script language = "javascript" type = "text/javascript">
var td;
td = new cfx.TitleDockable();
td.setText("Alerts Per Host");
var chart1 =new cfx.Chart();
chart1.getAnimations().getLoad().setEnabled(true);
chart1.getTitles().add(td);
chart1.getLegendBox().setVisible(true);
chart1.setGallery(cfx.Gallery.Pie);
chart1.getAllSeries().getPointLabels().setVisible(true);
chart1.getView3D().setEnabled(true);
var myPie;
myPie = (chart1.getGalleryAttributes());
myPie.setExplodingMode(cfx.ExplodingMode.First);
myPie.setSliceSeparation(20);
var items = [{
"Label": "Nuts",
"Value": 10
}, {
"Label": "Veggies",
"Value": 40
}, {
"Label": "Fruit",
"Value": 10
}, {
"Label": "Diary",
"Value": 15
}, {
"Label": "Grains",
"Value": 25
}];
chart1.setDataSource(items);
chart1.create(document.getElementById('div_Chart'))</script>
</body>
</html>
Changing title font/color and X/Y-axis text
in General Questions
Posted
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");