Highcharts Tutorial – Tutorial on Creating Charts

In this tutorial we will explain how to create charts using HighCharts plugin. Highcharts is the web based charting ready script developed using Javascript. Highcharts provides different types of charts i.e; Line chart, Area chart, Bar chart, Pie chart, Column chart, Scatter chart, bubble chart, 3D chart, WorldMap chart, Tree maps and many more. Highcharts ready script reduces huge time because it has many inbuilt features. It works in any browser, Android phones, iphone, etc.

Highcharts Tutorial - Tutorial on Creating Charts

Types of highcharts:

  • Line charts
  • Area charts
  • Column and bar charts
  • Pie charts
  • Scatter and bubble charts
  • Combinations
  • Styled mode (CSS styling)
  • Dynamic charts
  • 3D charts
  • Gauges
  • Heat and tree maps
  • and Many more

How to work with chart:

In every page of demo charts javascript has created. You have to do modify JSON codings. There are many codings inside the plugin but you have to make changes in html and javascript file. Highcharts use a JavaScript object structure to define the options or settings of a chart.

Highcharts.chart('container', {
    chart: {
        type: 'area',
        inverted: true
    },
    title: {
        text: 'Average fruit consumption during one week'
    },
    subtitle: {
        style: {
            position: 'absolute',
            right: '0px',
            bottom: '10px'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -150,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
        categories: [
            'Monday',
            'Tuesday',
            'Wednesday',
            'Thursday',
            'Friday',
            'Saturday',
            'Sunday'
        ]
    },
    yAxis: {
        title: {
            text: 'Number of units'
        },
        allowDecimals: false,
        min: 0
    },
    plotOptions: {
        area: {
            fillOpacity: 0.5
        }
    },
    series: [{
        name: 'Student Project Guide',
        data: [3, 4, 3, 5, 4, 10, 12]
    }, {
        name: 'Free Student Projects',
        data: [1, 3, 4, 3, 3, 5, 4]
    }]
});
	

You can view the Highcharts Live demo in the following link:

demo


Download ready plugin from highcharts:

download


Video Preview

These highcharts you can use for your student project. Highcharts works with html, javascript, json, php, etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.