Highcharts – Pass data dynamically with jQuery!

pass-dynamic-data

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:

demo

 

One thought on “Highcharts – Pass data dynamically with jQuery!

Leave a Reply

Theme: Overlay by Kaira
Agurchand