explorer on Google Chart does not work - Polymer

Question

I'm using the google-chart web components but the explorer (that allow zooming in and out) does not work. Here is the code :

 options: { type:Array, value:{ title: 'Today Consumption', curveType: 'function', chartArea:{ backgroundColor: '#E2E8ED', height: 300, width: 650, }, explorer: { axis: 'horizontal', keepInBounds: true, maxZoomIn: 4.0 }, height: 400, width: 830, backgroundColor:'#E2E8ED', colors:["#4882A8"]} } }, 

 <google-chart type="line" options='{{options}}' data='{{chartData}}'></google-chart> 

It looks like that : But I'm unable to zoom in or out..? Does someone have an idea of why it doesn't work?

Answer 1

explorer only works with continuous axes (such as numbers, dates or timeofday)

for the x-axis, use type --> 'timeofday'
which should be an array with 3-4 elements...

[hour, min, second]
[hour, min, second, milli]

the following should convert your string values to a valid 'timeofday'

var timeStr = '2h19m';
var hour = timeStr.split('h');
var min = hour[1].split('m');
var timeArr = [parseInt(hour[0]), parseInt(min[0]), 0];