jChartFX
jChartFX is a powerful HTML5-compliant charting component using JavaScript libraries to leverage the power of jQuery, CSS and SVG capabilities to deliver aesthetically superior charts and a richer end user experience, providing the most complete collection of charts and graphs for professional and serious business data visualization and analysis.
I'm going to develop a Web App. with Jdk 1.4 on Weblogic 8 and I need to use jChart, JFreeChart, iText and JasperReport.
Which version of these libraries do I have to use?
Thanks.
Source: (StackOverflow)
I am using jchartfx to generate charts. The graph demos on jchartfx website load animated. My graph code is below and the problem is that my graph doesn't seem to animate and just loads straight away.
Here's a jsfiddle: http://jsfiddle.net/3LkG3/
Any ideas what's wrong with my code that is preventing the animated load?
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreBasic.js"></script>
<div id="ChartDiv" style="width:600px;height:400px"></div>
<script type="text/javascript" language="javascript">
loadChart();
var chart1;
function loadChart()
{
chart1 = new cfx.Chart();
chart1.getAxisY().setMin(0);
chart1.getAxisY().setMax(100);
var series = chart1.getSeries().getItem(0);
series.setGallery(cfx.Gallery.Line);
var data = [
{ "Month": "Jan", "A": 40, "B": 12, "C": 6, "D": 8 },
{ "Month": "Feb", "A": 54, "B": 19, "C": 11, "D": 19 },
{ "Month": "Mar", "A": 63, "B": 29, "C": 15, "D": 22 },
{ "Month": "Apr", "A": 75, "B": 31, "C": 19, "D": 43 },
{ "Month": "May", "A": 81, "B": 70, "C": 35, "D": 47 },
{ "Month": "Jun", "A": 92, "B": 90, "C": 60, "D": 98 }
];
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
</script>
Source: (StackOverflow)
I am attempting to create a graph in a web part using jChartFX. However, when I include the jchartfx.system.js file, the Visual Studio debugger breaks on a JavaScript runtime error, stating that a semicolon (;) is expected. The file in question is inplview.js, a SharePoint file. If I remove the jchart.system.js file, everything is kosher. Is jChartFX simply not compatible with SharePoint, or am I doing something wrong? If it's incompatible, are there similar libraries that I can use to create a graph?
Source: (StackOverflow)
I am currently using jchartfx to render some charts, my problem is I cannot find any way to remove the very large title created for each graph.
$("#sales").chart({
axisY : {
min : 0,
max : salesMax,
},
dataValues : items,
titles : [ {
text : ""
} ]
});
If I leave the string empty as in the example above, I get a default text instead. I must do this jquery-wise.
Source: (StackOverflow)
I'm not really sure on how to do this. I can get it to print by doing the code below however it comes out in black and white and there are 2 of them when I recreate the chart multiple times, but never more than two
var PrintString = "";
var c = $('.classcontainingChart').find('.jchartfx');
$(c).each(function (i, chart) {
PrintString += $(chart).html();
});
var PrintWindow = window.open('');
PrintWindow.document.write(PrintString);
PrintWindow.print();
PrintWindow.close();
Source: (StackOverflow)
I want to open the popup on click of points in jchartfx to display the detail information about that point. How can i pass the unique id to display the detail information dynamically?
Source: (StackOverflow)
I want to open the popup on click of points in jchartfx to display the detail information about that point. I want to add the id attribute to the polygon tag. How can i pass the value of id to display the detail information dynamically?
Source: (StackOverflow)
I have here a script that displays the data from my mysql query in php into chart using jchartFX. Everthing is working fine when the returned rows are just Dates and Integer values But in my separate query that return average time in (hh:mm:ss) format the chart says "No Data Available" but when I check it in the Console log it returns:
So I suspect this should be because of wrong assigning of Y Axis Min and Max values, I did:
chart1 = new cfx.Chart();
chart1.getData().setSeries(2);
chart1.getAxisY().setMin("00:00:00");
chart1.getAxisY().setMax("99:00:00");
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
series1.setGallery(cfx.Gallery.Bar);
series2.setGallery(cfx.Gallery.Bar);
$.ajax({
url: $("#base_url").val() + "ajax/get_sample_data",
dataType: "json",
success: function(data){
chart1.setDataSource(data);
},
error: function(){
alert("an error occured");
}
});
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
How should I fix this problem ? How should I make jquery directly treat "00:00:00" as time? Or did I miss something on my jchartfx plugin? Thanks.
Source: (StackOverflow)
I just want to ask if the returned data from my php json_encode is directly treated as "time" on my jquery, or do I have to format it in my jquery script ? Here:
I will be using this data on my jchartFX, I just wonder if this has been treated as "time" values or not . Because my chart displays: "No Data Available".I already made a data format but it seemed like not working.
Here's the entire code:
PHP
public function get_sample_data(){
$data = $this->queries->query("SELECT DATE_FORMAT(a.datetimeRequested,'%M %d') AS `Date`,
SEC_TO_TIME(AVG(TIME_TO_SEC(c.request_startckit))) AS `AVG CT`,
SEC_TO_TIME(SUM(TIME_TO_SEC(c.request_startckit))) AS `SUM CT`
FROM request a
JOIN ckit b ON b.idRequest = a.idRequest
JOIN cycle_time c ON c.idCkit = b.idCKIT
");
echo json_encode($data,JSON_PRETTY_PRINT);
}
Jquery:
chart1 = new cfx.Chart();
chart1.getData().setSeries(2);
var xaxis = chart1.getAxisX();
xaxis.getLabelsFormat().setFormat(cfx.AxisFormat.Date);
var yaxis = chart1.getAxisY();
yaxis.getLabelsFormat().setFormat(cfx.AxisFormat.DateTime);
yaxis.getDataFormat().setCustomFormat("hh:mm:ss");
chart1.getDataGrid().setVisible(true);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
series1.setGallery(cfx.Gallery.Bar);
series2.setGallery(cfx.Gallery.Bar);
$.ajax({
url: $("#base_url").val() + "ajax/get_sample_data",
dataType: "json",
success: function(data){
chart1.setDataSource(data);
},
error: function(){
alert("an error occured");
}
});
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
Source: (StackOverflow)
I am having trouble on assigning the Max and Min Value of my Y Axis in jchartFx. The values should be formatted on Time(hh:mm:ss). Please my code below and advise:
var yaxis = chart1.getAxisY();
yaxis.getLabelsFormat().setFormat(cfx.AxisFormat.Time);
yaxis.getLabelsFormat().setCustomFormat("hh:mm:ss");
yaxis.setMax("00:59:59");// the problem
yaxis.setMin("00:00:01");// the problem
The browser is always asking me to stop the script when adding the last two lines.
Source: (StackOverflow)
Please can anyone tell me how to convert a JChart into csv format , so that I can save the chart data into csv format
Source: (StackOverflow)
When I use the following code nothing shows up on my screen. Not sure if I'm missing something or using the wrong version of JQUERY. I'm using the latest version of JChartFX and I am trying to conficure the 3d Chart
<!DOCTYPE HTML>
<html lang="en-US"> <!--<![endif]-->
<head>
<title>Graph Example </title>
<style type="text/css">
#targetchart
{
width: 500px;
height: 375px;
padding: 4px;
border: 1px solid #dddddd;
background: #eeeeee
}
#targetchart h3 {
text-align: center;
margin: 0;
}
</style>
<link rel='nofollow' href="jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" media="screen" />
<link rel='nofollow' href="css/confirm.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="js/jchartfx.system.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector3d.js"></script>
<script type="text/javascript">
var chart1;$(document).ready(function ($) {
var items = [
{ "Sales": 2200, "Month": "Jan" },
{ "Sales": 1500, "Month": "Feb" },
{ "Sales": 2100, "Month": "Mar" },
{ "Sales": 2600, "Month": "Apr" },
{ "Sales": 3200, "Month": "May" },
{ "Sales": 3600, "Month": "Jun" },
];
$("div", "ChartDiv1").chart({
gallery: cfx.Gallery.Bar,
view3D: {
enabled: true,
rotated: true,
angleX: 30,
angleY: -20,
boxThickness: 10,
depth: 160,
shadow: cfx.Shadow.fixed
},
dataValues:items,
titles: [{
text: "Configuring 3D Charts"
}]
});
});
</script>
</head>
<body>
<div id="ChartDiv1" style="width:500px;height:375px;display:inline-block"></div>
</body>
</html>
Source: (StackOverflow)
My data
var data = [
{"title":"2013-12-09", "calls_in":"345", "calls_out":"100"},
{"title":"2013-12-08", "calls_in":"125", "calls_out":"97"},
{"title":"2013-12-07", "calls_in":"85", "calls_out":"2"},
{"title":"2013-12-06", "calls_in":"185", "calls_out":"22"},
{"title":"2013-12-05", "calls_in":"74", "calls_out":"419"}
]
arrives from a PHP script in json format as above. I'm using an API namely 'jChartFX', it's basically a javascript graphing library that makes cool charts on the fly with javascript/jquery.
Currently using the data above the library fails to parse it. It fails due to the quotes around the integer values. I need the data to in the format:
var data = [
{"title":"2013-12-09", "calls_in":345, "calls_out":100},
{"title":"2013-12-08", "calls_in":125, "calls_out":97},
{"title":"2013-12-07", "calls_in":85, "calls_out":2},
{"title":"2013-12-06", "calls_in":185, "calls_out":22},
{"title":"2013-12-05", "calls_in":74, "calls_out":419}
]
you see, the integers are NOT wrapped in quotes. How can i do this using jQuery or javascript.
In it's most basic form (working) the full script would look something similar to:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" rel='nofollow' href="chartfx.css" />
<script type="text/javascript" src="js/jchartfx.system.js"></script>
<script type="text/javascript" src="js/jchartfx.coreBasic.js"></script>
</head>
<body onload="loadChart()">
<div id="ChartDiv" style="width:600px;height:400px"></div>
<script>
var chart1;
function loadChart(){
chart1 = new cfx.Chart();
chart1.getData().setSeries(2);
chart1.getAxisY().setMin(0);
chart1.getAxisY().setMax(700);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
series1.setGallery(cfx.Gallery.Lines);
series2.setGallery(cfx.Gallery.Lines);
var data = [
{"title":"2013-12-09", "calls_in":345, "calls_out":100},
{"title":"2013-12-08", "calls_in":125, "calls_out":97},
{"title":"2013-12-07", "calls_in":85, "calls_out":2},
{"title":"2013-12-06", "calls_in":185, "calls_out":22},
{"title":"2013-12-05", "calls_in":74, "calls_out":419}
]
console.log(data);
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
</script>
</body>
</html>
Source: (StackOverflow)
I'm trying to paint a chart with three Y-axis and a Date X-axis. When I parse my Json, I have this data array:
var items = [
{"CoplanarIrradiance": 760,"AirTemperature": 35,"SurfaceTemperature": 32,"Time": "2014-Apr 27T18:15:00"}, {"CoplanarIrradiance": 460,"AirTemperature": 25,"SurfaceTemperature": 31,"Time": "2014-Apr-27T18:30:00"}, {"CoplanarIrradiance": 341,"AirTemperature": 27,"SurfaceTemperature": 32,"Time": "2014-Apr-27T18:45:00"}, {"CoplanarIrradiance" 233,"AirTemperature": 31,"SurfaceTemperature": 32,"Time": "2014-Apr-27T19:00:00"}, ... ]
But I don't get to paint the chart. It only appears the X-axis, and it's incorrect.
This is my code:
chart1.setDataSource(data);
// Eje de Tiempo (X)
var axis = chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
chart1.getAxisX().getLabelsFormat().setCustomFormat(";MMM-dd");
// Eje de Coplanar Irradiance(Y)
var axis1 = chart1.getAxisY();
axis1.getTitle().setText("Coplanar Irradiance (W/m2)");
axis1.getGrids().getMajor().setVisible(false);
axis1.getDataFormat().setFormat(cfx.AxisFormat.Number);
axis1.getDataFormat().setDecimals(2);
// Eje de Air Temperature (Y)
var axis2 = chart1.getAxisY2();
axis2.getTitle().setText("Air Temperature (C)");
axis2.setPosition(cfx.AxisPosition.Near);
axis2.getGrids().getMajor().setVisible(false);
chart1.getAxisY2().getDataFormat().setFormat(cfx.AxisFormat.Number);
axis2.getDataFormat().setDecimals(2);
// Eje de Surface Temperature (Y)
var axis3 = new cfx.AxisY();
chart1.getAxesY().add(axis3);
axis3.getTitle().setText("Surface Temperature (C)");
axis3.setVisible(true);
axis3.setPosition(cfx.AxisPosition.Far);
axis3.getLabelsFormat().setFormat(cfx.AxisFormat.Number);
axis3.getDataFormat().setDecimals(2);
// Especificamos que hay tres series de datos.
chart1.getData().setSeries(3);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
var series3 = chart1.getSeries().getItem(2);
series1.setAxisY(axis1);
series2.setAxisY(axis2);
series3.setAxisY(axis3);
series1.setGallery(cfx.Gallery.Lines);
series2.setGallery(cfx.Gallery.Lines);
series3.setGallery(cfx.Gallery.Lines);
// ----Assign data fields--------
var fields = chart1.getDataSourceSettings().getFields();
var field = new cfx.FieldMap();
var field2 = new cfx.FieldMap();
var field3 = new cfx.FieldMap();
field.setName("CoplanarIrradiance");
field.setUsage(cfx.FieldUsage.Number);
fields.add(field);
field2.setName("AirTemperature");
field2.setUsage(cfx.FieldUsage.Number);
fields.add(field2);
field3.setName("SurfaceTemperature");
field3.setUsage(cfx.FieldUsage.Number);
fields.add(field3);
var legendBox = chart1.getLegendBox();
legendBox.setDock(cfx.DockArea.Bottom);
legendBox.setContentLayout(cfx.ContentLayout.Center);
// ----Set Sample Data------------
var divHolder = document.getElementById('meteo_pop_up_grafica_imagen');
chart1.create(divHolder);
And this is the result chart:
What is the problem? The dataset is correct.
Thanks in advance
Source: (StackOverflow)