Loading repository data…
Loading repository data…
softwarefx / repository
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.
For feature requests, tech support and general discussion, don't use Git Hub Issues.
You can use our community forums help, a resource that gives you access to community generated content related to our products, as well as allows users to post common questions and answers to particular issues.
Please access our community driven forums here: http://community.jchartfx.com/forums
jChartFX was tailored specifically to enhance your data visualization capabilities and needs. The following features make jChartFX the most compelling charting tool for JavaScript/HTML5 developers:
jChartFX is available to HTML5, jQuery and JavaScript developers absolutely FREE. You can integrate and deploy jChartFX even in your commercial web sites at no cost.
Ensure your charts work in any browser and any device! jChartFX provides true client-side charts that have been fully tested with these popular HTML5 compliant browsers: Intent Explorer, Firefox, Safari, and Chrome.
Over 21 years of experience and 65,000+ customers confirm it!
jChartFX leverages the award-winning Chart FX foundation to provide a fully featured data visualization tool you can trust for your mission critical business applications.
We have leveraged the power of jQuery to allow jChartFX to accommodate to your preferred themes without a single line of code. jChartFX reads and interprets jQuery themes and CSS files to quickly adapt to your page layout and designs.
What makes jChartFX superior is that is easy to learn and has outstanding performance thanks to its lightweight framework that is easy to integrate to your existing HTML pages. With an outstanding and clearly laid out API, jChartFX lets you customize virtually any chart element.
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.
This section provides detailed information to help you set up your first pages with jChartFX.
You can obtain current and past versions of jChartFX for free from: jChartFX Download Site where you will obtain a zip file containing several .js script (along with a variety of css style sheet files) files.
You can also install the jChartFX package from:
The jChartFX libraries have been split into several .js files to provide granular control over what you add as a reference in your html thus allowing you to limit what the browser downloads when the page is accessed.
In most cases, the name of the .js will be enough to discern the part of the jChartFX engine they contain. Some of those .js files are required for every page hosting a chart:
CoreVector and CoreBasic are mutually exclusive. Choose one of the two depending on your needs.
In addition to the core libraries there are .js files that provide additional functionality to the chart:
While the core .js files include basic galleries such as bars, lines and pie, jChartFX provides an additional collection of advanced galleries through a set of individual script files:
For additional information on the available galleries, refer to the Gallery Types section of the Programmer's Guide.
jChartFX provides JavaScript IntelliSense auto-completion support if you use Microsoft Visual Studio as your IDE. To enable this feature, include jchartfx.visualstudio.js library in your project and add a reference directive in your JavaScript code as an XML comment:
/// <reference path="Scripts/jchartfx.visualstudio.js"/>
// your JavaScript Code
There is currently Tern support for different editors, like for example:
To enable Autocompletion, argument hints and other editing features, you need to download and install the Tern package (search for instructions on how to install the Tern plugin for your editor) and then include jchartfx.tern.json as an additional JSON type definition in your preferred editor.
For example, when using Sublime Text(2/3), make sure to copy jchartfx.tern.json file in the tern pakage defs folder:
\..\Sublime Text 2\Packages\tern_for_sublime\node_modules\tern\defs\jchartfx.tern.json
When working with TypeScript code, jChartFX provides auto-completion and error highlighting support around the TypeScript language. You can use the editor/IDE of your choice where TypeScript is supported.
To enable this feature, include jchartfx.d.ts file in your project and add a reference directive in your TypeScript code as an XML comment:
/// <reference path="include/jchartfx.d.ts"/>
// your TypeScript Code
If you want to use the jChartFX UI Menu, you must include the jchartfx.userinterface.css file along with jchartfx.userinterface.js. Please read the online documentation for any additional licensing restriction that may apply to the UI feature.
A complete set of hundreds of maps compatible with the jChartFX Maps extension is available for download at the Software FX Maps Marketplace: http://maps.softwarefx.com
Most maps are available in high and low resolutions, so you can select the appropriate size and quality you need depending on your requirements.
Before using jChartFX you need to copy the necessary jChartFX libraries to a location that the browser will be able to access. For example, within a js folder on your web site, 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:
JavaScript
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:
JavaScript
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:
JavaScript
If you are working with the JQuery framework, you can use the ready event of the document instead:
JavaScript
Then we need to make sure we declare a chart variable outside the function we call on load. That way the chart object will be accessible after the initial rendering to allow for further interaction later in t