Generate JSON Based On Drill Down and Drill Up Events

Introduction

This article shows how to generate or create JSON dynamically based on the user's drill up and drill down event actions. We will create JSON when the user clicks on a drill-down chart series. We will also learn how to create a Drill Down Chart. Using the created JSON we can get the information on which series have been clicked by the user or which drill series have been seen by the user. We can do some more things with this JSON.

Please see this article on my blog here.

Background

For the past few weeks, I have been working with the High Chart. And I had a chance to work with Drill Down chart in High Chart. After implementing a drill-down chart in my application successfully, I got another requirement for creating JSON dynamically based on the user's drill down and drill up event action.

Practical Usage

Hereby I will share the practical usage of the dynamically created JSON. We have used this approach in our application. The task was simple but tough though. We have implemented a zooming functionality for each chart we have created. So we placed a zoom button above the chart. When the user clicks the zoom button, a dialogue box will open with the drill-down chart with maximum width and height.

The problem we encountered is when the user drills the chart to some level and clicks the zoom button, we were unable to maintain the same drill level in the chart that is loaded in the dialogue box. Since this functionality was not available in the HighChart itself, we thought to do this on our own. For this, we needed the drill level information in which the user clicked. So we maintained the information in the JSON format. And we take the values from this JSON when the new dialogue opens and is applied this to the chart.

Demo

You can see the demo here: Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion.

Using the code

The first thing we need to do is to load the required files.

<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>

Now we need the data for the chart.

data: [{
name: 'Fruits',
y: 10,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 12,
drilldown: 'cars'
}, {
name: 'Countries',
y: 8
}]

Since we are creating a drill down chart, we need to set the drill down data also for the chart.

drilldown: {
series: [{
id: 'fruits',
name: 'Fruits',
data: [
['Apples', 4],
['Pears', 6],
['Oranges', 2],
['Grapes', 8]
]
}, {
id: 'cars',
name: 'Cars',
data: [{
name: 'Toyota',
y: 4,
drilldown: 'toyota'
},
['Volkswagen', 3],
['Opel', 5]
]
}, {
id: 'toyota',
name: 'Toyota',
data: [
['RAV4', 3],
['Corolla', 1],
['Carina', 4],
['Land Cruiser', 5]
]
}]
}

So we have set the data and now we need to set complete options for our chart, we will set this in a variable.

var options = {
chart: {
height: 300,
events: {
drilldown: function(e) {},
drillup: function(e) {}
}
},
title: {
text: 'Highcharts Drilldown Plugin'
},
xAxis: {
categories: true
},
drilldown: {
series: [{
id: 'fruits',
name: 'Fruits',
data: [
['Apples', 4],
['Pears', 6],
['Oranges', 2],
['Grapes', 8]
]
}, {
id: 'cars',
name: 'Cars',
data: [{
name: 'Toyota',
y: 4,
drilldown: 'toyota'
},
['Volkswagen', 3],
['Opel', 5]
]
}, {
id: 'toyota',
name: 'Toyota',
data: [
['RAV4', 3],
['Corolla', 1],
['Carina', 4],
['Land Cruiser', 5]
]
}]
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
shadow: false
},
pie: {
size: '80%'
}
},
series: [{
name: 'Overview',
colorByPoint: true,
data: [{
name: 'Fruits',
y: 10,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 12,
drilldown: 'cars'
}, {
name: 'Countries',
y: 8
}]
}]
};

Everything is set now, what else we need then? Yes we need to assign this option to our chart!

// Drill Down Chart Implementation
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);

As you can see in the preceding code, we are rendering the chart to a div called container. So we need to create a div.

<body>
Generate JSON According To Drill Down Drill Up Events - Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)
<br/>
<br/>
<br/>
<div id="container" style="height: 300px"></div>
<div id="jsonContent"></div>
</body>

Now we are ready to run our chart. Shall we run it? When you run it you will get the following output.

Generate-JSON_According-To-Drill-Down-Drill-Up-Events1

Now if you drill down to Cars you will get the following output.

Generate-JSON_According-To-Drill-Down-Drill-Up-Events2

It is time to create the JSON now. We will save the JSON value to sessionStorage. If you are new to sessionStorage and localStorage you can read it here: Storage Mechanism in HTML5.

Once we assign the value to the storage, you can see it in the browser console. We will also set this value to a div called jsonContent.

We will create a function for creating this JSON first.

function generateDrillDownJSON(e, isDrillUp) {
try {
if (isDrillUp) {
if (myJSON != null && myJSON.length > 0) {
removeArrayElementByIndex(myJSON, myJSON.length - 1);
}
sessionStorage.setItem('DrillDownJSON', JSON.stringify(myJSON));
$("#jsonContent").html('JSON content is: ').append(JSON.stringify(myJSON));
} else {
myJSON.push({
name: e.point.name,
level: myJSON.length + 1,
});
sessionStorage.setItem('DrillDownJSON', JSON.stringify(myJSON));
$("#jsonContent").html('JSON content is: ').append(JSON.stringify(myJSON));
}
} catch (e) {
console.log('generateHierarchyJSON :' + e.message);
}
}

As you can see we are handling the drill events in this function. If it is a drill up event then we are removing the values from the JSON created. To remove, we are creating another function.

function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
}

We will call our function generateDrillDownJSON in both drill down and drill up events.

events: {
drilldown: function(e) {
generateDrillDownJSON(e, false);
},
drillup: function(e) {
generateDrillDownJSON(e, true);
}
}

It is time to see our implementation and check whether or not it is working properly. So run your application now and click on the Cars series. You can see the JSON created in our div.

Generate-JSON_According-To-Drill-Down-Drill-Up-Events3

If you need to see the JSON value in the session storage, please click F12 and check-in session storage.

Generate-JSON_According-To-Drill-Down-Drill-Up-Events5

Now we will try the drill up event and check the JSON value.

Generate-JSON_According-To-Drill-Down-Drill-Up-Events6

Generate-JSON_According-To-Drill-Down-Drill-Up-Events7

You can see that when drill up, we are deleting those values from JSON.

Complete Code

<!DOCTYPE html>
<html>
<head>
<title>Generate JSON According To Drill Down Drill Up Events Demo-Sibeesh Passion</title>
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>
<script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>
<script>
var myJSON = [];
$(document).ready(function() {
// Internationalization
Highcharts.setOptions({
lang: {
drillUpText: '◁ Back to {series.name}'
}
});
var options = {
chart: {
height: 300,
events: {
drilldown: function(e) {
generateDrillDownJSON(e, false);
},
drillup: function(e) {
generateDrillDownJSON(e, true);
}
}
},
title: {
text: 'Highcharts Drilldown Plugin'
},
xAxis: {
categories: true
},
drilldown: {
series: [{
id: 'fruits',
name: 'Fruits',
data: [
['Apples', 4],
['Pears', 6],
['Oranges', 2],
['Grapes', 8]
]
}, {
id: 'cars',
name: 'Cars',
data: [{
name: 'Toyota',
y: 4,
drilldown: 'toyota'
},
['Volkswagen', 3],
['Opel', 5]
]
}, {
id: 'toyota',
name: 'Toyota',
data: [
['RAV4', 3],
['Corolla', 1],
['Carina', 4],
['Land Cruiser', 5]
]
}]
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
shadow: false
},
pie: {
size: '80%'
}
},
series: [{
name: 'Overview',
colorByPoint: true,
data: [{
name: 'Fruits',
y: 10,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 12,
drilldown: 'cars'
}, {
name: 'Countries',
y: 8
}]
}]
};
// Drill Down Chart Implementation
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);
});
function generateDrillDownJSON(e, isDrillUp) {
try {
if (isDrillUp) {
if (myJSON != null && myJSON.length > 0) {
removeArrayElementByIndex(myJSON, myJSON.length - 1);
}
sessionStorage.setItem('DrillDownJSON', JSON.stringify(myJSON));
$("#jsonContent").html('JSON content is: ').append(JSON.stringify(myJSON));
} else {
myJSON.push({
name: e.point.name,
level: myJSON.length + 1,
});
sessionStorage.setItem('DrillDownJSON', JSON.stringify(myJSON));
$("#jsonContent").html('JSON content is: ').append(JSON.stringify(myJSON));
}
} catch (e) {
console.log('generateHierarchyJSON :' + e.message);
}
}
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
}
</script>
</head>
<body>
Generate JSON According To Drill Down Drill Up Events - Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)
<br/>
<br/>
<br/>
<div id="container" style="height: 300px"></div>
<div id="jsonContent"></div>
</body>
</html>

Conclusion

I hope you liked my article. Please share your valuable feedback and suggestions. Thanks in advance.

35 Comments

Join the conversation! Your thoughts help the community grow.

Parameswaran R9y ago
Hi , Can u pls let me know. Are you provide dynamic data or Static data to Chart? If u provide dynamic data means they Why u have mentioned (hot code) fruits Cars, apple ,pears,orange , Toyota ,Volkswagen like that. I need to display dynamic data it from sql table. Can pls. Iam novice to web application and MVC..
- Parameswaran R9y ago
  Hi Sibeesh. Are you there? If available pls let us to how to pass dynamic data to drill down chart?
- Sibeesh Venu9y ago
  Hey Hi, Sorry for my late response, I was not able to login for few days. Yes, you can generate dynamic data on click and redraw the chart.
Sibeesh Venu10y ago
Sthitaprajnya Debasis Nayak Thanks a lot
Sibeesh Venu10y ago
Vignesh Mani Thanks a lot
Sthitaprajnya Debasis Nayak10y ago
Congrats !!! "Article of The Day"
Vignesh Mani10y ago
Nice article.
Sibeesh Venu10y ago
Mohamed Gani Mn Thanks much
Mohamed Gani Mn11y ago
Much better Article sir
Sibeesh Venu11y ago
Priyaranjan K S Thanks buddy
Priyaranjan K S11y ago
Good one Sibi ..
Sibeesh Venu11y ago
Mahsa Hassankashi thanks a lot
Mahsa Hassankashi11y ago
Great , thanks
Sibeesh Venu11y ago
Vaikesh K P Thank you
Sibeesh Venu11y ago
Santhakumar Munuswamy Thank you
Sibeesh Venu11y ago
Manas Mohapatra Thank you
Vaikesh K P11y ago
Good article .
Santhakumar Munuswamy11y ago
Good Article. Thanks for sharing
Manas Mohapatra11y ago
Great Work...
Sibeesh Venu11y ago
Rakesh Chavda Thanks buddy
Sibeesh Venu11y ago
Nilesh Jadav Thanks buddy
Sibeesh Venu11y ago
Mohammed Ibrahim Thanks dude
Rakesh11y ago
Good Work sirji
Nilesh Jadav11y ago
Nice work great Sibeesh Venu
Mohammed Ibrahim11y ago
gud work dude
Sibeesh Venu11y ago
Gopi Chand Thanks a lot buddy
Sibeesh Venu11y ago
Karthikeyan K Thanks a lot buddy
Gopi Chand11y ago
Great one..Sibeesh and cheers for your century :)
Karthikeyan K11y ago
Great works sir :)...Congrats for completed 100 articles
Sibeesh Venu11y ago
Pankaj Kumar Choudhary Thank you
Pankaj Kumar Choudhary11y ago
Nice Article and congrats for completed 100 articles..........
Sibeesh Venu11y ago
Sandeep Kumar Thanks buddy
Sandeep Kumar11y ago
Nice Article Sir :)
Sibeesh Venu11y ago
Rajeesh Menoth Thanks buddy
Rajeesh Menoth11y ago
Congrats Sibeesh Venu for you completed 100 articles...good one