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.

   <script src="Scripts/jquery-1.11.1.min.js"></script>
   <script src="Scripts/highcharts.js"></script>
   <script src="Scripts/highcharts-more.js"></script>
   <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.

    <div id="container" >"min-width: 310px; height: 400px; margin: 0 auto"></div>
    Legend X: <input id="txtLegendX" type="number" /> <br />
    Legend X: <input id="txtLegendY" type="number" />

Creating options of chart

 

The next step we need is to set the options for the chart. Please find the following settings. 

var options = {
                title: {
                    text: 'Worked hours in a week'
                },
                xAxis: {
                    categories: ['Developing', 'Maitenance', 'Marketing', 'Business', 'Admin']
                },
                series: [{
                    type: 'column',
                    name: 'Monday',
                    data: [3, 2, 1, 3, 4]
                }, {
                    type: 'column',
                    name: 'Tuesday',
                    data: [2, 3, 5, 7, 6]
                }, {
                    type: 'column',
                    name: 'Wednesday',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'column',
                    name: 'Thursday',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'column',
                    name: 'Friday',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'spline',
                    name: 'Thursday',
                    data: [3, 2.67, 3, 6.33, 3.33],
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[3],
                        fillColor: 'white'
                    }
                }],
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    backgroundColor: 'white',
                    align: 'left',
                    verticalAlign: 'top',
                    y: 50,
                    x: 50,
                    borderWidth: 1,
                    borderRadius: 0,
                    title: {
                        text: '::Drag Me'
                    },
                    floating: true,
                    draggable: true,
                    zIndex: 20
                }
            };

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.

floating: true,
draggable: true,

Now if you run your application, you will get the 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.

addEvent(chart.container, 'mousemove', function (e) {
});

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. 

$("#txtLegendX").val(options.x);
$("#txtLegendY").val(options.y);
sessionStorage.setItem("legendx", options.x);
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 have 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. 

if (sessionStorage.getItem("legendx") != null && typeof sessionStorage.getItem("legendx") != 'undefined' && sessionStorage.getItem("legendy") != null && typeof sessionStorage.getItem("legendy") != 'undefined') {
                options.legend.x = parseInt(sessionStorage.getItem("legendx"));
                options.legend.y = parseInt(sessionStorage.getItem("legendy"));
                $("#txtLegendX").val(sessionStorage.getItem("legendx"));
                $("#txtLegendY").val(sessionStorage.getItem("legendy"));
            }
            $('#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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dragable Legend - SibeeshPassion</title>
    <script src="Scripts/jquery-1.11.1.min.js"></script>
    <script src="Scripts/highcharts.js"></script>
    <script src="Scripts/highcharts-more.js"></script>
    <script src="Scripts/draggable-legend.js"></script>
    <script>
        $(function () {
            var options = {
                title: {
                    text: 'Worked hours in a week'
                },
                xAxis: {
                    categories: ['Developing', 'Maitenance', 'Marketing', 'Business', 'Admin']
                },
                series: [{
                    type: 'column',
                    name: 'Monday',
                    data: [3, 2, 1, 3, 4]
                }, {
                    type: 'column',
                    name: 'Tuesday',
                    data: [2, 3, 5, 7, 6]
                }, {
                    type: 'column',
                    name: 'Wednesday',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'column',
                    name: 'Thursday',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'column',
                    name: 'Friday',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'spline',
                    name: 'Thursday',
                    data: [3, 2.67, 3, 6.33, 3.33],
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[3],
                        fillColor: 'white'
                    }
                }],
                legend: {
                    enabled: true,
                    layout: 'vertical',
                    backgroundColor: 'white',
                    align: 'left',
                    verticalAlign: 'top',
                    y: 50,
                    x: 50,
                    borderWidth: 1,
                    borderRadius: 0,
                    title: {
                        text: '::Drag Me'
                    },
                    floating: true,
                    draggable: true,
                    zIndex: 20
                }
            };
            if (sessionStorage.getItem("legendx") != null && typeof sessionStorage.getItem("legendx") != 'undefined' && sessionStorage.getItem("legendy") != null && typeof sessionStorage.getItem("legendy") != 'undefined') {
                options.legend.x = parseInt(sessionStorage.getItem("legendx"));
                options.legend.y = parseInt(sessionStorage.getItem("legendy"));
                $("#txtLegendX").val(sessionStorage.getItem("legendx"));
                $("#txtLegendY").val(sessionStorage.getItem("legendy"));
            }
            $('#container').highcharts(options);

        });
    </script>
</head>
<body>
    Dragable Legend - SibeeshPassion
    <br />
    <br />
    <div id="container" s>"min-width: 310px; height: 400px; margin: 0 auto"></div>
    Legend X: <input id="txtLegendX" type="number" /> <br />
    Legend X: <input id="txtLegendY" type="number" />
</body>

</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.