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.