jqxChart is a lightweight and powerful chart widget written 100% in javascript. It offers many advanced features and supports three different rendering technologies - SVG, HTML5 Canvas & VML. You can use jqxChart to add interactive charts to your website, build custom dashboards, or use it in your mobile applications. jqxChart offers excellent cross-browser compatibility and works well with both desktop and mobile browsers. jqxChart is being used by thousands of individual developers, small companies as well as a significant percentage of the Furtune 100 companies.

Basic concepts

Before you start using jqxChart you need to learn how it works and some basic concepts. Depending on which features you use, your chart may contain the following elements:

Some simple charts may not have all of these elements, while complicated charts could be highly customized and even include additional elements added through custom drawing.

Take a look at the following picture to learn more about the different elements:

Getting Started

Include all required javascript & css files

jqxChart uses jQuery for basic JavaScript tasks like elements selection and events handling. You need to include the jQuery javascript file, the jQWidgets core framework file - jqxcore.js, the jQWidgets data binding file - jqxdata.js, the main jqxChart plug-in file - jqxchart.core.js file, the drawing plug-in file - jqxdraw.js and the base jQWidgets stylesheet - jqx.base.css:

Create a DIV element inside the body of your page

You need to define an element which will serve as a container for the chart. DIV elements are convininent because you can easily position them and specify a size of your choise. Give the DIV element an ID like 'chartContainer' or something that you like.

Insert the jQuery document ready code inside the head section of your page

Prepare sample data

jqxChart can load data from multiple data source like JSON, XML, CSV and TAB delimited files. Here we'll define and use a simple javascript array of objects. This code must be placed inside the $(document).ready function:

Prepare the chart settings and initialize the chart

The final step is to prepare the chart display settings and initialize the chart. The code below specifies the title and description that the chart will display and sets the dataSource property. In this example we bind the Category Axis (horizontal X axis) to the Day property of our data source. The chart will display the data in three series of type 'column'. Each of the series is bound to one of the properties in our data source.

The complete source code for this example is here:

The result of the above code is here: