JChartFX

Welcome to jChartFX

• Official Website: http://www.jChartFX.com
• Official Download: http://www.jChartFX.com/download
• Licensing: http://www.jChartFX.com/eula/
• Support: http://support.softwarefx.com/jChartFX

Installation

• Install with Bower: bower install jchartfx
• Install with NuGet: Install-Package jChartFX

Reporting issues

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

Why jChartFX?

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:

Free is Free !

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.

Works Everywhere

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.

Cutting Edge Technology Meets Experience

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.

Naturally Adaptive

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.

Easy Programmability and Built for Speed

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.

Getting Started with jChartFX

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.

The jChartFX Libraries

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:

• Bower
• NuGet

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:

• jchartfx.system.js: Contains internal jChartFX classes. This library is always required.
• jchartFX.coreBasic.js: The lightweight version of the core jChartFX library. Use this library instead of coreVector when a lighter download is favored over more attractive visuals.
• jchartFX.coreVector.js: The visually enhanced version of the core jChartFX library. Use this library instead of coreBasic when more complex and attractive visuals are desired.

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:

• jchartfx.advanced.js: Provides advanced chart features such as Axis Sections, Conditional Attributes and the DataGrid.
• jchartfx.animation.js: Provides animation features. Use this library when enabling animated effects.
• jchartfx.annotation.js: Provides access to the annotation extension. Use this library when you need to overlay drawing objects such as balloons, arrows, floating texts and images.
• jchartfx.coreVector3d.js: Adds 3D rendering capabilities to the coreVector library. Requires coreVector.
• jchartfx.data.js: Provides advanced data features such as the CrossTab data transform.
• jchartfx.ui.js: Provides compatibility with jQueryUI Syntax
• jchartfx.userInterface.js: Contains all the code required by the menu interface, as well as some other user interface elements. Note: You also need to include the following files to your page to enable jChartFX Menu: jchartfx.userinterface.css
• jchartfx.vector.js: This includes the Vector drawing functionality. It is not necessary when using the CoreVector library. It can be used along with the CoreBasic library if you want to be able to use both Vector and non-Vector charts in the same page.

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:

• jchartfx.axistrend.js: Provides access to the AxisTrend gallery add-on that allows to use the X axis as an easy visualizer of trends or changes displayed in another series.
• jchartfx.bullet.js: Contains the Bullet gallery
• jchartfx.density.js: Contains the Density gallery
• jchartfx.equalizer.js: Contains the Equalizer bars gallery
• jchartfx.funnel.js: Contains the Funnel gallery
• jchartfx.gauge.js: Provides access to the Gauge extension. Use this library when you need to display a single variable using gauges of different types: Radial Gauge, Horizontal Gauge, Vertical Gauge, Trends and Digital Panel.
• jchartfx.handdrawn.js: Provides the HandDrawn extension that allows you to add hand drawn effects to the standard galleries
• jchartfx.heatmap.js: Contains the Heatmap gallery
• jchartfx.highlow.js: Contains the High-Low gallery
• jchartfx.highlowclose.js: Contains the High-Low-Close Financial gallery
• jchartfx.maps.js: Provides access to the Maps extension. Use this library when you need to integrate geographic maps with full support of latitude and longitude coordinates
• jchartfx.overlaybubble.js: Contains the OverlayBubble gallery
• jchartfx.pareto.js: Contains the Pareto Chart gallery
• jchartfx.pictograph.js: Contains the PictoGraph Control, the PictoGraph extension and the PictoBar extension
• jchartfx.pyramid.js: Contains the Pyramid gallery
• jchartfx.radar.js: Contains the Radar gallery
• jchartfx.rose.js: Contains the Rose gallery
• jchartfx.statistical.js: Contains the Statistical extension
• jchartfx.sparkline.js: Contains the Sparkline gallery
• jchartfx.surface.js: Contains the Surface gallery
• jchartfx.treemap.js: Contains the Treemap Gallery

For additional information on the available galleries, refer to the Gallery Types section of the Programmer's Guide.

Visual Studio IntelliSense

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

Tern code editor plugin

There is currently Tern support for different editors, like for example:

• Emacs
• Vim
• Sublime Text
• Light Table
• Eclipse

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

TypeScript code-analysis

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

User Interface

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.

jChartFX Maps

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