Chart FX

[http://www.softwarefx.com/]

  •   |  1299$ for premium subscription

jChartFX is a set of Javascript libraries providing a powerful collection of charts and graphs for professional and serious business data visualization and analysis, leveraging HTML5, CSS and SVG capabilities in todays browsers to deliver aesthetically superior charts and a richer end user experience. Chart FX is available for Visual Studio, VS .Net, WPF, Silverlight, Java, ASP, Client Server & SQL Reporting applications.

jChartFX is a set of Javascript libraries providing a powerful collection of charts and graphs for professional and serious business data visualization and analysis, leveraging HTML5, CSS and SVG capabilities in todays browsers to deliver aesthetically superior charts and a richer end user experience. Chart FX is available for Visual Studio, VS .Net, WPF, Silverlight, Java, ASP, Client Server & SQL Reporting applications.

jChartFX runs in your browser using pure JavaScript. There is no server round-trip, no plugins. This translates into less web server load, smaller page sizes, lower costs and faster websites.



jChartFX leverages our industry leading data visualization foundation serving more than 150,000 developers for over 2 decades and deployed to millions of users worldwide.



jChartFX leverages HTML5, CSS and SVG capabilities in today's browsers to deliver aesthetically superior charts and a richer end user experience.



jChartFX provides the most comprehensive API, making it easy to customize every aspect of the charts, from axis to data series settings.



jChartFX can be seamlessly integrated with a general purpose library (e.g. jQuery) or used with minimal or no dependencies to generate a wide array of charts on your browser based applications.



jChartFX supports JSON so you can populate charts with your data by simply using web services to retrieve server side data from any source.







Screenshots





Download Package

Charts Types

Bar-Gantt-Cube, Area, Line-Step-Curve, Bubble, Pie-Doughnut-Pyramid, Combination charts, Scatter, Financial, Radar-Polar, Statistical, Radial Gauges

Language

Javascript

Rating (more)

Functionality 
Charts types 
Visibility 
Price 
Documentation 
Usability 
Perspectivity 

Total [7.9/10] 

Disadvantages

Very expensive

News

2015-05-16 | jChartFX Plus Version 7.4 is now available

Installation & Code samples

Using jChartFX is as easy as downloading the free libraries and referencing them from your html page like you would do with any other Javascript framework. Simply add an html element (typically a div) where jChartFX will render the content. Then use JavaScript or jQuery to take advantage of the comprehensive and powerful API in order to configure and customize the chart. Before using jChartFX you need to copy the necessary jChartFX libraries to a location that the browser will be able to access. For example, you could create a folder on your web site named jChartFX and simply copy all the jChartFX libraries to that directory. Then you can reference any library by adding a (script) tag to the (head) section of your page:

<code> <head> <link rel="stylesheet" type="text/css" href="chartfx.css" /> <script type="text/javascript" src="jChartFX/jchartfx.system.js"></script> <script type="text/javascript" src="jChartFX/jchartfx.coreVector.js"></script> </head> </code> Afterwards, you need to define a DIV html element to host the chart in your page's body. Ultimately the DIV will provide the location and dimensions of the chart: <code> <div id="ChartDiv" style="width:600px;height:400px;display:inline-block"></div> </code> Since we want the chart to be generated when the page loads, we need to assign a function to handle the onload event. There are many ways of doing this. If you are not using a particular framework you can simply use the onload attribute of the page's Body element: <code> <body onload="loadChart()"> </code> If you are working with the JQuery framework, you can use the ready event of the document instead: <code> $(document).ready(function($){ } </code>

I decide build bargraph of the cats color per month.

<code> <html> <head> <link rel="stylesheet" type="text/css" href="styles/chartfx.css" /> <script type="text/javascript" src="js/jchartfx.system.js"></script> <script type="text/javascript" src="js/jchartfx.coreBasic.js"></script> <script type="text/javascript" src="js/jchartfx.advanced.js"></script> <script type="text/javascript" language="javascript"> var chart1; function loadChart() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.getAllSeries().setStacked(cfx.Stacked.Normal); chart1.getView3D().setEnabled(true); CatsColor(chart1); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText("Color of the borning cats by Month"); titles.add(title); chart1.getAxisY().getTitle().setText("Number of Cats"); function CatsColor(chart1) { var items = [{ "Black": 106, "White": 135, "Foxy": 25, "Month": "Jan" }, { "Black": 104, "White": 124, "Foxy": 65, "Month": "Feb" }, { "Black": 106, "White": 135, "Foxy": 85, "Month": "Mar" }, { "Black": 123, "White": 155, "Foxy": 92, "Month": "Apr" }, { "Black": 136, "White": 135, "Foxy": 125, "Month": "May" }, { "Black": 236, "White": 135, "Foxy": 25, "Month": "Jun" }, { "Black": 130, "White": 125, "Foxy": 68, "Month": "Jul" }, { "Black": 212, "White": 78, "Foxy": 69, "Month": "Aug" }, { "Black": 132, "White": 252, "Foxy": 111, "Month": "Sep" }, { "Black": 110, "White": 215, "Foxy": 95, "Month": "Oct" }, { "Black": 160, "White": 125, "Foxy": 195, "Month": "Nov" }, { "Black": 260, "White": 235, "Foxy": 121, "Month": "Dec" }]; chart1.setDataSource(items); } var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); } </script> </head> <body onload="loadChart()"> <div id="ChartDiv" style="width:600px;height:400px;display:inline-block"></div> </body> </html> </code>

 

Result