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>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/ISRA-nr8_L4J.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
