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.
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:
- horizontal axis (xAxis)
- vertical axis (valueAxis)
- title & description
- one or more series groups and series
- grid lines & tick marks
- border line
- range selector
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:
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
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: