Geeks With Blogs
jqChart - Pure HTML5 Charts for jQuery and ASP.NET Web Forms and MVC jqChart takes advantages of HTML5 Canvas to deliver high performance client-side charts and graphs across browsers and devices, including iOS and Android mobile devices.


Official Site | Samples | Download | Documentation | Forum | Twitter


jqChart takes advantages of HTML5 Canvas to deliver high performance client-side charts and graphs across browsers (IE 6+, Firefox, Chrome, Opera, Safari) and devices, including iOS and Android mobile devices.

Some of the key features are:

  • High performance rendering.
  • Animaitons.
  • Scrolling/Zoooming.
  • Real-time chart manipulation.
  • Support for unlimited number of data series and data points.
  • Support for unlimited number of chart axes.
  • True DateTime Axis.
  • Logarithmic and Reversed axis scale.
  • Large set of chart types - Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar.
  • Financial Charts - Stock Chart and Candlestick Chart
  • The different chart types can be easily combined.
  • Sensible defaults for ease of use.

System Requirements

jQuery JavaScript framework is required. We recommend using the latest official stable version of the jQuery library.

Browser Support

jqChart supports all major browsers:

  • Internet Explorer - 6+
  • Firefox
  • Google Chrome
  • Opera
  • Safari


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 first file is "jquery-1.5.1.min.js" - this is the official jQuery library. jqChart is built upon jQuery library version 1.4.3.

    The second file you need is the "excanvas.js" javascript file. It is used from the versions of IE, which dosn't support canvas graphics.

    The third is the jqChart javascript code itself, located in "jquery.jqChart.min.js".

    The last one is the jqRangeSlider javascript, located in "jquery.jqRangeSlider.min.js". It is used when the chart zooming is enabled.

  • [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 - jqChart 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:

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

    <link rel="stylesheet" type="text/css" media="screen" href="" />

Include the Files

jqChart requires jQuery. jQuery 1.5.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="" />
<script src="../js/jquery-1.5.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>
<!--[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="jqChart" 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:

    title: { text: 'Chart Title' },
    series: [
                    type: 'column',
                    title: 'Column',
                    data: [62, 70, 68, 58, 52, 60, 48]


Which will produce a chart like:




That’s all. We created a basic chart using only HTML and JavaScript.


Official Site | Samples | Download | Documentation | Forum | Twitter 

Posted on Saturday, June 11, 2011 11:11 AM | Back to top

Comments on this post: Getting Started with jqChart - HTML5 jQuery Chart Plugin

# jqchart is not working in safari
Requesting Gravatar...
jqchart is working in mozilla and chrome but not working in safari browser...any help...
Left by satyanarayana on Dec 23, 2015 2:05 AM

# re: Getting Started with jqChart - HTML5 jQuery Chart Plugin
Requesting Gravatar...
We are testing it and it is working. Which example doesn't work?
Left by Dragan Matek on Dec 23, 2015 6:51 AM

Your comment:
 (will show your gravatar)

Copyright © jqChart | Powered by: