Menu
I have a timeline chart, very similar to the very first example at this page (https://developers.google.com/chart/interactive/docs/gallery/timeline).
I have activities on the Y axis (making lunch, eating, ecc) and on the X axis i have the time.
I want to enable horizontal scroll and chart zoom in/out (As mentioned in this topic Google chart horizontal scrollbar). But i can't seem to get it working.
is there some way to enable horizontal scrolling on the timeline chart?
Many thanks.
Alessandro
284
On your computer, open a spreadsheet in Google Sheets. Click the chart you want to change. Drag the blue markers to resize the chart.
Right-click on any column inside your chart. Select 'Format data series'. Drag the slider under the 'Gap width' to the right to make the columns thinner and to the left to make the columns wider.
Overview. A timeline is a chart that depicts how a set of resources are used over time. If you're managing a software project and want to illustrate who is doing what and when, or if you're organizing a conference and need to schedule meeting rooms, a timeline is often a reasonable visualization choice.
To change the colors assigned to data series in a specific chart: Select that chart, then on the right, open the STYLE tab. In the Color by section, select Series order, Bar order, or Slice order, depending on the type of chart. Click a color box to set the color for each series.
there are no standard configuration options on the Timeline chart for scroll nor zoom.
but you could use css for horizontal scroll
set a specific width in the chart options --> width: 1200
and wrap it in a container with a smaller width and --> overflow-x: scroll;
see following working snippet for an example...
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable, {
width: 1200
});
}#chart_wrapper {
overflow-x: scroll;
overflow-y: hidden;
width: 400px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_wrapper">
<div id="chart_div"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
