I am having some issues working with Touch events in HighCharts. I am able to receive the events, but I haven't been able to figure out how to translate the coordinates given to chart coordinates. For mouse events, I can use the following to retrieve the chart X value:
chart.xAxis[0].toValue(e.offsetX)
However, touch events have no offsetX. For clicks, there is also e.originalEvent.chartX, which seems to be identical to e.offsetX, but again it is missing for touch events. By inspecting the touch event I can find clientX, screenX, and pageX, but axis.toValue does not return the correct chart X for any of these values.
touch event support in highchart for iphone/ipads or any touchable devices
and
Highcharts: how to handle touch events via plotOptions.series.events
both mention using a "tracker" object to call normalizeMouseEvent, but I can't seem to find it in the API reference or by inspecting the relevant objects.
How can I extract the correct X and Y chart values from a touch event?
You can extract that from changedTouches object.
e.originalEvent.changedTouches[0].pageX
e.originalEvent.changedTouches[0].pageY
In order to extract the equivalent of event.offsetX that I am using for mouse events, I ended up using the following code:
function accumulate_offset(next_container) {
offset = 0;
while (next_container != null) {
offset += next_container.offsetLeft;
next_container = next_container.offsetParent;
}
return offset;
}
// then in handler
if (e.type.slice(0,5) == 'mouse') {
xVal = e.offsetX;
} else {
xVal = e.originalEvent.changedTouches[0].pageX - accumulate_offset(e.currentTarget);
}
x = axis.toValue(xVal);
Hopefully this is helpful to someone.
Related
I have my code in this JSFiddle. I can draw annotations with click-and-drag, using the plugins: user click and hold the mouse (drawing starts on mouse-down), start to drag around and drawing is completed when user releases the mouse (mouse-up event).
The issue here is: when we have a single-click in a certain point, an arrow symbol appears and this can not be selected nor draggable. In cases of single-click, will be ideal if mouse-up event to not complete the drawing and instead drawing to be completed on the next mouse-down event.
Here in this video we can see the behavior of how the single-click acts at the moment and also there I commented one condition to show how I expect this to behave. I am already successfully having the check if we have a single-click while drawing in the part with console.log("this is a single click");.
The two most important blocks of the code-snippet are given below, and what I don't understand is why this is not working as I described above, since I am already terminating the function in case single-click is detected (with return).
//on mouse-down event, if cursor is inside of the chart and if drawing tool is selected, set the
//flag "isAddingAnnotations" to true and store the coordinates from where the drawing started
navigation.eventsToUnbind.push(addEvent(chart.container, 'mousedown', function(e) {
if (!chart.cancelClick &&
chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop))
{
navigation.bindingsChartClick(chart, e);
if (!navigation.selectedButton) {
chart.isAddingAnnotations = false;
} else {
chart.isAddingAnnotations = true;
chart.addingAnnotationsX = e.clientX;
chart.addingAnnotationsY = e.clientY;
}
}
}));
//on mouse-up event, set the flag "isAddingAnnotations" to false (since drawing ended)
//additionally, if drawing was in progress and if ending coordinates are matching with
//starting coordinates, drawing should still be active
navigation.eventsToUnbind.push(addEvent(chart.container, 'mouseup', function(e) {
if (chart.isAddingAnnotations &&
chart.addingAnnotationsX == e.clientX &&
chart.addingAnnotationsY == e.clientY)
{
console.log("this is a single click");
return;
}
chart.pointer.normalize(e);
navigation.bindingsChartClick(chart, e);
chart.isAddingAnnotations = false;
}));
I am using ShinobiCharts in my iOS app to plot a line chart. This requires a feature where in the default view will be in Days. When i pinch zoom, i will be getting Weeks data, and more pinch zooming will give me Months data. Same applies for zoom out in reverse order.
I am not able to find a way to show this data at different zoom levels.
Please help me with this.
Im using following delegate method to check zoom level
- (void)sChartIsZooming:(ShinobiChart *)chart withChartMovementInformation:
(const SChartMovementInformation *)information;
but i dont find any way to check zoom levels.
One way of checking this is to determine the number of days currently displayed within the axis' visible range.
First off you'll need a way to record the current granularity of data on display in the chart:
typedef NS_ENUM(NSUInteger, DataView)
{
DataViewDaily,
DataViewWeekly,
DataViewMonthly,
};
The initial view will be DataViewDaily and is assigned within viewDidLoad to the property currentDataView.
Then within sChartIsZooming:withChartMovementInformation: you could do:
- (void)sChartIsZooming:(ShinobiChart *)chart withChartMovementInformation:(const SChartMovementInformation *)information
{
// Assuming x is our independent axis
CGFloat span = [_chart.xAxis.axisRange.span doubleValue];
static NSUInteger dayInterval = 60 * 60 * 24;
NSUInteger numberOfDaysDisplayed = span / dayInterval;
DataView previousDataView = _currentDataView;
if (numberOfDaysDisplayed <= 7)
{
// Show daily data
_currentDataView = DataViewDaily;
}
else if (numberOfDaysDisplayed <= 30)
{
// Show weekly data
_currentDataView = DataViewWeekly;
}
else
{
// Show monthly data
_currentDataView = DataViewMonthly;
}
// Only reload if the granularity has changed
if (previousDataView != _currentDataView)
{
// Reload and redraw chart to show new data
[_chart reloadData];
[_chart redrawChart];
}
}
Now within your datasource method sChart:dataPointAtIndex:forSeriesAtIndex: you can return the appropriate data points by switching on the value of _currentDataView.
Note that you may need to also update sChart:numberOfDataPointsForSeriesAtIndex to return the number of points to display at the current view level.
I am trying to find a way to get the corresponding screen location of the caret-position in a text area in JavaFX. I need the location to show Popups in text at the caret location.
I found request or it here:
https://bugs.openjdk.java.net/browse/JDK-8090849
and some workarounds here:
https://community.oracle.com/thread/2534556
They work somehow, but there are a few issues with location not updating correctly sometimes. Does anyone have a suggestion of how to get the caret position in terms of screen X and Y?
Just wanted to follow-up with an answer to this question for TextField controls in JavaFX. I'm sure the same could apply to other text input controls as well. I got the idea from looking at some code that involved changing the default colour of the caret using a subclass of TextFieldSkin class. If you look closely, the TextFieldSkin superclass holds a reference to the Path instance which represents the caret in a protected field called caretPath. Although this is kind of a hack'ish solution, it does provide developers with the absolute coordinates of the Caret in a much safer way than most of the hacks I've seen out there.
public class TextFieldCaretControlSkin extends TextFieldSkin {
public TextFieldCaretControlSkin(TextField textField, Stage stage) {
super(textField);
Popup popup = new Popup();
// Make the popup appear to the right of the caret
popup.setAnchorLocation(PopupWindow.AnchorLocation.CONTENT_BOTTOM_LEFT);
// Make sure its position gets corrected to stay on screen if we go out of screen
popup.setAutoFix(true);
// Add list view (mock autocomplete popup)
popup.getContent().add(new ListView<String>());
// listen for changes in the layout bounds of the caret path
caretPath.layoutBoundsProperty().addListener(new ChangeListener<Bounds>() {
#Override
public void changed(ObservableValue<? extends Bounds> observable,
Bounds oldValue, Bounds newValue) {
popup.hide();
// get the caret's x position relative to the textfield.
double x = newValue.getMaxX();
// get the caret's y position relative to the textfield.
double y = newValue.getMaxY();
Point2D p = caretPath.localToScene(x, y);
/*
* If the coordinates are negatives then the Path is being
* redrawn and we should just skip further processing.
*/
if (x == -1.0 || y == -1.0)
return;
// show the popup at these absolute coordinates.
popup.show(textField,
p.getX() + caretPath.getScene().getX() +
caretPath.getScene().getWindow().getX(),
p.getY() + caretPath.getScene().getY() +
caretPath.getScene().getWindow().getY() -
newValue.getHeight()); // put the popup on top of the caret
}
});
}
}
To use you'd have to embed this in some sort of subclassed text input control and remember to do textField.setSkin(new TextFieldCaretControlSkin(textField)). There may be better ways to do this since I am not a JavaFX expert but I just wanted to share this solution with the rest of the world just in case it provided some insight.
Hope this helps!
This is how you use RichTextFX to position a popup window 4px to the right of the caret:
InlineCssTextArea area = new InlineCssTextArea();
Popup popup = new Popup();
popup.getContent().add(new Label("I am a popup label!"));
area.setPopupWindow(popup);
area.setPopupAlignment(PopupAlignment.CARET_CENTER);
area.setPopupAnchorOffset(new Point2D(4, 0));
You still need to control the visibility of the popup window yourself by calling
popup.show(ownerWindow);
popup.hide();
See also this working demo.
I have an image that the user can drag to the right and it will spring back when the user releases it. I want to execute some code when a user drags it quickly and releases it. Now I have a very awkward requirement that the user can drag the image, then keep it still for any length of time (for example 5 seconds), then drag it quickly and release it. As long as the image is moving above a certain speed when it is released, it will execute the code. If it falls below the minimum speed, it executes some different code. So that means I can't calculate the length of time between the beginning of the gesture and the end and execute the code depending on the length of time. What can I do? I guess I somehow need to know the speed at which the image is moving in it's last 500 milliseconds before the gesture ends. However I've hit a brick wall figuring out how to do that. Any help would be greatly appreciated.
Can you please include an explanation and possible example code with your answer as that would be a great help.
If you get the start X,Y coordinates of when the image is dragged, and the X,Y coordinates for when the mouse is released, you can use pythagoras' theorm to calculate the distance between the two points: http://en.wikipedia.org/wiki/Pythagorean_theorem
Also, if you start a timer when the mouse is moved (and mouse button is down), and stop it in the mouseup event, you can calculate the speed using the time and distance (speed = distance / time)
edit following comments:
point delayedMousePos;
point previousMousePos;
bool secondDrag = false;
bool isStopped = false;
var timeFirstStopped;
var positionCount = 0;
array previousMousePositions[3];
// timer which monitors mouse position (set to an interval of say, 10ms)
function timerMonitorMousePos_Elapsed() {
point currentMousePos = getMousePos();
if (isStopped == false) {
if (positionCount >= 2) {
array_shift(previousMousePositions); // remove the first element of the array and move everything down to reindex numerical array to start counting from zero
positionCount = 2; // keep positionCount within array bounds
}
previousMousePositions[positionCount] = currentMousePos; // add the new position to the end of the 'stack'
positionCount++;
}
if (currentMousePos == previousMousePos) { // start check for stationary
isStopped = true;
if (timeFirstStopped == null) {
timeFirstStopped = NOW();
} else {
if (NOW() - timeFirstStopped >= 500) { // we have been stopped for at least 500ms (assumes time is counted in milliseconds)
secondDrag = true;
// previousMousePositions[0] = the mouse position 30ms before the mouse stopped
}
}
} else {
isStopped = false;
timeFirstStopped = null;
}
previousMousePos = currentMousePos;
}
I wouldn't use a timer. I would just save the starting date/time along with x,y position when the dragging starts.
When the dragging has ended, save the ending date/time and position. From those information, I can calculate the distance in pixel and duration in milliseconds.
After searching some more on the internet, I finally answered my own question.
I worked out what I needed to do:
My UIPanGestureRecognizer:
- (IBAction)handlePan3:(UIPanGestureRecognizer *)recognizer3
Get the velocity of the users finger moving across the screen:
CGPoint vel = [recognizer velocityInView:self.myView];
Then:
if (vel.x > /*value*/) {
// Your code
}
I was about to give up, but no! I got there in the end. Thanks for everyones help. I've upvoted one or two answers because they were helpful. bobnoble actually gave the suggestion to use velocityInView and I found this other stack overflow question which gave me the info I needed: iOS - Making sense of velocityInView on UIPanGesture
I'm using aChartEngine's 0.7.0 charting library for Android. I have a working XY chart that changes dynamically about every second when new data is received. However, it draws the line chart from left to right and eventually moves out of view. The only way to see the new data being drawn is to scroll the chart view to the right.
Does anyone know how to make the line draw new data on the left side so that older data eventually scrolls right out of view. Basically, reversing the direction of the chart line?
My code:
private XYMultipleSeriesDataset HRDataset = new XYMultipleSeriesDataset();
private XYMultipleSeriesRenderer HeartRateRenderer = new XYMultipleSeriesRenderer();
private XYSeries HRCurrentSeries;
private GraphicalView HRChartView;
in onResume():
if (HRChartView == null) {
LinearLayout layout = (LinearLayout) findViewById(R.id.HRchart);
HRChartView = ChartFactory.getLineChartView(this, HRDataset, HeartRateRenderer);
layout.addView(HRChartView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
// boolean enabled = HRDataset.getSeriesCount() > 0;
// setSeriesEnabled(enabled);
} else {
HRChartView.repaint();
}
in onCreate():
HeartRateRenderer.setAxisTitleTextSize(16);
HeartRateRenderer.setChartTitleTextSize(20);
HeartRateRenderer.setLabelsTextSize(15);
HeartRateRenderer.setLegendTextSize(15);
HeartRateRenderer.setMargins(new int[] {20, 30, 15, 0});
HeartRateRenderer.setAxesColor(Color.YELLOW);
String seriesTitle = "Heart Rate";
XYSeries series = new XYSeries(seriesTitle);
HRDataset.addSeries(series);
HRCurrentSeries = series;
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.RED);
HeartRateRenderer.addSeriesRenderer(renderer);
I have a service that receives data from a Blue Tooth device. When new data arrives I call this function:
public void setupHRChart(double x, double y)
{
HRCurrentSeries.add(x, y);
if (HRChartView != null) {
HRChartView.repaint();
}
}
in the manifest:
<activity android:name="org.achartengine.GraphicalActivity" />
in my layout:
<LinearLayout android:id="#+id/HRchart" android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="300px" android:layout_weight="1" />
-Hope that helps.
I actually decided to go with the natural flow direction of aChartEngine's dynamic line charts. I was able to lock the graph image so that the line no longer scrolls off the screen out of view. I also remove items from the beginning of the serires to keep a certain time span visible without the graph compressing into a mass of lines. It actually works really well.
Here's a youtube video demonstrating the charts in action: http://www.youtube.com/watch?v=mZMrOc5QaG0
I also remove items from the beginning of the series to keep a certain time span visible
The problem with this solution is that you actually loose data...
How about using the setXAxisMax and setXAxisMin of the renderer as follow:
0) set XAxisMax to a value, say 10 and set the XAxisMin value to 0
1) count the "ticks" in an xTick variable
2) once xTick is > XAxisMax:
2.1) set XAxisMax to xTick
2.2) set XAxisMin to what it was + 1
3) render the graph again
This way we actually shift the "visible part" of the graph (by playing with Xmin and Xmax) but do not loose any data (i.e., we can still scroll to see previous data-points):
renderer.setXAxisMin(0.0);
renderer.setXAxisMax(10);
xTick = 0;
lastMinX = 0;
private void refreshChart(double lastValue) {
/* check if we need to shift the x axis */
if (xTick > getRenderer().getXAxisMax()) {
getRenderer().setXAxisMax(xTick);
getRenderer().setXAxisMin(++lastMinX);
}
series.add(xTick++, lastValue);
mChartView.repaint();
}