Topics covered :

What is HighCharts,
HighCharts Customer
Adding Charts to Your Site with Highcharts
What Is Fascinating About Highcharts?
Which Chart to Use When?
Anatomy of Highcharts

-----------------------HighCharts ---------------------------------

Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Highcharts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on.

HighCharts Customer :

Get access to data on 187,125 websites that are Highcharts Customers. We know of 43,055 live websites using Highcharts and an additional 144,070 sites that used Highcharts historically and 642 websites in India.

Adding Charts to Your Site with Highcharts

Everyone deals with data and very often it is presented in large data tables. Representing and reading through long tables on a website can be very cumbersome. Charts are good for letting people understand the change and tendency behind data.

Recently, when I was trying to find an easy way to insert an interactive chart on a website, I found Highcharts and I have been using it in various projects ever since.

Throughout this series of articles, we're going to take a survey of Highcharts, why it's great, and how we can implement it in our own web-based projects.

What Is Fascinating About Highcharts?

It's interactive. You can mouse over an item for more details and you can also click on items in the chart legend to turn them on and off.
Compatibility. It's based on JavaScript, it renders in a web browser, so even IE 6 or an iPad can show you those beautiful charts. Highcharts utilizes other JS frameworks such as jQuery, MooTools, Prototype or Highcharts Standalone framework. You need one of the libraries and highcart.js to create charts.
Many-many chart types. Highcharts supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types. We'll see examples for the most commonly used ones: column, bar, line and pie charts.
Feeding Highcharts is easy. Highcharts can load data from local data, local files or even from a remote server. It can take parsed data from CSV, JSON, XML files or any other database.
Save or print your charts. One of the surprising feature I found is that you can print or export the chart you currently see. One can save a chart as PDF, JPG, PNG or SVG file.
Easy to set up, tuning is not a problem. Add a few lines of code and your data and charts will draw. With its well written user documentation and API reference, beginners won't get lost and experienced developers are welcome.
Flexible license. Using Highcharts is free for non-commercial sites and prices are flexible for commercial projects.
Theme-able. At the moment, there are four predefined modern-looking themes or you can make your very unique one with some taste and CSS-knowledge.

Before using Highcharts the first time, let's see which chart type to use in common tasks.

Which Chart to Use When?

Bar charts and column charts are similar in a way that each uses long rectangles to compare multiple values, but their difference lies in the orientation of their graph. Bar charts are horizontally oriented and column charts are vertical.

In my simple example, I compare an imaginary web shop's sales by source in a monthly distribution (comparing each month's sale with each other). As you can see below, if you want to compare only a small amount of data, and the bar chart fits on the screen with which you're currently working, then your best bet is to go with the bar chart.

In contrast, you should use column charts if you have vertical limitation such as with landscape-oriented screens. See comparison below.

Line charts represent information with the series of data points and straight lines. They show particular data changes at equal intervals of time. It is often used to visualize trend in a time series.

In my example, I use the same data table as I used below to compare multiple data sets. As you can see, it is easy to compare the sales source trending of the previous months.

Pie charts are circular charts divided into sectors where each sector shows the relative size of each value. They are useful when you want to compare data which are part of the whole. Each pie slice represents its numerical value of the sum.

In my example, I show the distribution of different source type sales of a given period.

Anatomy of Highcharts

In order to understand the following code examples, you need to know the basic concepts that make up Highcharts.

These are the primarily parts of a chart:

Title displays the name of a chart on top
Subtitles are placed right under the title
Series refers to one or more data series presented on a chart
Tooltips are descriptions of particular data displayed by hovering over part of a chart
Legend displays the name and/or the symbol of each series on a chart. By clicking on the name of the series in a legend, one can enable or disable the series.
Print and download let's users print or export the chart.