2

   
 function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Day');
        data.addColumn('number', 'AVG Position');
        data.addRows([
            [new Date('2015-04-14'),2.3],
            [new Date('2015-04-13'),2.6],
            [new Date('2015-04-12'),2.7],
            [new Date('2015-04-11'),2.8],
            [new Date('2015-04-10'),2.7],
            [new Date('2015-04-09'),2.6],
            [new Date('2015-04-08'),0.0],
            [new Date('2015-04-07'),0.0],
            [new Date('2015-04-06'),2.7],
            [new Date('2015-04-05'),2.2]
        ]);
    
    var formatadata = new google.visualization.DateFormat({pattern: 'dd/MM',  timeZone: 0}).format(data, 0);
    
    var options = {
          title: 'AVG Position',
          theme: 'maximized',
          chartArea: {width: '100%', height: '100%'},
          legend: {position: 'none'},
          width: 600, height: 250,
          hAxis: { format: 'dd/MM' },
          pointSize: 5
        };
    
    chart = new google.visualization.AreaChart(document.getElementById('chart')).draw(data, options);
 
}

drawChart();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
</script>
<div id="chart"></div>

Problemas:

1) A linha está muito colada no topo, necessário passar o mouse para ter ideia de quais são os valores mais altos. Mesmo tirando as settings de theme e chartarea, o gráfico continua colado ao topo. Gostaria de deixar uma folga para melhorar a visualização do gráfico. Poderia setar um valor usando max e min, mas os valores não são pré-definidos.

2) Não mostra a data de início e final, já tentei com showEvery:1 e nada.

0

1 Resposta 1

1

 chartArea: {width: '100%', height: '100%', left: 10, top: 20},

5
  • o top e o left apenas reposiciona o chart dentro da div, não tendo efeitos práticos. Commented 15/04/2015 às 19:16
  • O TOP não 'descola' o chart do Topo, evitando de ficar colado ? Commented 15/04/2015 às 19:28
  • o post foi editado, o código incluído e o fiddle foi removido. Olha só que estranho fica o gráfico: jsfiddle.net/snkfqfhy Commented 15/04/2015 às 19:34
  • fiz uma gambiarra vAxis: { maxValue: (data.getColumnRange(1).max + (data.getColumnRange(1).max / 10))}, Commented 15/04/2015 às 19:41
  • Pode ser assim também: title: 'AVG Position', chartArea: {top: 20}, hAxis: { format: 'dd/MM' }, pointSize: 5, vAxis: {minValue: 0} Commented 15/04/2015 às 19:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .