Can't use Nivo tooltip or crosshair draggability on mobile - javascript

I'm trying to create a line chart that uses crosshairs and tooltip using Nivo. I was able to get everything working great on desktop, but on mobile, when I try to drag across the graph with my finger, nothing happens. The only time the crosshair and tooltip comes up is when I tap.
This draggable functionality was working with react-vis, but I needed to move away from that for various reasons.
Any recommendations or help?

Related

D3 js unexpected behavior on rapid mouse clicks

I have a multiline chart using D3, and the lines have nodes to mark the points. I also have legends below x-axis to display or hide each line when a user clicks on them. Similar to this example
The chart and legend selection works totally fine when I click normally on legends. But when I click rapidly on legends, one of the lines' nodes disappear. When I inspected the page, I found they got relocated to the top of the browser window(and not visible because there's no svg element there)
I don't even know what the problem is and where should I start debugging as it works fine with normal speed mouse clicks on legends.
I know it is very difficult for anyone to help without looking at the source code or a working fiddle, but I just wanted to know (before I try to reproduce the problem on fiddle) has anyone experienced something like this before? does mouse clicking speed affect how elements get rendered in D3? or this is not a D3 problem at all and some javascript/dom thing I am overlooking?
Some "strange" behaviour can occur depending on how your transitions are set up. For example, if there are many transitions attached to the same element, one might be interrupted when another one starts, and that may result on some element not being redrawn on screen.
For more about this see D3 documentation: Working with transitions, specifically this section which explains that "for a given element, transitions are exclusive: only one transition can be running on the element at the same time. Starting a new transition on the element stops any transition that is already running."

HTML5 - building an iPad address bar magnifier with map area highlight

I am trying to build an example to highlight multiple image map areas on an html page for the iPad. The idea is similar to the magnifier feature that you notice when you tap and hold the mobile safari address bar. You can pan the magnifier around to go to a particular character. I am trying to leverage the same user experience to highlight image map "poly" areas. When I pan the magnifying glass, I want to scroll through the areas by highlighting them and making them active.
I am thinking of using the Jquery Maphighlight plugin alongwith a CSS/JS magnifier sample
http://persistent.info/files/20040508.magnifier/
http://davidlynch.org/projects/maphilight/docs/
The place I'm stuck is the actual scrolling between the areas and highlighting them automatically.
I was wondering if anyone has done something similar to what I'm trying to achieve.
Cheers!
Sameer
I couldn't quite conceptualise what you were wanting, but this may help in any case.
use the pseudo class :active in your css and in the tag add
In this demo I've simply used CSS transform to simulate the zooming, but it could be replaced with whatever you want. I think you will find a pure css option faster then any javascript.
http://jsfiddle.net/thurstanh/QEudm/5/
<body ontouchstart="">
css
img:active {
-webkit-transform:scale(2,2);
}

Cant move the screen if i swipe on the items in the grid - metro style application

I have just created a grid application using the template provided in Visual Studio 11.
If I swipe in the area that does not have any content (area outside listview) the screen moves, as I expected, in the swipe direction.
My problem is, if the user swipes on the area which contain items in the list view, nothing will happen.
How can i make the swipe functionality similar on the entire screen?
it worked fine as i expected when i added some more data-win-options to the list view..
Here is my final data-win options
data-win-options="{selectionMode:'none',swipeBehavior:'none',tapBehaviour:'invoke'}"

highcharts , Hide a chart

My GWT application consists of a "Dashboard" that has a few charts . I need to be able to hide and show charts as and when necessary.
As you can see in the jsfiddle below, i was able to hide the chart, but the invisible chart eats up mouse events(when the mouse hovers over the invisible chart the tooltips are still displayed).I need to stack another canvas on top of the chart when the chart is hidden.But since the chart is taking up the mouse events , my canvas cannot receive any. Any ideas as to how to fix this ?
http://jsfiddle.net/archerabi/vnBsx/1/
I think it's because you're only hiding the legend instead of the whole container. I changed .highcharts-legend to .highcharts-container and I think it solved that issue. See here

Is Slider possible in sencha charts?

As my requirements is to show the slider in the line charts using sencha touch. Is it possible to show the slider in line charts?
In ExtJs examples, slider is there for Area charts and they used the slider in track mouse within interactions.But am developing application for mobiles, so for mobile we cannot have track mouse option.
I am referring to the example Area - Browser Stats, bundled with touch charts 1.0.0. In our mobile application, the requirement in line chart is that, when user tap and drags on line, it should display/update respective marker values on a slider kind of control, which moves on top of line chart along with user's finger.
How can i keep track of line chart marker values, when user moves/drags his finger on a line (in line chart)?
Is it possible to display a vertical line on x-axis (parallel to y-axis), which moves along with user's finger and displays respective marker value on top of that vertical line?
Latest sencha touch 2.1 comes with chart support. In that within your chart object specify this config
{
type: 'iteminfo',
listeners: [
{
fn: function(me, item, panel) { //item.record.get('X') will get you the axes value
panel.setHtml('Text you want to display');
},
event: 'show'
}
]}
Hope it helps... Although it wont drag as you require you can display the value when user taps on a marker...

Categories

Resources