Custom Events In Highcharts

SibeeshVenu — Tue, 06 Oct 2015 13:38:03 +0000

In this post we will discuss how we can handle custom events in HighChart . HighChart has already given enough events but sometimes we may need to handle some additional events. For example if we need to fire an alert if user double clicks on the points. Here I am using HighChart Drill Down Chart, So As you all know drill down chart is a chart which populate another chart according to the user action, ie if user click on a particular series, a chart with the related data of the clicked series will get loaded. Now we will go and see it in action. I hope you will like this.

Background

I am working in a BI dashboard application, thus recently I got a requirement of giving an alert if user clicks on the chart point. Here I will explain the same with an example of high chart drill down type.

Please see the demo here: Custom Events in Drill Down Chart

Using the code

First of all we will create a page as follows.

[html]

Fire Double Click Events In Highcharts

Fire Double Click Events In Highcharts – Sibeesh Passion (Sibeesh Passion )

[/html]

Next we will add the needed references.

[js]

[/js]

Here you can see we have added a file customEvents.js, please do not forget to add this file. This is much important.

The next step is to load the chart, We can create a chart as follows.

[js]

[/js]

Now if you run your page you can see a drill down chart as follows.

Fire Double Click Events In Highcharts

Now here is the main part, we need to add a plot option to the chart option so that we can track the events. Please add the preceding lines of code.

[js]
plotOptions: {
series: {
point: {
events: {
dblclick: function () {
setTimeout(function () {
alert(‘Double Click Is Not Permitted’);
}, 1000);
return false;
}
}
}
}
}
[/js]

We have created a custom double click event dblclick successfully. In this way you can create custom events in highchart wherever you want, like create click and double click event in axis and label and data labels so on…

That’s all, we did it. Now please find the complete code.

Complete Code

[html]

Fire Double Click Events In Highcharts

Fire Double Click Events In Highcharts – Sibeesh Passion (Sibeesh Passion )

[/html]

Now if you run and double click on any series, you will get an output as follows.

Fire Double Click Events In Highcharts

Please see the JSFiddle link here: Fire Double Click Events In Highcharts

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted this requirement while you play with highchart? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

Generate JSON According To Drill Down Drill Up Events

SibeeshVenu — Sun, 02 Aug 2015 14:53:21 +0000

In this post, we will see how we can we generate or create JSON dynamically according to users drill up and drill down event actions. We will create JSON when user clicks on a drill down chart’s series. We will also learn how we will create a Drill Down Chart. With the help of created JSON we can get the information of which are all the series have been clicked by user or which are all the drill series have been seen by the user. We can do some more things with this JSON.

Background

For the past few weeks, I have been working with the High Chart. And I have got a chance to work with Drill Down chart in High Chart. After implement a drill down chart in my application successfully , I have got an another requirement of creating JSON dynamically according to the user’s drill down and drill up event action.

Practical Usage

Hereby I am going to share the practical usage of the dynamically crated 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 user clicks the zoom button, a dialogue box will be opened with the drill down chart with maximum width and height. The problem we faced is, when user drill the chart to some level and click the zoom button, we were unable to maintain the same drill level in the the chart which is loaded in the dialogue box. Since this functionality was not available in the HighChart itself, We thought to do this our own. For this, we needed the drill level information in which user clicked. So we maintained the information in the format of JSON. And we take the values from this JSON while the new dialogue opens,and apply 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.

[js]

[/js]

Now we need the data for the chart right?

[js]
data: [{
name: ‘Fruits’,
y: 10,
drilldown: ‘fruits’
}, {
name: ‘Cars’,
y: 12,
drilldown: ‘cars’
}, {
name: ‘Countries’,
y: 8
}]
[/js]

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

[js]
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]
]
}]
}
[/js]

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

[js]
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
}]
}]
};
[/js]

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

[js]
// Drill Down Chart Implementation
options.chart.renderTo = ‘container’;
options.chart.type = ‘column’;
var chart1 = new Highcharts.Chart(options);
[/js]

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

[html]

Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion (Sibeesh Passion )

[/html]

Now we are ready to run our chart. Shall we run it? If you run, you will get the output as follows.

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

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 that in browser console. We will also set this value to a div called jsonContent.

We will create a function for creating this JSON first.

[js]
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);
}
}
[/js]

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

[js]
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
}
[/js]

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

[js]
events: {
drilldown: function (e) {
generateDrillDownJSON(e, false);
},
drillup: function (e) {
generateDrillDownJSON(e, true);
}
}
[/js]

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

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

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

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

Complete Code

[html]

Generate JSON According To Drill Down Drill Up Events Demo-Sibeesh Passion

Generate JSON According To Drill Down Drill Up Events – Sibeesh Passion (Sibeesh Passion )

[/html]

Conclusion

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

Kindest Regards
Sibeesh Venu
http://sibeeshpassion.com/

Drill Down Chart – Sibeesh Passion

Custom Events In Highcharts

Generate JSON According To Drill Down Drill Up Events