HTML 5

Drag and Drop the Legend and Maintain the Position in Chart

Introduction
 
Today we will learn how to create a drag-able legend and maintain that position in the chart area, so that once we drag and drop the legend, even if we reload the chart again, it will take the legend position from the session storage, where we have set the values when dropping the legend. Cool, right?
 
Please see this article in my blog 
 
Background
 
For the past few weeks I have been working in Charts, so a few days ago I got a requirement to make a drag-able legend and maintain the position. As you all know, everyone expects the best from their products, so I began working to satisfy my client by giving them all the feasible options in the chart. Once I was done with that it was good.
 
Load the required files
 
To start, we must load some files, you can determine the files below.
  1.    <script src="Scripts/jquery-1.11.1.min.js"></script>  
  2.    <script src="Scripts/highcharts.js"></script>  
  3.    <script src="Scripts/highcharts-more.js"></script>  
  4.    <script src="Scripts/draggable-legend.js"></script>  
Creating UI elements
 
Now we need some UI elements to load the chart and show the drag and drop position. We will show the position values while the user drags and drops the legend, so that it looks more active.
  1.     <div id="container" >"min-width: 310px; height: 400px; margin: 0 auto"></div>  
  2.     Legend X: <input id="txtLegendX" type="number" /> <br />  
  3.     Legend X: <input id="txtLegendY" type="number" />   
Creating options of chart

The next step we need is to set the options of the chart. Please find the following settings. 
  1. var options = {  
  2.                 title: {  
  3.                     text: 'Worked hours in a week'  
  4.                 },  
  5.                 xAxis: {  
  6.                     categories: ['Developing', 'Maitenance', 'Marketing', 'Business', 'Admin']  
  7.                 },  
  8.                 series: [{  
  9.                     type: 'column',  
  10.                     name: 'Monday',  
  11.                     data: [3, 2, 1, 3, 4]  
  12.                 }, {  
  13.                     type: 'column',  
  14.                     name: 'Tuesday',  
  15.                     data: [2, 3, 5, 7, 6]  
  16.                 }, {  
  17.                     type: 'column',  
  18.                     name: 'Wednesday',  
  19.                     data: [4, 3, 3, 9, 0]  
  20.                 }, {  
  21.                     type: 'column',  
  22.                     name: 'Thursday',  
  23.                     data: [4, 3, 3, 9, 0]  
  24.                 }, {  
  25.                     type: 'column',  
  26.                     name: 'Friday',  
  27.                     data: [4, 3, 3, 9, 0]  
  28.                 }, {  
  29.                     type: 'spline',  
  30.                     name: 'Thursday',  
  31.                     data: [3, 2.67, 3, 6.33, 3.33],  
  32.                     marker: {  
  33.                         lineWidth: 2,  
  34.                         lineColor: Highcharts.getOptions().colors[3],  
  35.                         fillColor: 'white'  
  36.                     }  
  37.                 }],  
  38.                 legend: {  
  39.                     enabled: true,  
  40.                     layout: 'vertical',  
  41.                     backgroundColor: 'white',  
  42.                     align: 'left',  
  43.                     verticalAlign: 'top',  
  44.                     y: 50,  
  45.                     x: 50,  
  46.                     borderWidth: 1,  
  47.                     borderRadius: 0,  
  48.                     title: {  
  49.                         text: '::Drag Me'  
  50.                     },  
  51.                     floating: true,  
  52.                     draggable: true,  
  53.                     zIndex: 20  
  54.                 }  
  55.             };  
In the preceding code block we have set the series and other settings including the legend. Please note that we have set the draggable and floating property to true. You can customize all of these properties as you need to.
  1. floating: true,    
  2. draggable: true,  
Now if you run your application, you will get output as follows.
 
 
So our application is working fine, isn't it?
 
Changes in draggable-legend.js
 
To continue with the process, we must make some changes in the draggable-legend.js. You can see the changes below. If you download the source code attached, you can see the changes by default.
  1. addEvent(chart.container, 'mousemove', function (e) {  

  3. });  
I will include some code for our purposes in the preceding function in draggable-legend.js. At the end of the specified function I am including the following code block. 
  1. $("#txtLegendX").val(options.x);  
  2. $("#txtLegendY").val(options.y);  
  3. sessionStorage.setItem("legendx", options.x);  
  4. sessionStorage.setItem("legendy", options.y);  
The purpose of that code block is to set the value to the session storage and the UI element. Now we will run our application and see the output.
 
 
Now if you drag and drop the legend somewhere else, you can see that the values specified in the text boxes has changed.
 
 
No we will check whether the values are updated to the session storage in the browser console.
 
 
Cool, it is updated, we are happy.
 
Now we need to retain this position even if the user reloads the chart, right? Normally what happens is, the chart will be loaded with the initial settings we have set in the option. 
 
Maintain the legend position
 
To maintain the legend position, we must apply the legend position to the chart, we can take the values from the session storage where we already set the values. 
  1. if (sessionStorage.getItem("legendx") != null && typeof sessionStorage.getItem("legendx") != 'undefined' && sessionStorage.getItem("legendy") != null && typeof sessionStorage.getItem("legendy") != 'undefined') {  
  2.                 options.legend.x = parseInt(sessionStorage.getItem("legendx"));  
  3.                 options.legend.y = parseInt(sessionStorage.getItem("legendy"));  
  4.                 $("#txtLegendX").val(sessionStorage.getItem("legendx"));  
  5.                 $("#txtLegendY").val(sessionStorage.getItem("legendy"));  
  6.             }  
  7.             $('#container').highcharts(options);  
We are checking the session storage values and applying values to the options and we provide that options to the chart. Sounds good? So our complete code for this implementation is as follows.
 
Complete code
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Dragable Legend - SibeeshPassion</title>  
  5.     <script src="Scripts/jquery-1.11.1.min.js"></script>  
  6.     <script src="Scripts/highcharts.js"></script>  
  7.     <script src="Scripts/highcharts-more.js"></script>  
  8.     <script src="Scripts/draggable-legend.js"></script>  
  9.     <script>  
  10.         $(function () {  
  11.             var options = {  
  12.                 title: {  
  13.                     text: 'Worked hours in a week'  
  14.                 },  
  15.                 xAxis: {  
  16.                     categories: ['Developing', 'Maitenance', 'Marketing', 'Business', 'Admin']  
  17.                 },  
  18.                 series: [{  
  19.                     type: 'column',  
  20.                     name: 'Monday',  
  21.                     data: [3, 2, 1, 3, 4]  
  22.                 }, {  
  23.                     type: 'column',  
  24.                     name: 'Tuesday',  
  25.                     data: [2, 3, 5, 7, 6]  
  26.                 }, {  
  27.                     type: 'column',  
  28.                     name: 'Wednesday',  
  29.                     data: [4, 3, 3, 9, 0]  
  30.                 }, {  
  31.                     type: 'column',  
  32.                     name: 'Thursday',  
  33.                     data: [4, 3, 3, 9, 0]  
  34.                 }, {  
  35.                     type: 'column',  
  36.                     name: 'Friday',  
  37.                     data: [4, 3, 3, 9, 0]  
  38.                 }, {  
  39.                     type: 'spline',  
  40.                     name: 'Thursday',  
  41.                     data: [3, 2.67, 3, 6.33, 3.33],  
  42.                     marker: {  
  43.                         lineWidth: 2,  
  44.                         lineColor: Highcharts.getOptions().colors[3],  
  45.                         fillColor: 'white'  
  46.                     }  
  47.                 }],  
  48.                 legend: {  
  49.                     enabled: true,  
  50.                     layout: 'vertical',  
  51.                     backgroundColor: 'white',  
  52.                     align: 'left',  
  53.                     verticalAlign: 'top',  
  54.                     y: 50,  
  55.                     x: 50,  
  56.                     borderWidth: 1,  
  57.                     borderRadius: 0,  
  58.                     title: {  
  59.                         text: '::Drag Me'  
  60.                     },  
  61.                     floating: true,  
  62.                     draggable: true,  
  63.                     zIndex: 20  
  64.                 }  
  65.             };  
  66.             if (sessionStorage.getItem("legendx") != null && typeof sessionStorage.getItem("legendx") != 'undefined' && sessionStorage.getItem("legendy") != null && typeof sessionStorage.getItem("legendy") != 'undefined') {  
  67.                 options.legend.x = parseInt(sessionStorage.getItem("legendx"));  
  68.                 options.legend.y = parseInt(sessionStorage.getItem("legendy"));  
  69.                 $("#txtLegendX").val(sessionStorage.getItem("legendx"));  
  70.                 $("#txtLegendY").val(sessionStorage.getItem("legendy"));  
  71.             }  
  72.             $('#container').highcharts(options);  
  73.               
  74.         });  
  75.     </script>  
  76. </head>  
  77. <body>  
  78.     Dragable Legend - SibeeshPassion  
  79.     <br />  
  80.     <br />  
  81.     <div id="container" s>"min-width: 310px; height: 400px; margin: 0 auto"></div>  
  82.     Legend X: <input id="txtLegendX" type="number" /> <br />  
  83.     Legend X: <input id="txtLegendY" type="number" />   
  84. </body>  
  85.   
  86. </html>  

Conclusion

I hope you liked this article. Please provide your valuable suggestions. It matters a lot. Please download the source code to determine more.

Points of interest

Legend, Chart, Drag legend, Drop legend, Drag and drop legend in chart.

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