This tutorial shows how to pass the data dynamically to Highcharts using jQuery. No server side script used such as PHP or ASP. So, this tutorial will teach you only passing the data not to create data. If you want to create dynamic data then you should use server side scripting.
What will you learn in this tutorial?
1. Passing dynamic title in highcharts
2. Passing dynamic chart type in highcharts
3. Passing dynamic categories in highcharts
4. Passing dynamic data in highcharts
What all you should pass? see the below:
chart: {
type: chartype
},
title: {
text: chartTitle
},
xAxis: {
categories: chartCategories
},
series: chartData
How do you pass?
See, the one set of values:
chartype = 'bar';
chartTitle = 'Browser Chart';
chartCategories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'];
chartData = [{name: 'Year 1800',data: [107, 31, 635, 203, 2]}, {name: 'Year 1900',data: [133, 156, 947, 408, 6]}, {name: 'Year 2008',data: [973, 914, 4054, 732, 34]}];
I don’t want to stretch this saying the same thing again and again, here is the entire code, just read the comments in the code to understand what is happening!!
<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 values dynamically
var chartype = 'bar';
var chartTitle = 'Browser Chart';
var chartCategories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'];
var chartData = [{name: 'Year 1800',data: [107, 31, 635, 203, 2]}, {name: 'Year 1900',data: [133, 156, 947, 408, 6]}, {name: 'Year 2008',data: [973, 914, 4054, 732, 34]}];
//On page load call the function setDynamicChart and pass the variables
setDynamicChart(chartype, chartTitle, chartCategories, chartData);
//jQuery part - On Click call the function setDynamicChart(dynval) and pass title, chart type, category, data
$('.option').click(function(){
//get the value from 'a' tag
var chartype = $(this).attr('id');
if(chartype == 'data1'){
chartype = 'bar';
chartTitle = 'Browser Chart';
chartCategories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'];
chartData = [{name: 'Year 1800',data: [107, 31, 635, 203, 2]}, {name: 'Year 1900',data: [133, 156, 947, 408, 6]}, {name: 'Year 2008',data: [973, 914, 4054, 732, 34]}];
setDynamicChart(chartype, chartTitle, chartCategories, chartData);
}else if(chartype == 'data2'){
chartype = 'line';
chartTitle = 'Monthly Average Temperature';
chartCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
chartData = [{name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, {name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, {name: 'Berlin',data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, {name: 'London',data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}];
setDynamicChart(chartype, chartTitle, chartCategories, chartData);
}else if(chartype == 'data3'){
chartype = 'column';
chartTitle = 'Monthly Average Rainfall';
chartCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
chartData = [{name: 'Tokyo',data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}, {name: 'New York',data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]}, {name: 'London',data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]}, {name: 'Berlin',data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]}];
setDynamicChart(chartype, chartTitle, chartCategories, chartData);
}else if(chartype == 'data4'){
chartype = 'line';
chartTitle = 'Monthly Average Temperature';
chartData = [{type: 'pie',name: 'Browser share',data: [['Firefox', 45.0],['IE', 26.8],{name: 'Chrome',y: 12.8,sliced: true,selected: true},['Safari', 8.5],['Opera', 6.2],['Others', 0.7]]}];
setDynamicChart(chartype, chartTitle, chartCategories, chartData);
}
});
//function is created so we pass the value dynamically and be able to refresh the HighCharts on every click
function setDynamicChart(chartype, chartTitle, chartCategories, chartData){
$('#container').highcharts({
chart: {
type: chartype
},
title: {
text: chartTitle
},
xAxis: {
categories: chartCategories
},
yAxis: {
min: 0,
title: {
text: 'Value'
}
},
plotOptions: {
//this need only for pie chart
pie: {
allowPointSelect: true,
cursor: 'pointer'
}
},
series: chartData
});
}
});
</script>
</head>
<body>
<div style="width: 50%; margin: 0 auto; height: 100px; text-align:center;">
<a href="javascript:void(0);" class="option" id="data1">Data 1</a>
<a href="javascript:void(0);" class="option" id="data2">Data 2</a>
<a href="javascript:void(0);" class="option" id="data3">Data 3</a>
<a href="javascript:void(0);" class="option" id="data4">Data 4</a>
</div>
<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
Basically in the above code, I’m using a function setDynamicChart() and passing all the four parameters. With the help of jQuery on click event I’m refreshing the Highcharts and passing different values depending on the button clicked!
And to see how this code works, here is the demo for you:
nice ..liked it.. Muah……