Highcharts is a pure JavaScript library which offers an easy way of adding an interactive charts to your website or web application. Highcharts at present supports line, area, scatter, areaspline, column, bar, spline, pie, angular gauges, areasplinerange, arearange, columnrange, error bars, box plot, funnel, bubble, waterfall and polar chart types.
+ points of using highcharts:
- Compatibility - It is compatible with all modern browsers including the iPhone/iPad and Internet Explorer from version 6.
- Free for non-commercial - It is free for a personal website, a school site or a non-profit organisation, there is no need of the author's permission.
- Open - This is the main feature of Highcharts that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. Also permits for personal modifications and a ample flexibility.
- Pure JavaScript - Highcharts is based on innate browser technologies. It does not depend on any client side plugins like Java or Flash. There is also no need to install anything on your server. No PHP or ASP.NET. It only requires two JS files to run: The highcharts.js core and each of the jQuery, MooTools or Prototype framework.
- Numerous Chart Types - Highcharts supports line, column, area, areaspline, spline, bar, scatter, pie, angular gauges, arearange, column range, areasplinerange and polar chart types.
- Simple Configuration Syntax - No special programming skills are required for its configuration. The choices are given in a JavaScript object notation structure, which is usually a set of keys and values connected by colons, separated by commas and grouped by curly brackets.
- Dynamic - Even after creation of chart, you can add, remove and modify series and points or even axes whenever you want with the help of full API.
- Multiple Axes - In case, you want to compare variables that are not on the same scale, Highcharts lets you assign an y axis for each series - or an x axis if you want to compare data sets of different categories. Each axis can be placed to the right or left, top or bottom of the chart. All options can be set individually, including reversing, styling and position.
- Tooltip Labels - Highcharts can show a tooltip text with information on each point and series. The tooltip follows as the user moves the mouse over the graph, and efforts have been taken to make it stick to the nearest point and making it easy to read a point that is below another point.
- Date-time Axis - Almost 75% of all charts with an X and Y axis have a date-time X axis. Highchart is really smart about time values. With milliseconds axis units, Highcharts decides where to place the ticks in order that they always mark the start of the month or the week, midnight and midday, the full hour etc.
- Export and print - After enabling the exporting module, users can export the chart to PDF, SVG, PNG or JPG format or can be printed directly from the web page.
- Zooming - Zooming in, can provide you with a view of the data more closely. It can be done in the X or Y dimension, or both.
- External Data Loading - Highcharts takes the data in a JavaScript array, which can further be defined in the local configuration object, in a separate file or even on a different site. Besides this, the data can be handled over to Highcharts in any form, and a callback function used to parse the data into an array.
- Angular gauges - Perfect for dashboards. Provides speedometer-like charts, which is easy to read at a quick glance.
- Inverted Chart or Reversed Axis - In case, you need to flip over your chart and make the X axis appear vertical, like for instance 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.
Implementation of Highcharts at Srijan:
- Highcharts in Srijan is used with Drupal 7. It has been used for making students examination portal, it displays students progress report by which it becomes easy to find the current status. http://www.highcharts.com/demo/line-basic is used here.