Auto rescale Y-axis in Google Rendering API / Annotated timeline

Is there a way to get the Annotated Time Line graph to automatically rescale on the Y-axis when the user gets closer to the date range?

Take a look at the example below and note that the value ("price") for 2009-10-09 is approximately two values ​​larger than the others. When the user zooms in, for example, 2009-10-01 - 2009-10-08, the Y-axis has not changed (making the graph pretty useless). Is there a way to automatically rescale the Y-axis so that in this example it will range from 0 to 25 or something more reasonable (and then, of course, revert to the default when the user zooms in)?

Example: http://jsbin.com/ifogo

Sample code (same as in the link above):

<script src="http://www.google.com/jsapi"></script>
<div id="visualization" style="width: 800px; height: 400px;"></div>
<script>
google.load('visualization', '1', {packages: ['annotatedtimeline' ]});
function drawVisualization() {
  var data = new google.visualization.DataTable({
  cols: [{label: 'Date', type: 'date'}, {label: 'Price', type: 'number'}],
  rows: [
    { c:[{v: new Date(2009, 10, 1) }, {v: 11 }]},
    { c:[{v: new Date(2009, 10, 2) }, {v: 12 }]},
    { c:[{v: new Date(2009, 10, 3) }, {v: 13 }]},
    { c:[{v: new Date(2009, 10, 4) }, {v: 11 }]},
    { c:[{v: new Date(2009, 10, 5) }, {v: 10 }]},
    { c:[{v: new Date(2009, 10, 6) }, {v: 16 }]},
    { c:[{v: new Date(2009, 10, 7) }, {v: 22 }]},
    { c:[{v: new Date(2009, 10, 8) }, {v: 12 }]},
    { c:[{v: new Date(2009, 10, 9) }, {v: 999 }]},
]},0.6);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization'));
annotatedtimeline.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>

      

+2


source to share


1 answer


Try to use

annotatedtimeline.draw(data, {scaleType: 'maximized'});

      



The Google page on this visualization shows the different options that you can use.

+4


source







All Articles