How to integrate Highcharts.js in web application
Chart in the web application is more essentials when it comes in analytic tools. It is more descriptive than numbers. There are many Javascript libraries provides Charts Google charts, AM charts etc. Highcharts is one of the chart Javascript library. It is simple, open source and provides wide variety of different chart. It is free for non-commercial use, however licence needs to purchases for commercial use.
In this article, we will use some example of Highcharts. First download Highcharts library from GitHub and use in your html form.
<head>
<script src="/js/highcharts.js"></script>
</head>Alternatively you can also use bellow CDN file without downloading, just include these lines in the <head> tag of the project.
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>And that's it. You are ready to use Highcharts. Put this tag in the page where you want to render chart.
<div id="highchats" style="width:100%; height:400px;"></div>And then create new <script> tag just above closing </body> tag.
<script type="text/javascript">
var chart = Highcharts.chart({
chart: {
renderTo: 'highchats',
type: 'line'
},
title: {
text: 'Operating systems, 2011-2017'
},
subtitle: {
text: 'Source: wikipedia.org'
},
yAxis: {
title: {
text: 'Number of devices (in Million)'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2011
}
},
series: [{
name: 'Android',
data: [36.7, 89.9, 162.1, 234.1, 260.8, 291.3, 292.7]
}, {
name: 'iOS',
data: [18.6, 35.1, 37.4, 43.8, 61.2, 53.8, 50.6]
}, {
name: 'Windows',
data: [2.6, 3.3, 7.0, 7.2, 9.03, 2.79, 0.34]
}, {
name: 'BlackBerry',
data: [13.8, 9.7, 6.3, 1.4, 1.00, null, null]
}, {
name: 'Symbian',
data: [26.4, 10.4, 1.2, null, null, null, null]
}, {
name: 'Other',
data: [3.5, 3.9, 2.2, 2.0, 2.34, 1.40, 0.34]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>Options
Create Highcharts.Chart object and it will render chart.
var chart = new Highcharts.Chart(options);THe chart option will render map in the renderTo id of type chart the div. Check here options to select your chart type
chart: {
renderTo: 'highchats',
type: 'line'
}The title is the text that will set the title of the cart.
title: {
text: 'Operating systems, 2011-2017'
}The subtitle is text that will set the subtitle of the chart.
subtitle: {
text: 'Source: wikipedia.org'
}The yAxis option will set text on Y-axis in the chart.
yAxis: {
title: {
text: 'Number of devices (in Million)'
}
}The legend option will create Legend in the chart.
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
}tooltip appears when hover over chart series .
tooltip: {
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderRadius: 10,
borderWidth: 3
}series option will display data in the chart. series is an array where each element of this array represents a single line on the chart.
series: [{
name: 'Android',
data: [36.7, 89.9, 162.1, 234.1, 260.8, 291.3, 292.7]
}, {
name: 'iOS',
data: [18.6, 35.1, 37.4, 43.8, 61.2, 53.8, 50.6]
}, {
name: 'Windows',
data: [2.6, 3.3, 7.0, 7.2, 9.03, 2.79, 0.34]
}, {
name: 'BlackBerry',
data: [13.8, 9.7, 6.3, 1.4, 1.00, null, null]
}, {
name: 'Symbian',
data: [26.4, 10.4, 1.2, null, null, null, null]
}, {
name: 'Other',
data: [3.5, 3.9, 2.2, 2.0, 2.34, 1.40, 0.34]
}]Include this CDN to export chart to image, pdf, etc.
<script src="https://code.highcharts.com/modules/export-data.js"></script>You can also change theme by including theme css file. Here are CDN files.You can also create chart using database or csv file. Here is PHP example.
series: [{
data: [<?php echo $data; ?>],
pointStart: 0,
pointInterval
}]
There are so many features and customizations Highcharts is providing. I hope you will like this article.
Copyright 2023 HackTheStuff
