Javascript – Google Charts – How to line break axis label into two rows? (Multiple X Axes)

google-visualizationjavascriptline-breakssvg

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?


UPDATE

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=360×240&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?

Best Answer

I used:

hAxis: {format:'MMM dd, yyy \nHH:mm'}

in my options array and Google API formatted it as

Mar 05, 2014
   16:00
Related Topic