Documentation

Introduction

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:
  • horizontal axis (xAxis)
  • vertical axis (valueAxis)
  • title & description
  • one or more series groups and series
  • grid lines & tick marks
  • legend
  • border line
  • background
  • tooltips
  • annotations
  • 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:

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: 
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>

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. 
<div id='chartContainer' style="width:600px; height:400px"></div>

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

$(document).ready(function()
{
    // jqxChart initialization  code goes here.
}

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: 
var sampleData = [
    { Day:'Monday', Keith:30, Erica:15, George: 25},
    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
    { Day:'Thursday', Keith:35, Erica:25, George: 45},
    { Day:'Friday', Keith:20, Erica:20, George: 25},
    { Day:'Saturday', Keith:30, Erica:20, George: 30},
    { Day:'Sunday', Keith:60, Erica:45, George: 90}
];

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:
<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		
            // prepare chart data
            var  sampleData = [
                    { Day:'Monday', Keith:30, Erica:15, George: 25},
                    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
                    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
                    { Day:'Thursday', Keith:35, Erica:25, George: 45},
                    { Day:'Friday', Keith:20, Erica:20, George: 25},
                    { Day:'Saturday', Keith:30, Erica:20, George: 30},
                    { Day:'Sunday', Keith:60, Erica:45, George: 90}
                ];
				
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith'},
                                    { dataField: 'Erica', displayText: 'Erica'},
                                    { dataField: 'George', displayText: 'George'}
                                ]
                        }
                    ]
            };
            
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="background:white;">
	<div id='chartContainer' style="width:600px; height: 400px"/>
</body>
</html>

The result of the above code is here: