I'm drawing a line graph using Flot. It's updated in real-time and has multiple series. I want to be able to detect left and right mouse clicks on individual series in the graph.
Currently, I can detect a left mouse click, but right-click just brings up my browser's right-click menu.
Here's what I've got so far:
function myClick(event, pos, obj) {
if (!obj) {
return;
}
alert('clicked!');
}
var placeholder = $("#placeholder");
// setup plot
var options = {
...
grid: {clickable: true, hoverable: true},
...
};
var initialData = getMyData();
var plot = $.plot(placeholder, initialData , options);
placeholder.bind("plotclick", myClick);
Is there a way to detect right-clicks on a series in the graph?
Looking at the flot source, this is not a built-in feature. It is coded to handle only the mousemove, mouseleave, and click events on the grid. If I were you I would look into modifying the flot source directly and replacing the click event with the mousedown event. Once you do that it should be easy to handle left vs right vs center clicks.
EDITS
I realize this is an old answer but a thought occurred to me. A work around for this, without modifying the source, is to use the plothover to monitor whether the mouse is over a point and then bind a generic mousedown handler to the plot div.
var currentPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
currentPoint = item;
} else {
currentPoint = null;
}
});
$('#placeholder').mousedown(function(event) {
if (currentPoint)
{
switch (event.which) {
case 1:
alert('Left mouse button pressed on ' + currentPoint.series.label);
break;
case 2:
alert('Middle mouse button pressed on ' + currentPoint.series.label);
break;
case 3:
alert('Right mouse button pressed on ' + currentPoint.series.label);
break;
default:
alert('You have a strange mouse on ' + currentPoint.series.label);
}
}
});
See fiddle here.
Related
I have a simple linear chart built with Chart.js library.
And i want to allow user to drag points on chart for dynamically change data of it. I tied chartjs-plugin-draggable but it works for me only with annotations. I need graph exactly like this:
https://www.rgraph.net/canvas/docs/adjusting-line.html
But use new graph library in project is not good solution :(
Also i tried to play with dot event's.
UPDATE:
With angular i created something like this.
Maybe if there is no way to add drag&drop to points, there will be a hack to put "sliders" with absolute position on graph on points positions. I didn't find any info too :(
In case anyone is looking for a solution that doesn't require the use of plugins, it's pretty straightforward to do it in vanilla chart.js.
Here's a simple working example - just click and drag a data point
// some data to be plotted
var x_data = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
var y_data_1 = [86,114,106,106,107,111,133,221,783,2478];
var y_data_2 = [2000,700,200,100,100,100,100,50,25,0];
// globals
var activePoint = null;
var canvas = null;
// draw a line chart on the canvas context
window.onload = function () {
// Draw a line chart with two data sets
var ctx = document.getElementById("canvas").getContext("2d");
canvas = document.getElementById("canvas");
window.myChart = Chart.Line(ctx, {
data: {
labels: x_data,
datasets: [
{
data: y_data_1,
label: "Data 1",
borderColor: "#3e95cd",
fill: false
},
{
data: y_data_2,
label: "Data 2",
borderColor: "#cd953e",
fill: false
}
]
},
options: {
animation: {
duration: 0
},
tooltips: {
mode: 'nearest'
}
}
});
// set pointer event handlers for canvas element
canvas.onpointerdown = down_handler;
canvas.onpointerup = up_handler;
canvas.onpointermove = null;
};
function down_handler(event) {
// check for data point near event location
const points = window.myChart.getElementAtEvent(event, {intersect: false});
if (points.length > 0) {
// grab nearest point, start dragging
activePoint = points[0];
canvas.onpointermove = move_handler;
};
};
function up_handler(event) {
// release grabbed point, stop dragging
activePoint = null;
canvas.onpointermove = null;
};
function move_handler(event)
{
// locate grabbed point in chart data
if (activePoint != null) {
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
// read mouse position
const helpers = Chart.helpers;
var position = helpers.getRelativePosition(event, myChart);
// convert mouse position to chart y axis value
var chartArea = window.myChart.chartArea;
var yAxis = window.myChart.scales["y-axis-0"];
var yValue = map(position.y, chartArea.bottom, chartArea.top, yAxis.min, yAxis.max);
// update y value of active data point
data.datasets[datasetIndex].data[activePoint._index] = yValue;
window.myChart.update();
};
};
// map value to other coordinate system
function map(value, start1, stop1, start2, stop2) {
return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1))
};
body {
font-family: Helvetica Neue, Arial, sans-serif;
text-align: center;
}
.wrapper {
max-width: 800px;
margin: 50px auto;
}
h1 {
font-weight: 200;
font-size: 3em;
margin: 0 0 0.1em 0;
}
h2 {
font-weight: 200;
font-size: 0.9em;
margin: 0 0 50px;
color: #555;
}
a {
margin-top: 50px;
display: block;
color: #3e95cd;
}
<!DOCTYPE html>
<html>
<!-- HEAD element: load the stylesheet and the chart.js library -->
<head>
<title>Draggable Points</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!-- BODY element: create a canvas and render a chart on it -->
<body>
<!-- canvas element in a container -->
<div class="wrapper">
<canvas id="canvas" width="1600" height="900"></canvas>
</div>
<!-- call external script to create and render a chart on the canvas -->
<script src="script.js"></script>
</body>
</html>
Update: My previous answer got deleted because it only featured a link to a plugin solving the issue, however here comes the explanation to what it does:
The general procedure on how to achieve the desired behaviour is to
Intercept a mousedown (and check if it's a dragging gesture) on a given chart
Check if the mousedown was over a data point using the getElementAtEvent function
On mousemove, translate the new Y-Pixel value into a data coordinate using the axis.getValueForPixel function
Synchronously update the chart data using chart.update(0)
as pointed out in this Chart.js issue.
In order to intercept the mousedown, mousemove and mouseup events (the dragging gesture), event listeners for said events need to be created. In order to simplify the creation of the listeners one may use the d3 library in this case as follows:
d3.select(chartInstance.chart.canvas).call(
d3.drag().container(chartInstance.chart.canvas)
.on('start', getElement)
.on('drag', updateData)
.on('end', callback)
);
On mousedown (the 'start' event here), a function (getElement) may be called thatfetches the closest chart element to the pointers location and gets the ID of the Y-Scale
function getElement () {
var e = d3.event.sourceEvent
element = chartInstance.getElementAtEvent(e)[0]
scale = element['_yScale'].id
}
On mousemove ('drag'), the chart data is supposed to be updated according to the current Y-Pixel value of the pointer. We can therefore create an updateData function that gets the position of the clicked data point in the charts data array and the according dataset like this
function updateData () {
var e = d3.event.sourceEvent
var datasetIndex = element['_datasetIndex']
var index = element['_index']
var value = chartInstance.scales[scale].getValueForPixel(e.clientY)
chartInstance.data.datasets[datasetIndex].data[index] = value
chartInstance.update(0)
}
And that's it! If you need to store the resulting value after dragging, you may also specify a callback function like this
function callback () {
var datasetIndex = element['_datasetIndex']
var index = element['_index']
var value = chartInstance.data.datasets[datasetIndex].data[index]
// e.g. store value in database
}
Here is a working fiddle of the above code. The functionality is also the core of the Chart.js Plugin dragData, which may be easier to implement in many cases.
Here is how I fixed using both touchscreen or mouse event x,y coordinates for the excellent d3 example above by wrapping event screen coordinates in a more "generic" x,y object.
(Probably d3 has something similar to handle both types of events but lot of reading to find out..)
//Get an class of {points: [{x, y},], type: event.type} clicked or touched
function getEventPoints(event)
{
var retval = {point: [], type: event.type};
//Get x,y of mouse point or touch event
if (event.type.startsWith("touch")) {
//Return x,y of one or more touches
//Note 'changedTouches' has missing iterators and can not be iterated with forEach
for (var i = 0; i < event.changedTouches.length; i++) {
var touch = event.changedTouches.item(i);
retval.point.push({ x: touch.clientX, y: touch.clientY })
}
}
else if (event.type.startsWith("mouse")) {
//Return x,y of mouse event
retval.point.push({ x: event.layerX, y: event.layerY })
}
return retval;
}
.. and here is how I would use it in the above d3 example to store the initial grab point Y. And works for both mouse and touch.
Check the Fiddle
Here how I solved the problem with using d3 and wanting to drag the document on mobile or touch screens. Somehow with the d3 event subscription all Chart area events where already blocked from bubbling up the DOM.
Was not able to figure out if d3 could be configured to pass canvas events on without touching them. So in a protest I just eliminated d3 as it was not much involved other than subscribing events.
Not being a Javascript master this is some fun code that subscribes the events the old way. To prevent chart touches from dragging the screen only when a chart point is grabed each of the handlers just have to return true and the event.preventDefault() is called to keep the event to your self.
//ChartJs event handler attaching events to chart canvas
const chartEventHandler = {
//Call init with a ChartJs Chart instance to apply mouse and touch events to its canvas.
init(chartInstance) {
//Event handler for event types subscribed
var evtHandler =
function myeventHandler(evt) {
var cancel = false;
switch (evt.type) {
case "mousedown":
case "touchstart":
cancel = beginDrag(evt);
break;
case "mousemove":
case "touchmove":
cancel = duringDrag(evt);
break;
case "mouseup":
case "touchend":
cancel = endDrag(evt);
break;
default:
//handleDefault(evt);
}
if (cancel) {
//Prevent the event e from bubbling up the DOM
if (evt.cancelable) {
if (evt.preventDefault) {
evt.preventDefault();
}
if (evt.cancelBubble != null) {
evt.cancelBubble = true;
}
}
}
};
//Events to subscribe to
var events = ['mousedown', 'touchstart', 'mousemove', 'touchmove', 'mouseup', 'touchend'];
//Subscribe events
events.forEach(function (evtName) {
chartInstance.canvas.addEventListener(evtName, evtHandler);
});
}
};
The handler above is initiated like this with an existing Chart.js object:
chartEventHandler.init(chartAcTune);
The beginDrag(evt), duringDrag(evt) and endDrag(evt) have the same basic function as in the d3 example above. Just returns true when wanting to consume the event and not pasing it on for document panning and similar.
Try it in this Fiddle using a touch screen. Unless you touch close to select a chart point the rest of the chart will be transparent to touch/mouse events and allow panning the page.
I'm trying to develop a function with leaflet which make user be able to draw a circle by pressing ctrl & dragging mouse, as the following
let mouseDownPos = null
let mouseUpPos = null
L.Map.CircleSelector = L.Map.Drag.extend({
_onMouseDown: function(e) {
if (!e.ctrlKey)
return
let map = this._map
map.dragging.disable()
mouseDownPos = map.containerPointToLatLng(this._point)
},
_onMouseUp: function(e) {
if (!e.ctrlKey) {
this._map.dragging.enable()
return
}
let map = this._map
mouseUpPos = map.containerPointToLatLng(this._point)
let radius = map.distance(mouseDownPos, mouseUpPos)
L.circle(mouseDownPos, {radius: radius}).addTo(map)
map.dragging.enable()
}
})
L.Map.mergeOptions({circleSelector: true})
L.Map.addInitHook('addHandler', 'circleSelector', L.Map.CircleSelector)
When I press ctrl & drag mouse on the map, it still does not work.
I've tried to print text to console at the beginning in _onMouseDown(), it shows nothing.
It seems that the event doesn't trigger.
What should I need to modify? Thank you.
Finally I extend leaflet.draw to approach my goal.
Refer to the source code of L.Draw.Circle, I extend my selector from L.Draw.Circle. The mainly modified part is in _onMouseUp, as the following
L.Map.CircleSelector = L.Draw.SimpleShape.extend({
_onMouseUp: function (e) {
// TODO
// 1. Get the circle center & radius
// 2. Calculate distances between center & markers
// 3. If the distance in step 2 <= radius, it is in the circle
// 4. Anything you'd like to do......
}
})
The rest code of the event can be referred to L.Draw.Circle, e.g., addHooks, _onMouseMove......
I have a chart and implemented seriesClick event. When User clicks it loads dataA, when user click again it loads dataB. It is fully implemented and it is functional. However my question is how to fix chart area and legend area.
Legend length differs in dataA and dataB, therefore when user click on series, chart is not stay stable, it adjusts automatically. I do not want my chart to adjust automatically.
my SeriesClick event implementation is as follows:
function clickEvent (e) {
if (!isHover) {
chart.options.series = dataSeries2;
chart.redraw();
isHover = true;
}
else if (isHover) {
var chart = $("#chart").data("kendoChart");
chart.options.series = dataSeries;
chart.redraw();
isHover = false;
}
}
Here is the jsfiddle:
http://jsfiddle.net/3yhbyy2g/72/
There is no API yet for setting plot area to have fixed width, all you can do right now is give an escape character (\n) in your legend label.
stats = stats.map(function(x) {
return { x: x[0], y: x[1], k: x[2],name:"my title\nis too\nlengty" };
});
I found this in their forum, hope that will help you out.
Here is the scenario. I've multiple highstocks say 10 charts on a single page. Currently I've written 500 lines of code to position the legend, show tooltip and refresh the legend values on mousemove.
No. of legends vary per chart. On mousemove values of all the legends are updated. I need to optimize the code I am using highstocks v1.2.2.
Above screenshot shows 2 charts. Return, Basket, vs Basket Spread are legends and it's values are updated on every mousemove.
Please find this fiddle for example. In my case legends are positioned and updated values on mouse move with hundreds of lines of code. When I move the mouse the legend values of Return and Basket of first chart and the legend values of vs Basket Spread are updated. It's working fine but with lots of javascript code. So I need to optimize it less code or with highstocks built-in feature.
Update
User #wergeld has posted new fiddle. As I've shown in screenshot when cross-hair is being moved over any chart, the legend values of all the charts should be updated.
Is there anyway to implement the same functionality with less code or is there built-in feature available in highstocks ???
Using this as a reference.
Basic example would be to use the events.mouseover methods:
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var theLegendList = $('#legend');
var theSeriesName = this.series.name;
var theYValue = this.y;
$('li', theLegendList).each(function (l) {
if (this.innerText.split(':')[0] == theSeriesName) {
this.innerText = theSeriesName + ': ' + theYValue;
}
});
}
}
}
}
}
This is assuming I have modded the <li> to be:
$('<li>')
.css('color', serie.color)
.text(serie.name + ': NA')
.click(function () {
toggleSeries(i);
})
.appendTo($legend);
You would then need to handle the mouseout event but I do not know what you want to do there.
Working example.
EDIT:
Here is a version using your reference OHLC chart to put the values in a different legend location when any point in the chart is hovered.
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
//using the ohlc and volumn data sets created at runtime.
var stockVal = ohlc[this.index][4]; // show close value
var stockVolume = volume[this.index][1];
var theChart = $('#container').highcharts();
var theLegendList = $('#legend');
$('li', theLegendList).each(function (l) {
var legendTitle = theChart.series[l].name;
if (l === 0) {
this.innerText = legendTitle + ': ' + stockVal;
}
if (l === 1) {
this.innerText = legendTitle + ': ' + stockVolume;
}
});
}
}
}
}
}
TL;DR
I want to use HTML5 drag and drop of an element to a container with drag Hammer.js events. However, there are conflicts.
Detailed description:
As presented in the attached figure, I have two containers:
Left: container with draggable elements
Right: container with Hammer.js events, namely drag, dragstart and dragend.
I want to drag and drop elements from the left container to the right one.
However, while dragging, when entering on the right container, the Hammer.js dragstart event is activated. After dropping the element, I apply the drag event on the right container. However, the Hammer.js drag event is activated and it considers the deltaX and deltaY from the previous dragstart event.
Hammer.js is being used with preventDefault: true:
Hammer(this.container, {preventDefault: true}).on('dragstart', function (event) { ... }
I have already used event.preventDefault() and event.stopPropagation() on the dragstart of the draggable element, without success.
I have also partially solved the problem. In the dragstart event of the Hammer.js container, I have added the following verification, in order to check if the source element and the target are the same. However, the drag in the right container only works on the second action, since the first one is ignored.
if (event.gesture.startEvent.srcEvent.srcElement != event.gesture.target) {
return false;
}
Any idea on how to prevent Hammer.js events while dragging elements using the HTML5 drag and drop API?
I want to use flags as a last resort, since Hammer.js events should be developed by third-parties.
Thanks for your help.
Hammer.js events should only be captured if they have previously been bound.
Try using a case statement...(this is from an app that I built recently) I can case the statement then break out or return false etc to prevent things. Theoretically though, if I unbind or exclude the event "drag" it should work anyway.
<script>
var hammertime = Hammer(document.getElementById('image-wrapper'), {
transform_always_block: true,
transform_min_scale: window.initScale,
transform_max_scale: 1,
drag_block_horizontal: true,
drag_block_vertical: true,
drag_min_distance: 0
});
//console.log(hammertime);
var posX = window.calcLeft, posY = window.calcTop,
lastPosX = window.calcLeft, lastPosY = window.calcTop,
bufferX = 0, bufferY = 0,
scale = window.initScale, last_scale,
rotation = window.rotationNeeded, last_rotation, dragReady = 0;
hammertime.on('touch drag dragend transform release mouseleave transformend pinchin pinchout', function (ev) {
elemRect = document.getElementById('the-image');
manageMultitouch(ev);
});
function manageMultitouch(ev) {
var pinchDirection;
ev.stopPropagation();
//console.log(ev.type);
switch (ev.type) {
case 'touch':
last_scale = scale;
last_rotation = rotation;
break;
case 'drag':
posX = ev.gesture.deltaX + lastPosX;
posY = ev.gesture.deltaY + lastPosY;
break;
case 'pinchin':
console.log('pinchin');
pinchDirection = "in";
break;
case 'pinchout':
console.log('pinchout');
pinchDirection = "out";
break;
case 'transform':
rotation = window.rotationNeeded;// rotation + ev.gesture.rotation;//we can change this to snap rotation eventually.
//console.log('Last Scale: ', last_scale);
scale = Math.max(hammertime.options.transform_min_scale, Math.min(last_scale * ev.gesture.scale, 1));
var propsImage = document.getElementById('the-image').getBoundingClientRect();
//console.log(propsImage);
var propsBox = document.getElementById('image-wrapper').getBoundingClientRect();
//console.log(propsBox);
break;
case 'transformend':
console.log('We are finished transforming.');
//when they finish transforming, we need to determinw what the new left reset position would be.
var propsImage = document.getElementById('the-image').getBoundingClientRect();
var propsBox = document.getElementById('image-wrapper').getBoundingClientRect();
//window.calcLeft = Math.round(window.preBounds.left - propsImage.left);
//console.log(ev.type);
//if (pinchDirection = "out") {
window.calcLeft = Math.round(window.calcLeft + ((propsImage.width - propsBox.width) / 2));
//} else if (pinchDirection = "in") {
//window.calcLeft = Math.round(window.calcLeft - ((propsImage.width - propsBox.width) / 2));
//}
//window.calcTop = Math.round(window.calcTop + ((propsImage.top - propsBox.top) / 2));
//console.log(window.calcLeft);
break;
case 'dragend':
//console.log('We are finished dragging.');
//console.log(window.calcLeft);
lastPosX = posX;
lastPosY = posY;
checkBounds();
break;
case 'mouseleave':
//console.log('Release!', posX, posY);
//checkBounds();
break;
}
<script>