Open sjunnesson opened 9 years ago
Hi, Could you tell me the detail? I'd like to know what kind of functionality do not work. It seems working on my mobile device and I guess it's simply because the region to detect the action is very small for touching point (it's enough for mouse cursor). Anyway, if there is a problem for touch device, we should fix it.
i have problem with assigning a "onclick" function for bar charts and get it to trigger. Seems to function on a iPhone in the default browser but trouble on a Android Chrome. The function never fires.
Unfortunately I cant share my example since it is an internal prototype under NDA. Will see if I can recreate it with a fiddle
Thank you for the detail. I'm testing on Nexus 5 and it looks working, so it might a problem about browser version. The code is like:
var chart = c3.generate({
data: {
columns: [
['sample1', 30, 200, 0, 250, 150, 250],
['sample2', 430, 300, 500, 400, 650, 250]
],
onclick: function (d) {
alert("id =>" + d.id + ", value =>" + d.value);
},
type: 'bar'
}
});
Does it work when we use d3.touch
? If so, it would be easier to use d3.touch
than some workaround.
I can't replicate the issue on my Nexus 4 running Lollipop:
http://embed.plnkr.co/YZeUHJRTmMktM9D04ZUc/preview
Though I am having some issues getting it to propagate back through the directive in Angular (though it's possible I'm just doing it wrong). Perchance are you using AngularJS?
Onclick is not working on IOS touch devices. http://jsfiddle.net/3g7jm4g2/ A test on an Android device is working.
data.onclick is working on Android devices but is not responding on iOS devices. When clicking on iOS, the tooltip displays, but onclick callback is never triggered.
I kept looking at the code and playing with the graphs in iOS simulator and noticed that if you set the tooltip to false, the data.onclick callback works as expected on iOS.
I had the same issue on an iPhone 4S and was able to "fix" it by removing the tooltip as suggested by @nillotrejos.
I'm having a similar experience with iOS TouchEvent clicks not working.
By adding some logs to the event handlers I can see that on desktop and Android a Touch produces the following events in this order from the "generateEventRectsForSingleX" series of events
However, on iOS devices, the only events that are produced are
I have not unilaterally had the same success with fixing this by disabling tooltips (nor is that really an option in our case)
has anyone found a fix for this. On safari(iOS) when i tap on a data point it shows the tooltip, but it does not fire the onclick event. On chrome(Android) when i tap on a data point it works as expected and fires the onclick event, but there is no way to view the tooltip unless you have a device that supports hover events
@mcarey1590 I have a PR out about this that worked for us. It was a long time ago, so I don't know how it aligns with the current code base, but it should at least provide a starting point for you.
Thanks I will look into it
Hi,
I'm using C3 js in my Cordova Hybrid app. I have multple charts on the screen, so the user is supposed to scroll. The chart works well in android but the scrolling is not smooth in iphone. Tested on iPhone 6. Kindly help me if there is any tip make the scrolling smooth in iPhone.
Thanks, Eljo
The problem still exists: Unable to trigger the onclick function on iPads and Iphones. It seems to come from safari, see below: (https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)
It would be enough to add cursor: pointer
on the concerned element to trigger the event but the function "c3_chart_internal_fn.generateEventRectsForSingleX" changes the style from behind. Any updates ?
Also, a workaround could be to use ... two fingers (right click on iOs devices).
I kept looking at the code and playing with the graphs in iOS simulator and noticed that if you set the tooltip to false, the data.onclick callback works as expected on iOS.
Works disabling the tooltip! Thanks
No news ? I still have the problem
It seems that c3js is using " mouse = d3.mouse(this);" everywhere in the code to handle events. This makes touches from mobile devices undetectable. Could a "touch = d3.touch(this); " be implemented in some way to handle this?