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.

29 Comments

Join the conversation! Your thoughts help the community grow.

Abhishek Jaiswal11y ago
Interesting, thanks for sharing! :)
Sibeesh Venu11y ago
Nilesh Jadav Thank you :)
Sibeesh Venu11y ago
Shridhar Sharma Thank you :)
Sibeesh Venu11y ago
Debasis Saha Thank you :)
Sibeesh Venu11y ago
Chervine Bhiwoo Thank you :)
Sibeesh Venu11y ago
Ankit Bansal Thank you :)
Nilesh Jadav11y ago
100th article sir :) keep it up
Shridhar Sharma11y ago
nice article.
Debasis Saha11y ago
nice one..
Chervine Bhiwoo11y ago
Good job!
Ankit Bansal11y ago
good one..
Sibeesh Venu11y ago
Jaipal Reddy Thanks dude
Sibeesh Venu11y ago
Gopi Chand Thanks buddy
Sibeesh Venu11y ago
Vaikesh K P Thank you
Jaipal Reddy11y ago
good one sir
Gopi Chand11y ago
Great work done by you...:)
Vaikesh K P11y ago
Good article
Sibeesh Venu11y ago
Rajeesh Menoth Thank you so much
Rajeesh Menoth11y ago
NIce one
Sibeesh Venu11y ago
Karthikeyan K Thank you
Karthikeyan K11y ago
Good one sir..Thanks for sharing
Sibeesh Venu11y ago
Santhakumar Munuswamy Thank you so much
Santhakumar Munuswamy11y ago
keep it up...
Santhakumar Munuswamy11y ago
Thanks for nice article
Nitin11y ago
nice
Sibeesh Venu11y ago
Gowtham Rajamanickam thank you
Gowtham Rajamanickam11y ago
good one
Sibeesh Venu11y ago
Gopi Chand thank you
Gopi Chand11y ago
Good presentation along with description.