Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Features
Compatible
It works in all modern browsers including the iPhone and Internet Explorer from version 6. Standard browsers use the Canvas element and in some cases SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.
Free for non-commercial

Do you want to use Highcharts for a personal website, a school site or a non-profit organisation? Then you don’t need the author’s permission, just go on and use Highcharts. For commercial websites and projects, see License and Pricing.
Pure JS, no BS!

Highcharts is solely based on native browser technologies and doesn’t require client side plugins like Flash or Java. Furthermore you don’t need to install anything on your server. No PHP or ASP.NET. Highcharts needs three JS files to run: The highcharts.js core, a canvas emulator for IE, and either the jQuery or the MooTools framework. One of these is most likely already in use in your web page.
Numerous chart types

Highcharts supports line, spline, area, areaspline, column, bar, pie and scatter chart types. Any of these can be combined in one chart.
Simple configuration syntax

Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.
Tooltip labels

On hovering the chart Highcharts can display a tooltip text with information on each point and series. The tooltip follows as the user moves the mouse over the graph, and great efforts have been taken to make it stick to the nearest point as well as making it easy to read a point that is below another point.
Datetime axis

75% of all charts with an X and Y axis have a date-time X axis. Therefore Highchart is very intelligent about time values. With milliseconds axis units, Highchart determines where to place the ticks so that they always mark the start of the month or the week, midnight and midday, the full hour etc.
Zooming

By zooming in on a chart you can examine an especially interesting part of the data more closely. Zooming can be in the X or Y dimension, or both.

Inverted chart or reversed axis

Sometimes you need to flip over your chart and make the X axis appear vertical, like for example in a bar chart. Reversing the axis, with the highest values appearing closest to origo, is also supported.
Text rotation for labels

All text labels, including axis labels, data labels for the point and axis titles, can be rotated in any angle.
How to use:
1) Highcharts uses either jQuery or MooTools for some common JavaScript tasks. In addition, Internet Explorer needs ExCanvas which emulates the Canvas element. You need to include these JavaScript files in the section of your web page. If you already have jQuery or MooTools included, you can skip the first one.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/highcharts/excanvas-compressed.js"></script>   

2) In a < script > tag in the < head > of your web page, or in a separate .js file, add the JavaScript code to initialize the chart. Note that the id of the div where you want to put the chart (see #3) is given in the renderTo option below:

 <script type="text/javascript">
   $(document).ready(function() {
      var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges]
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });
</script>  

The code above uses the jQuery specific way of launching code on document ready, as explained at the jQuery website. If you use MooTools, instead of the $(document).ready() syntax you do it slightly differently:

 <script type="text/javascript">
   window.addEvent('domready', function() {
      var chart1 = .......  

3) Add a div in your webpage. Give it an id refering to the renderTo option in #2, and set a specific width and height which will be the width and height of your chart.

  <div id="chart-container-1" style="width: 600px; height: 400px"></div> 

How to set up the options

Highcharts uses a JavaScript object structure to define the options. The options are nested into categories. The options are mainly strings and numbers, but some are arrays, other objects or even functions. When you initialize the chart using new Highcharts.Chart, the options object is the first and only parameter you pass.

If you want to apply a set of options to all charts on the same page, use Highcharts.setOptions like shown below.

See #3 above for an example of an options object. For more examples see the demo gallery. For a full reference of the options available, see the options reference.

Demo: http://www.highcharts.com/demo
Download: http://www.highcharts.com/downloads/zips/Highcharts.zip
Source: http://www.highcharts.com/

Related Listings:

1. XML SWF Charts XML/SWF Charts is a simple, yet powerful tool to create...
2. Simple Accessible Charts Easy, fast, accessible way to display simple Data and beautify...
3. Dojox Data Chart Script The latest addition in the Dojo 1.3 release is the...
4. Accessible Charts with Canvas and jQuery Script Data visualization in HTML has long been tricky to achieve....
5. Conditionally-Colored Flex Charts The charting in Flex is a pretty good tool, but...

Do you like this post?

Email: