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, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
Features:
- Compatibility - It works in all modern mobile and desktop browsers including the iPhone/iPad
- 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
- Pure
JavaScript - Highcharts needs only two JS files to run: The
highcharts.js core and either the jQuery, MooTools or Prototype
framework.
- Numerous Chart Types - Highcharts supports line,
spline, area, areaspline, column, bar, pie, scatter, angular gauges,
arearange, areasplinerange, columnrange and polar chart types.
- Export
and print - With the exporting module enabled, your users can export
the chart to PNG, JPG, PDF or SVG format at the click of a button, or
print the chart directly from the web page.
- 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.
Installation :
Highcharts
requires two files to run, highcharts.js and either jQuery, MooTools
or Prototype or our own Highcharts Standalone Framework which are
used for some common JavaScript tasks.
Include the JavaScript files in the <head> section of your web page as shown below.
- Use JQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script> - Use Highcharts Standalone Framework
<script src="http://code.highcharts.com/adapters/stanalone-framework.js"></script>
- Alternatively,
load files from your own domain.
The Highcharts files can be downloaded from highcharts.com and put on your webpage.<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>
Creating A Simple Chart:
- Add
a div in your webpage. Give it an id and set a specific width and
height which will be the width and height of your chart.
<div id="container" style="width:100%; height:400px;"></div>
- Initialize
the chart using its constructor Highcharts.Chart, pass the options
object as parameter
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: '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]
}]
});
}); - You should now see this chart on your webpage:
4. If you want to apply a set of options to all charts on the same page, use Highcharts.setOptions
References: