Search code examples
javascriptgoogle-visualizationannotatedtimeline

Use numbers, instead of seconds on annotated time line

I am trying to use google charts, 'Annotated Time Line'.

On the column I want to use numbers, which 

dataTable.addColumn({ type: 'number', id: 'Start' });
dataTable.addColumn({ type: 'number', id: 'End' });

But the problem is, still the number is taken as milli second, hence after each 60 seconds, clock is set back to 0 (1 minute) and then it continues. I want it to show as 60, 65, 70 and so on instead of 0, 5, 10 (after each minute).

Current

Current

Display as

Display as

Is there a quick way to do this?

EDIT: Link to JSFIDDLE (with original data) with simplified data: jsfiddle

Solution

  • Here I am guessing that the axes always have constant increment, but guess its always like that:

            google.visualization.events.addListener(chart,'ready',function(){
                var axes=[];
                $('#time-line svg text').each(function(){
                    var t = $(this).text();
                    if(t == parseInt(t).toString() && t.length > 0){ // if its a number text, its an axis
                        axes.push($(this))
                    }
                })
                var inc = Number(axes[1].text()); // increment
                var sum=0;
                for(var i=0;i<axes.length;i++){
                    var txt=axes[i].text();
                    var num=Number(txt);
                    axes[i].text(sum); // set new value
                    sum+=inc;
                }

            })




            chart.draw(dataTable);

    Working example: http://jsfiddle.net/6M2sH/233/