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.
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:
Download ready plugin from highcharts:
Video Preview
These highcharts you can use for your student project. Highcharts works with html, javascript, json, php, etc.