Major Issue with Extents/Zoom

I've been trying set up a graph that shows values over a 12 hour time period and want to be able to set a default viewing zoom level such that you can only see 1 hour at a time and then scroll side to side to view the rest of the graph.

My understanding is that you can use either extents or chart.zoom to achieve this however i've stumbled into a problem with both of these methods.
Extents, when using a time series as your x axis seems to have little affect.
Chart.zoom(), Correctly zooms my chart to the correct location but then won't allow to pan across the chart in order to view my data, unless i then zoom with the scroll wheel myself. This is obviously not the idea behaviour for a graph that will be primarily viewed on mobile.

Does any know a way around these issues?

I've attached my js file which should show my issue and i've made jsfiddle here as well: http://jsfiddle.net/oqo0e09k/9/

[graphTest_txt.txt](https://github.com/c3js/c3/files/599869/graphTest_txt.txt)