jqDataVisualization for jQuery Documentation
'
'

Getting Started

Contents

  1. Overview
  2. Include the Files
  3. Add a jqChart container
  4. Create a chart

Overview

Download and unzip the contents of the archive to any convenient location. The package contains the following folders:

  • [js] - The javascript files of jqChart and jqRangeSlider (and the needed libraries). You need to include them in your HTML page, in order to gain the client side functionality of the chart. The files are:

    • jquery.jqChart.min.js - this is the jqChart javascript code itself.
    • jquery-1.11.1.min.js - this is the official jQuery library. jqChart is built upon jQuery library version 1.4.3.
    • excanvas.js - it is used from the versions of IE, which dosn't support canvas graphics.
    • jquery.jqRangeSlider.min.js - this is the jqRangeSlider javascript code. It is used when the chart zooming is enabled.
    • jquery.mousewheel.js - it is used for mouse wheel zooming.

  • [js/i18n] - contains the jqChart language packs.

  • [css] - Contains the Css files that the jqChart and the jqRangeSlider need.

  • [samples] - Contains some examples that use the jqChart. For full list of samples plese visit - http://www.jqchart.com/samples

  • [themes] - Contains the themes shipped with the products. It is used from the jqRangeSlider.

Since jqRangeSlider supports jQuery UI Themeroller, any theme compatible with jQuery UI ThemeRoller will work for jqRangeSlider as well. You can download any additional themes directly from jQuery UI's ThemeRoller site available here:

http://jqueryui.com/themeroller

or reference them from Microsoft's / Google's CDN.

    <link rel="stylesheet" type="text/css" media="screen" 
            href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />

Include the Files

jqChart requires jQuery. jQuery 1.11.1 is included in the distribution. To use jqChart include jquery, the jqChart jQuery plugin and optionally the excanvas script for IE support in your web page:

    <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" media="screen" 
            href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/smoothness/jquery-ui.css" />
    <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
    <script src="../js/jquery.mousewheel.js" type="text/javascript"></script>
    <!--[if IE]><script lang="javascript" type="text/javascript" 
            src="../js/excanvas.js"></script><![endif]-->

* IMPORTANT: Use the 'excanvas.js' included in our package. It has some modifications and it is a little different from the standard one.

Add a jqChart container

Add a container (target) to your web page where you want your chart to show up. Be sure to give your target a width and a height:

    <div id="selector" style="width: 500px; height: 300px;"></div>

Create a chart

Then, create the actual chart by calling the jqChart plugin with the id of your target and some data:

$(document).ready(function () {
        $('#selector').jqChart({
            title: { 
                text: 'Chart Title' 
            },
            axes: [
                {
                    type: 'category',
                    location: 'bottom',
                    zoomEnabled: true
                }
            ],
            series: [
                {
                    type: 'column',
                    data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], 
                            ['E', 27], ['F', 85], ['D', 43], ['H', 29]]
                },
                {
                    type: 'line',
                    data: [['A', 69], ['B', 57], ['C', 86], ['D', 23], 
                            ['E', 70], ['F', 60], ['D', 88], ['H', 22]]
                }
            ]
        }
    }