Drawing graphs and charts using HighCharts

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:

          1. 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> 
          2. 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]
                    }]
                });
            });
          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:

          1. http://www.highcharts.com/
          2. http://www.highcharts.com/demo
          3. http://api.highcharts.com/highcharts

          Copyright © 2018 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.