Re: Column chart with dates on X-axis
asgallant
On Thursday, August 16, 2012 6:30:57 AM UTC-4, Vasily wrote:
Hello!I use Column Chart with several groups of values and date values on the X axis, and faced with a problem. Horizontally, the chart area is cutting out directly by the first and last date point without leaving any margin, so the bars displaying values for the first and for the last date in the date range are cutted too. While substituting formatted strings except of dates, it looks correctly, but it's unuseful for cases when intervals between date points may be different.
Temporarely I use adding one extra row containing just date with empty values at the beginning and end of rows array. But it looks not like a good straight-forward way, so it will be greatly appreciated if someone knows how to do it better.Thanks in advanse!
Code example:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.google.com/jsapi" ></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
// draw the chart using 'string' values on X-axis
var tbl = new google.visualization.DataTable();
tbl.addColumn('string', 'Name', 'Name');
tbl.addColumn('number', 'the good', 'good');
tbl.addColumn('number', 'the bad', 'bad');
tbl.addColumn('number', 'the ugly', 'ugly');
tbl.addRows([
['2012-08-14', 5, 4, 7],
['2012-08-15', 2, 8, 5],
['2012-08-16', 3, 8, 5],
['2012-08-15', 4, 8, 5]
]);
var options = { 'title':'String values example',
'width':700,
'height':500
};
var table = new google.visualization.ColumnChart(document.getElementById('graph'));
table.draw(tbl, options);// draw the chart using 'date' values on X-axis
tbl = new google.visualization.DataTable();
tbl.addColumn('date', 'Date', 'name');
tbl.addColumn('number', 'the good', 'good');
tbl.addColumn('number', 'the bad', 'bad');
tbl.addColumn('number', 'the ugly', 'ugly');
tbl.addRows([
[new Date(2012, 08, 14), 5, 4, 7],
[new Date(2012, 08, 15), 2, 8, 5],
[new Date(2012, 08, 16), 3, 8, 5],
[new Date(2012, 08, 17), 4, 8, 5]
]);
options = { 'title':'Date values example',
'width':700,
'height':500
};
table = new google.visualization.ColumnChart(document.getElementById('graph1'));
table.draw(tbl, options);
}</script>
</head>
<body>
<div id="graph">
</div>
<div id="graph1">
</div>
</body>
</html>