Creating a drag-and-drop DataLabel

Question

In tall charts, I am trying to add a drag effect to the datalabel point. I found several ways to target this shortcut. In this fiddle you can see some of my attempts. (I teamed up with different attempts in the same fiddle to show what I tried)

http://jsfiddle.net/EjwaX/3/

Now both using chart.series [0] .data [0] .dataLabel and using the click point event allow me to change the dataLabel attributes. However, I cannot attach jquery ui.draggable () to a shortcut. Is it possible to make an item inside a chart draggable?

Please let me know if you need more information.

Answer 1

In fact, you can attach draggable widgets to data labels. However, since they are SVG data labels, they completely ignore the changes made to their CSS position , left and top properties.

Instead, the <g> elements that wrap the labels expose the transform attribute:

 <g zIndex="1" transform="translate(9, 152)"> <!-- data label content --> </g> 

We can still use the draggable widget (which is quite convenient as it abstracts the lower-level drag events) and updates the transform attribute of the data label wrappers in the drag event handler. Since the coordinates are relative, we will have to analyze the original transform attribute and use the resulting coordinates as the origin.

Now all label wrappers themselves are child groups of groups decorated with the highcharts-data-labels class. This gives us a good starting point, so we can write something like:

 $(".highcharts-data-labels").children().filter(function() { var $this = $(this); // Parse original translation. var coords = $this.attr("transform") .match(/translate\((-?\d+),\s*(-?\d+)\)/); if (coords) { // Associate origin with element. return $this.data("origin", { x: +coords[1], y: +coords[2] }); } else { // Parsing failed, reject element. return false; } }).draggable({ drag: function(event, ui) { var $this = $(this); // Fetch back origin. var origin = $this.data("origin"); // Update current transform. $this.attr("transform", "translate(" + (origin.x + ui.position.left) + ", " + (origin.y + ui.position.top) + ")"); } }); 

Here you will find an updated script.

A few notes about the code above:

• filter () is used instead of each () , because it allows you to filter out elements whose transform attributes cannot be parsed (you never know), instead of directly crashing or garbage-feeding calculations in the drag handler,

• attr () is used instead of prop () to emphasize the fact that we modify the attributes in the SVG fragment. prop() will probably work the exact same way, so this is just a matter of style and personal preference.

Finally, a caveat: at the moment, I can only check this on Firefox, but it seems very difficult to fire mousedown events on some shortcuts, especially in the "crowded" areas with parts of the curve and the data tip competing for space. Fine-tuning the zIndex attributes of data label wrappers did not achieve great results. Sometimes a few clicks help. If this is consistent across all browsers, you may have to develop additional solutions (perhaps transparent overlays or just passing mousedown events from the data points themselves to the data labels).

Answer 2

working jsFiddle

 $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line' }, title: { text: 'Monthly Average Temperature' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, plotOptions: { series: { dataLabels: { enabled: true }, events: { //Here I'm able to move the labels by using the click and shift-click. //I wish to do this by dragging click: function(event) { var current_y = event.point.dataLabel.attr('y'); if(event.shiftKey) { var new_y = current_y + 2; event.point.dataLabel.attr({y: new_y}); } else { var new_y = current_y - 2; event.point.dataLabel.attr({y: new_y}); } } } } }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }] }); //Second attempt to grab a point. Works for chaning attributes var point = chart.series[0].data[0].dataLabel; } , function(chart){ }); $(function() { console.log(chart) ; $( "#draggable" ).draggable() .text(chart.series[0].data[0].y + 'drag and drop me '); });