Timeline chart: two horizontal axis

30 views
Skip to first unread message

Stacy Piletskaya

unread,
Oct 4, 2016, 12:33:32 AM10/4/16
to Google Visualization API
Good day, guys!

I use a timeline chart to visualize a vacations schedule in my organization.
Now it looks like this:

What I want is to copy it on the top of the chart.
Here you can find the adding of the chart on a page
var container = document.getElementById('chart');
       
var chart = new window.google.visualization.Timeline(container);
       
var dataTable = new window.google.visualization.DataTable();
 
        dataTable
.addColumn({ type: 'string', id: 'Name' });
        dataTable
.addColumn({ type: 'string', id: 'BarDates' });
        dataTable
.addColumn({ type: 'date', id: 'Start' });
        dataTable
.addColumn({ type: 'date', id: 'End' });
        dataTable
.addColumn({ type: 'string', role: 'tooltip' });
       
var beginStr = "";
       
var endStr = "";
       
for (var i = 0; i < rows.length; i++) {
           
var elems = rows[i].split(',');
           
var begin = new Date(elems[1]);
            beginStr
= (begin.getDate() < 10 ? '0' + begin.getDate() : begin.getDate()) + '/' +
           
(begin.getMonth() + 1 < 10 ? '0' + (begin.getMonth() + 1) : begin.getMonth() + 1);
           
var end = new Date(elems[2]);
            endStr
= (end.getDate() < 10 ? '0' + end.getDate() : end.getDate()) + '/' +
           
(end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : end.getMonth() + 1);
           
if (beginStr === endStr) {
                isHidden
= true;
           
}
           
if (elems.length > 1) {
                dataTable
.addRow([elems[0], beginStr + ' - ' + endStr, begin, end, elems[3]]);
           
} else {
                count
= elems[0] - 0;
           
}
       
}
 
       
var options = {
            tooltip
: { isHtml: true },
            timeline
: {
                colorByRowLabel
: true
           
},
            width
: $('#chart').width(),
            hAxis
: {
                minValue
: new Date(date - 0, 0, 0),
                maxValue
: new Date(date - 0 + 1, 0, 0)
           
},
            backgroundColor
: '#fff'
       
};
 
        $
('#chart').height(count * 42 + 60);
 
        chart
.draw(dataTable, options);

In addition, there is a very strange behavior of months' names. They is chaning every refreshing of a page from English names to my native names. 

Please, help me cope with the problems.
Reply all
Reply to author
Forward
0 new messages