I have my google line chart which looks something like this:
10| .
| .....----''' ''--.
09| .-----''''' ''-
| '.
08| \
| '.
07| '.
|________________________________________________________
2012/12/27 12:01 2012/12/26 12:22 2012/12/25 11:33
And I want it to look like this (notice the X-Axis label):
10| .
| .....----''' ''-.
09| .-----''''' \
| '.
08| \
| '.
07| '.
|_______________________________________________
2012/12/27 2012/12/26 2012/12/25
12:01 12:22 11:33
I tried adding <br>
, \n
, and \r
but no luck.
I looked through the documentation and the closest thing I found was hAxis.maxTextLines
but there is no minTextLines
options so I couldn't figure out how to force it. How can I do this?
It seems that this is possible when creating charts by linking to google. You just have to set the chxt
variable with extra x values (however many more x axes you need): chxt=y,x,x
. And then for each x axis, you set what the labels will be with the chxl
variable. chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33
For example:
http://chart.apis.google.com/chart?chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33&chxr=0,7,10&chxt=y,x,x&chs=360x240&cht=bvg&chco=000000&chd=t1:9,10,7&cht=lc&chds=7,10
But the way I am creating my charts is through JavaScript. This way:
google.setOnLoadCallback(function(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Count');
//Populate data
new google.visualization.LineChart(document.getElementById('chart')).
draw(data, {curveType: 'function',
chartArea: {left: 70, top: 50, width: '100%', height: '85%'},
width: 950, height: 800,
interpolateNulls: true,
pointSize: 5,
legend: {position: 'none'},
vAxis: {title: 'Count', viewWindow: {min: 7, max: 10}},
hAxis: {title: 'Date', viewWindow: {min: 0, max: 3}}
});
});
So I need to figure out a way how to do this using this format/API. How can I do it this way?
To change this data, click on the current column listed as the “X-axis” in the “Chart Editor” panel. This will bring up the list of available columns in your data set in a drop-down menu. Select the current Y-axis label to replace your existing X-axis label from this menu.
I used:
hAxis: {format:'MMM dd, yyy \nHH:mm'}
in my options array and Google API formatted it as
Mar 05, 2014
16:00
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With