Set the hAxis.viewWindow.min/max options to one day before and after your first and last data points (may need to be more than one day, depending on scale). I made an example using your code here: http://jsfiddle.net/asgallant/NhyXu/
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> > > -- 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/-/6Wks7PuRD-wJ. To post to this group, send email to google-visualization-api@googlegroups.com. To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
