highcharts / draggable-points Goto Github PK

would be great thtat it could work with Highcharts.StockChart's

example: http://jsfiddle.net/kdragon/gstaL9gu/1/

move the mouse around, so that a point is selected or highlighted, but the mouse is not very close to that point. if u try to click + drag, it will move the point vs zooming

it seems to have something to do with adding the line chart series

Hi

If I click on a point in a bar chart the values are reduced, is there a work-around for this, or are bar charts not supported?

I've reproduced the error here:
http://jsfiddle.net/jsfUserName/s4vp4peL/18/

Handle bars are great, but with the update the entire column no longer is draggable. Is it possible to provide an option to allow then entire column still be draggable?

As an aside, you also should probably update the plugin to use a 'handleCursor" option, as the 'cursor' option applies to the entire column. Since only the handlebar is now draggable having the ns-resize cursor show up when hovering over the rest of the column isn't great when considering usability.

Setting draggableX = false on the first or last points in series data prevents dragging in the Y axis also.

I am using an 'area' chart type and call the following to change the point options:

var firstPoint = chart.series[0].data[0];
var lastPoint = chart.series[0].data[chart.series[0].data.length - 1];
firstPoint.draggableX = false;
lastPoint.draggableX = false;

All other points are unaffacted, just the first and last points become 'fixed' in place.

Related topic: http://stackoverflow.com/questions/26861680/highcharts-draggable-points-conflict-between-drag-and-click

I'm using draggable points plugin and boost.js but they seems not working together if each series contains a lot of points like few hundreds thousands points. How can I make them working? Is the threshold 5000?

Just a heads up: not sure if this is the intended solution to dynamic draggable charts or not.

If you want to get rid of most highcharts options, you set it to null, but the dragMins need to be set to undefined.

We're using several draggable charts, so we wanted to pass dragMinY as either 0 or have it removed. Could have conditionally set the key, but thought we could use null. After some troubleshooting, I found the solution.

See example: http://jsfiddle.net/bozdoz/hrFBy/

When the user clicks on a point that has been defined as draggable, the following error is produced:
draggable-points.js:96 Uncaught TypeError: Cannot set property 'dragStart' of undefined

Hi there,

I am using highcharts to do some data demo in my project. One important graph is spider chart, and it works fantastically. After last group meeting, one suggestion was about making spider chart draggable, as they claimed "looking at the dash lines and polygons gives people a feeling that they can drag those".

I have tried apply draggable.js directly to my spider chart, it worked in a way. Draggable.js only enables drag along X and Y, and my spider chart has 7 angles. No matter which angle I want to drag to increase, I have to drag up, to decrease, dragging down. I am just wondering is there a way to enable the dragging along the actual spider angles?

Any reply would be appreciated!

Hi
I need some enhancements in draggable points to snap with nearby by Y-Axis grid lines of my tick positions. Here i attached an example of high charts where i need snap to fit with grid lines

http://jsfiddle.net/anandi2i/tgdkrtup/1/

http://jsfiddle.net/kdragon/1d4sz5xs/5/

click on points and point labels, notice that point select sometimes happens to the wrong point.

here are specific steps to make it happen, but lots of other ways too: run the fiddle, click 111 label, click 222 label -> point 111 is selected instead of point 222

also, notice some weird point fillColor. sometimes the fillColor is the series color, other times it's the point's manually assigned color. sometimes this is when selected, sometimes when not selected. keep clicking on the same point to see this. this only happens when the draggable.js is included

comment out the draggable.js and notice how this works correctly. seems like it is similar to this other issue that i reported that was corrected: #43

in my actual app, the issue is, points that i am selecting become unselected. but just when i click on their labels. something is firing after i select the point.

chrome on windows 7 64

Thanks
Keith

Hi,

I was looking at the demo http://jsfiddle.net/highcharts/AyUbx/ and wanted to know, can we sync both chart and datasource after points are dragged? After dragging, current point position is displayed on bottom of the chart but is this plug-in already providing datasource sync feature?

Thanks

If the chart contains more than one yAxis, the y position of the point appears traslated.
I temporarily fixed this issue replacing lines 110 and 163:
newPlotY = chart.plotHeight - dragPlotY + deltaY
with:
newPlotY = dragPoint.series.yAxis.height - dragPlotY + deltaY

Hi Torstein, I have encountered a problem in that the drop event has stopped working on all of my draggable points charts.

I can grab a point and drag it about, but when I try and drop it, it continues to drag about. Leaving the chart area stops the dragging, but the point remains selected and the only way to deselect a point is to select another point, but then the problem repeats. This has happened to various unrelated charts stored in different folders.

Any advice on what could be causing this sort of problem?

Although dragging columns work, dragging bars does not.
This would be nice to have.

I've been working with Highcharts and noticed that you guys updated to 4.1.5 and it seems that using a dataset with the Bubble type will no longer allow it to drag and drop.

Reverting back to 4.1.4 works as intended. The plugin repository has the same issue http://www.highcharts.com/plugin-registry/single/3/Draggable-Points

EDIT: Unless you disable all other series, you won't be able to drag and drop the Bubbles.

Here I have my chart :

http://jsfiddle.net/fh9k0k2g/3/

What is my problem ? I have two:

• I would like take a task and move it along the Yaxis (date because it is inverted)
• I would like take a task and expand it on one side or the other

So two action possible for one same object. It is for my job maybe with left or right mouse button.

Thank you a lot for your help :)

As title, any solution?

With jQuery its fine, but with Highcharts Standalone Framework, it doesn't work.

http://jsfiddle.net/AyUbx/1470/

Please implement logic for draggable arearange

http://jsfiddle.net/249e3gk6/4/

It is possible to drag points on polar charts, but position of mouse is not the same as position of a point.

Demo: http://jsfiddle.net/AyUbx/3533/

Example: http://jsfiddle.net/b0kd09vf/

Started an experimental implementation of this in the dev-column-handle branch. Live demo: http://jsfiddle.net/highcharts/AyUbx/1914/.

npm package uses version 2.0.0 which is buggy. Can you please update to version 2.0.4 so I don't have to use git repo in package.json?

Hi,

I can drag the single series point using draggable point plugin

but I want to drag whole line or spline series when the Y axis type as logarithmic

Thanks & Regards
Govindaraj s.

I need horizontal axis move for column range, i want to plot the range between X axis . The entire column range need to move horizontally. I have given below one fiddle link there is a Y axis range only. But i want to do X axis range . I anybody knows pls let me know.
http://jsfiddle.net/vxkp8ths/

Hi,

Thank you for this library - it works really well for allowing data manipulation. However, it doesn't support columnrange or inverted graphs.

Halo position is updated after mouseup, instead on the mousemove.

1. pull the bar upwards for long as you can, the remaining bars must become very very small
2. pull the raised bar down until the remaining bars become the same size
3. you should see that some dark blue bars got thicker because the white lines around them disappeared and turned into black lines

(at least this is what happens in the Chrome browser (I use a Chrome mod, called "Iron" browser)

When dragging (last right point), the crosshair flickers back and forth between that point and the x-value of the last non-null data point of the other series. In addition, the tooltip flickers and makes it hard to look at.

Example: http://jsfiddle.net/8j883n0g/

This is continuation of #43

Example: http://jsfiddle.net/kdragon/xdwuup4j/

Steps:

1. click (no drag) the black diamond in the middle
2. tooltip and selection jump back and forth between series (the blue dot below clicked point)

You can also see it on mouse up after the drag.

http://jsfiddle.net/highcharts/AyUbx/

In the example, I can able to drag/drop a point by selecting it near to the that. I have requirement that, a point should not be selected to drag/drop unless click exactly on the point.

Appreciate any help.

When you drag a column to 0, it disappears, and can't be selected to drag again.

Hi,

I've been using the draggable-points plug-in, and it has been working fine. It recently stopped working (no code change on my side). I've checked on multiple browsers/PCs. Even the provided demos are not working anymore.

Can you please comment on the issue?

-Z

Main Demo: http://jsfiddle.net/highcharts/AyUbx/

Drag a handlebar, the handlebar stay's but the column it's associated with is not redrawn. Inspecting the code shows that it's an issue with "visibility:hidden" not being removed.

Hi

We are developing a system to allow users to drag values on a graph but we want a reset button so they can reset the data back to its original form.

i'm using this code and can get it to work if i remove the " draggableY: true," from the options but then we loose the ability to drag.

$("#ResetButton").click(function () {
        if (confirm('Are you sure?')) {
            var chart = $('#forecast').highcharts();
            chart.series[2].setData(userForecastedConsumptionData);
            chart.redraw();
        }

        return false;
    }); 

any ideas would be appreciated.

Thanks

James

Hi there
My campaign website uses draggable points with Highcharts and I have some very involved javascript controlling one of the graphs. The new version of draggable-points.js updated in May 2015 has caused (or maybe exposed...) lots of bugs in my code. It would be hugely helpful if anyone could let me have a copy of the previous version of draggable-points.js please. The relevant page on my site (which now is pretty buggy) is: http://inequalitywatch.org/wealth-inequality/

I realise I'll have to update my code to work with the new version of draggable-points.js, but this is going to take me some time, and in the meantime, I'd like to run off the earlier version until I can sort it out (and I've got some people I've been trying to get involved in my project looking at the site tomorrow.... aaaaghhhh!). I've been trying to reach Torstein Hønsi who developed draggable points but can't find his contact details.
many thanks :)

Hi,

when i am using yAxis type as logarithmic the draggable points not working, please refer the below url

http://jsfiddle.net/jp33358q/

Thanks & Regards
Govindaraj s.

When i shared tooltip with a 3 columns series the TT is all messed up ? This is also true with the JSfiddle example !
Is there a way to circumnavigate this (footer format or other JS functions)

Many this

Hi

Bar and columns are rendered with a black stroke on them. Zero Values are given a dashed stroke.
If you hover over a column/bar the colours change, then on mouse-out they change to the correct colour.

http://jsfiddle.net/jsfUserName/aqmo6x3c/

I have created the above fiddle to demonstrate - the dashed stroke is also noticeable on your demo.

I'm using draggable points version: 1.1.3.
It looks like the issue is caused on line 182

point.graphic.attr(point.shapeArgs.height < 3 ? {
                        'stroke': 'black',
                            'stroke-width': 2,
                            'dashstyle': 'shortdot'
                    }

Hi,

While working with this plugin, I came across a scenario where I need to stop few points from being dragged. So, in a series a few points should be freeze while others are allowed to be drag drop-able.

I looked around for e.cancel but failed to find. So, is it possible to cancel or freeze dragging on some points?

Thanks

i took the bubble demo and modified it to be a scatter chart with 2 dragable series.

example: http://jsfiddle.net/kdragon/xdwuup4j/

select any of the points and slowly drag them towards a point in the other series, notice the other series point keeps getting selected during the drag with selection and tooltip flickering

Thanks
Keith

Drop events sometimes fire without preceding dragging, i.e. by a single click. This can be reproduced in the demo fiddle http://jsfiddle.net/highcharts/AyUbx/ like this:

1. Drag and drop the Jan value of series 3 to - say - 200.
2. Move the cursor to some location above the Feb columns, so that the Feb tooltip opens. The cursor does not need to switch to ns-resize.
3. Perform a single click.
   As result, the #drop div displays something like "In Series 3, 1 was set to 71.50".

Although the Feb value does not change, this behavior is problematic if your drop callback performs something like changing the marker attributes.

As a workaround, one can define a drag event that sets a wasDragged flag, and have the drop event test that flag before performing the actual action:

events: {
drag: function () {
wasDragged = true;
},
drop: function() {
if ( wasDragged == true ) {
wasDragged = false;
// drop code goes here
};
}
}

Is there some way to get the old x or y from a point in the drag or drop function callback?

It would be great if you guys registered this plugin on bower, so people can just do bower install highcharts-draggable-points and be done with it.

When dragging a column, the chart.hoverPoint is cleared and as such, in order to drag the same column again, the mouse needs to leave and reenter the column.

Hi,

Behaviour

When dropping draggable point, JavaScript alert function located in a drop event executes twice. First time, after dropping and second time, after hovering on an alert box.

Live demo with steps to reproduce

http://jsfiddle.net/AyUbx/3336/
http://jsfiddle.net/sk3m3o7d/79/

Affected browser

Internet Explorer

Best Regards.

I am sure this is the same issue already noted but I am unable to drag a data point in highcharts v 4.1.8 if 2 series are overlapping each other. Our use case is that we have a baseline series with dragging disabled and current series that sits on top and should be draggable. When hovering over data points it is the baseline (bottom series) data point that gets selected rather than the top series (as per v4.1.2)? As the bottom series has dragging disabled we cannot change the required data point. Any ideas on how to solve this?