title: Google Charts - How to line break axis label into two rows? (Multiple X Axes)
body: <p>I have my google line chart which looks something like this:</p>
  
  <pre><code>10|                        .
    |            .....----''' ''--.
  09| .-----'''''                  ''-
    |                                 '.
  08|                                   \
    |                                    '.
  07|                                      '.
    |________________________________________________________
     2012/12/27 12:01    2012/12/26 12:22    2012/12/25 11:33
  </code></pre>
  
  <p>And I want it to look like this (notice the X-Axis label):</p>
  
  <pre><code>10|                        .
    |            .....----''' ''-.
  09| .-----'''''                 \
    |                              '.
  08|                                \
    |                                 '.
  07|                                   '.
    |_______________________________________________
     2012/12/27          2012/12/26       2012/12/25
     12:01               12:22            11:33
  </code></pre>
  
  <p>I tried adding <code>&lt;br&gt;</code>, <code>\n</code>, and <code>\r</code> but no luck.</p>
  
  <p>I looked through the documentation and the closest thing I found was <code>hAxis.maxTextLines</code> but there is no <code>minTextLines</code> options so I couldn't figure out how to force it. How can I do this?</p>
  
  <p><hr>
  <strong>UPDATE</strong></p>
  
  <p>It seems that this is possible when creating charts by linking to google. You just have to set the <code>chxt</code> variable with extra x values (however many more x axes you need): <code>chxt=y,x,x</code>. And then for each x axis, you set what the labels will be with the <code>chxl</code> variable. <code>chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33</code> </p>
  
  <p>For example:</p>
  
  <p><a href="http://chart.apis.google.com/chart?chxl=1:%7C2012/12/27%7C2012/12/26%7C2012/12/25%7C2:%7C12:01%7C12:22%7C11:33&amp;chxr=0,7,10&amp;chxt=y,x,x&amp;chs=360x240&amp;cht=bvg&amp;chco=000000&amp;chd=t1:9,10,7&amp;cht=lc&amp;chds=7,10" rel="noreferrer"><strong>http://chart.apis.google.com/chart?chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33&amp;chxr=0,7,10&amp;chxt=y,x,x&amp;chs=360x240&amp;cht=bvg&amp;chco=000000&amp;chd=t1:9,10,7&amp;cht=lc&amp;chds=7,10</strong></a></p>
  
  <p>But the way I am creating my charts is through JavaScript. This way:</p>
  
  <pre><code>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}}
                 });
  });
  </code></pre>
  
  <p>So I need to figure out a way how to do this using this format/API. How can I do it this way?</p>