Products

Custom Events In Highcharts

Introduction

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, i.e. if user clicks 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 on 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.

Using the code

First of all we will create a page as follows.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Fire Double Click Events In Highcharts</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     Fire Double Click Events In Highcharts - Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)  
  10.     <br />  
  11.     <br />  
  12.     <br />  
  13.     <div id="container" style="height: 300px"></div>  
  14. </body>  
  15.   
  16. </html>  
Next we will add the needed references. 

  1. <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>  
  2. <script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>  
  3. <script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>  
  4. <script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>  
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.
  1. <script>  
  2.     $(document).ready(function() {  
  3.         // Internationalization  
  4.         Highcharts.setOptions({  
  5.             lang: {  
  6.                 drillUpText: '? Back to {series.name}'  
  7.             }  
  8.         });  
  9.         var options = {  
  10.             chart: {  
  11.                 height: 300,  
  12.                 events: {}  
  13.             },  
  14.             title: {  
  15.                 text: 'Highcharts Drilldown Plugin'  
  16.             },  
  17.             xAxis: {  
  18.                 categories: true  
  19.             },  
  20.             drilldown: {  
  21.                 series: [{  
  22.                     id: 'fruits',  
  23.                     name: 'Fruits',  
  24.                     data: [  
  25.                         ['Apples', 4],  
  26.                         ['Pears', 6],  
  27.                         ['Oranges', 2],  
  28.                         ['Grapes', 8]  
  29.                     ]  
  30.                 }, {  
  31.                     id: 'cars',  
  32.                     name: 'Cars',  
  33.                     data: [{  
  34.                             name: 'Toyota',  
  35.                             y: 4,  
  36.                             drilldown: 'toyota'  
  37.                         },  
  38.                         ['Volkswagen', 3],  
  39.                         ['Opel', 5]  
  40.                     ]  
  41.                 }, {  
  42.                     id: 'toyota',  
  43.                     name: 'Toyota',  
  44.                     data: [  
  45.                         ['RAV4', 3],  
  46.                         ['Corolla', 1],  
  47.                         ['Carina', 4],  
  48.                         ['Land Cruiser', 5]  
  49.                     ]  
  50.                 }]  
  51.             },  
  52.             legend: {  
  53.                 enabled: false  
  54.             },  
  55.             series: [{  
  56.                 name: 'Overview',  
  57.                 colorByPoint: true,  
  58.                 data: [{  
  59.                     name: 'Fruits',  
  60.                     y: 10,  
  61.                     drilldown: 'fruits'  
  62.                 }, {  
  63.                     name: 'Cars',  
  64.                     y: 12,  
  65.                     drilldown: 'cars'  
  66.                 }, {  
  67.                     name: 'Countries',  
  68.                     y: 8  
  69.                 }]  
  70.             }]  
  71.         };  
  72.         // Drill Down Chart Implementation  
  73.         options.chart.renderTo = 'container';  
  74.         options.chart.type = 'column';  
  75.         var chart1 = new Highcharts.Chart(options);  
  76.     });  
  77. </script>  
Now if you run your page you can see a drill down chart as follows.

Fire Double Click Events In Highcharts

Figure 1: 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 following lines of code.

  1. plotOptions: {  
  2.     series: {  
  3.         point: {  
  4.             events: {  
  5.                 dblclick: function() {  
  6.                     setTimeout(function() {  
  7.                         alert('Double Click Is Not Permitted');  
  8.                     }, 1000);  
  9.                     return false;  
  10.                 }  
  11.             }  
  12.         }  
  13.     }  
  14. }  
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

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Fire Double Click Events In Highcharts</title>  
  6.     <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>  
  7.     <script src="http://sibeeshpassion.com/content/scripts/highcharts.js"></script>  
  8.     <script src="http://sibeeshpassion.com/content/scripts/drilldown.js"></script>  
  9.     <script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>  
  10.     <script>  
  11.         $(document).ready(function() {  
  12.             // Internationalization  
  13.             Highcharts.setOptions({  
  14.                 lang: {  
  15.                     drillUpText: '? Back to {series.name}'  
  16.                 }  
  17.             });  
  18.             var options = {  
  19.                 chart: {  
  20.                     height: 300,  
  21.                     events: {}  
  22.                 },  
  23.                 title: {  
  24.                     text: 'Highcharts Drilldown Plugin'  
  25.                 },  
  26.                 xAxis: {  
  27.                     categories: true  
  28.                 },  
  29.                 drilldown: {  
  30.                     series: [{  
  31.                         id: 'fruits',  
  32.                         name: 'Fruits',  
  33.                         data: [  
  34.                             ['Apples', 4],  
  35.                             ['Pears', 6],  
  36.                             ['Oranges', 2],  
  37.                             ['Grapes', 8]  
  38.                         ]  
  39.                     }, {  
  40.                         id: 'cars',  
  41.                         name: 'Cars',  
  42.                         data: [{  
  43.                                 name: 'Toyota',  
  44.                                 y: 4,  
  45.                                 drilldown: 'toyota'  
  46.                             },  
  47.                             ['Volkswagen', 3],  
  48.                             ['Opel', 5]  
  49.                         ]  
  50.                     }, {  
  51.                         id: 'toyota',  
  52.                         name: 'Toyota',  
  53.                         data: [  
  54.                             ['RAV4', 3],  
  55.                             ['Corolla', 1],  
  56.                             ['Carina', 4],  
  57.                             ['Land Cruiser', 5]  
  58.                         ]  
  59.                     }]  
  60.                 },  
  61.                 legend: {  
  62.                     enabled: false  
  63.                 },  
  64.                 plotOptions: {  
  65.                     series: {  
  66.                         point: {  
  67.                             events: {  
  68.                                 dblclick: function() {  
  69.                                     setTimeout(function() {  
  70.                                         alert('Double Click Is Not Permitted');  
  71.                                     }, 1000);  
  72.                                     return false;  
  73.                                 }  
  74.                             }  
  75.                         }  
  76.                     }  
  77.                 },  
  78.                 series: [{  
  79.                     name: 'Overview',  
  80.                     colorByPoint: true,  
  81.                     data: [{  
  82.                         name: 'Fruits',  
  83.                         y: 10,  
  84.                         drilldown: 'fruits'  
  85.                     }, {  
  86.                         name: 'Cars',  
  87.                         y: 12,  
  88.                         drilldown: 'cars'  
  89.                     }, {  
  90.                         name: 'Countries',  
  91.                         y: 8  
  92.                     }]  
  93.                 }]  
  94.             };  
  95.             // Drill Down Chart Implementation  
  96.             options.chart.renderTo = 'container';  
  97.             options.chart.type = 'column';  
  98.             var chart1 = new Highcharts.Chart(options);  
  99.         });  
  100.     </script>  
  101. </head>  
  102.   
  103. <body>  
  104.     Fire Double Click Events In Highcharts - Sibeesh Passion (<a href="http://sibeeshpassion.com">Sibeesh Passion </a>)  
  105.     <br />  
  106.     <br />  
  107.     <br />  
  108.     <div id="container" style="height: 300px"></div>  
  109. </body>  
  110.   
  111. </html>  

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

Fire Double Click Events In Highcharts

Figure 2: Fire Double Click Events In Highcharts

Please see the JSFiddle link here.

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?

If you have any questions, then please mention it in the comments section.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs