In this tutorial we are going to see how it is possible to dynamically change the chart type only with jQuery. Highcharts is an open source javascript library which helps us to create Interactive charts easily.
In Highcharts there are many types of charts you can create, but most used types are,
1. Line Chart
2. Bar Chart
3. Column Chart
4. Pie Chart
The above charts are used widely all over the world, So, in this demo I’m going to show you how to easily change the chart type with a very minimal JavaScript.
You can easily understand if you have a little knowledge in jQuery and JavaScript.
Basically in Highcharts, you can change the chart type easily, for eg:
//for line chart
chart: {
type: 'line'
}
//for bar chart
chart: {
type: 'bar'
}
//for column chart
chart: {
type: 'column'
}
//for pie chart
chart: {
type: 'pie'
}
So, by changing the value of type in Highcharts will be able to get the result we want.
To do that with JavaScript, all we have to do is pass the value with a variable. To make it so simple I have used jQuery over JavaScript.
Here is the entire script, just read the commented lines in the script to understand how it works:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style>
a{
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
text-decoration:none;
float:left;
margin:4px;
text-align:center;
display: block;
color: green;
}
</style>
<script>
$(function () {
//create a variable so we can pass the value dynamically
var chartype = 'line';
//On page load call the function setDynamicChart
setDynamicChart(chartype);
//jQuery part - On Click call the function setDynamicChart(dynval) and pass the chart type
$('.option').click(function(){
//get the value from 'a' tag
var chartype = $(this).attr('id');
setDynamicChart(chartype);
});
//function is created so we pass the value dynamically and be able to refresh the HighCharts on every click
function setDynamicChart(chartype){
$('#container').highcharts({
chart: {
type: chartype
},
title: {
text: 'Change Chart type dynamically with jQuery'
},
xAxis: {
categories: ['Firefox', 'IE', 'Chrome', 'Safari', 'Opera', 'Others']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
plotOptions: {
//this need only for pie chart
pie: {
allowPointSelect: true,
cursor: 'pointer'
}
},
series: [{
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 15.2],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
}
});
</script>
</head>
<body>
<div style="width: 50%; margin: 0 auto; height: 100px; text-align:center;">
<a href="javascript:void(0);" class="option" id="line">Line Chart</a>
<a href="javascript:void(0);" class="option" id="bar">Bar Chart</a>
<a href="javascript:void(0);" class="option" id="column">Column Chart</a>
<a href="javascript:void(0);" class="option" id="pie">Pie Chart</a>
</div>
<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
If you see the above code, I have created a function so it will be easy to refresh the Highchart and pass the value.
For your better understanding see the demo as well.
Genial , esto me servirá mucho gracias! 😀
Great example!!
Thank you 🙂