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><scripttype="text/javascript" src="https://www.google.com/jsapi"></script><scripttype="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
</script>
<div id="chart"></div>
Problems:
1) The line is very glued to the top, you need to pass the mouse to get an idea of what the highest values are. Even by taking settings and chartarea , the chart remains glued to the top. I'd like to take some time off to improve the graph view. You could set a value using max and min , but the values are not predefined.
2) It does not show the start and end dates, I've already tried with showEvery: 1 and nothing.