Pergunta

Existe alguma maneira de forçar o gráfico de linha do tempo anotado para alterar automaticamente a escala no eixo y quando o usuário amplia uma faixa de datas?

Verifique o exemplo abaixo e observe que o valor ("preço") para 2009-10-09 é cerca de duas magnitudes maiores que os outros valores. Quando o usuário aproxima o zoom no por exemplo, 2009-10-01-2009-10-08, o eixo y permanece inalterado (tornando o gráfico bastante inútil). Existe uma maneira de redimensionar automaticamente o eixo y, de modo que, neste exemplo, ele variaria de 0 a 25 ou algo mais razoável (e, é claro, de volta ao padrão quando o usuário diminui o zoom)?

Exemplo: http://jsbin.com/ifogo

Código de exemplo (o mesmo que no link acima):

<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>
Foi útil?

Solução

Tente usar

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

A página do Google nessa visualização mostra as várias opções que você pode usar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top