Question

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?

Answer 1

Final Update

Working Example: http://jsbin.com/eyokec/1/ (edit version)

Well, as usual, some digging around yielded a few possible solutions. I was only successful at getting one to work but at least you know it’s possible at this point. This answer from Insert Links into Google Charts api data? provided the working solution above.

  // Note: You will probably need to tweak these deltas
  // for your labels to position nicely.
  var xDelta = 35;
  var yDelta = 13;
  var years = ['2012/12/27|12:01','2012/12/26|12:22','2012/12/25|11:33','2012/12/24|11:33'];
  $('text').each(function(i, el) {
      if (years.indexOf(el.textContent) != -1) {
          var g = el.parentNode;
          var x = el.getAttribute('x');
          var y = el.getAttribute('y');
          var width = el.getAttribute('width') || 70;
          var height = el.getAttribute('height') || 35;
  
          // A "ForeignObject" tag is how you can inject HTML into an SVG document.
         var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
          fo.setAttribute('x', x - xDelta);
          fo.setAttribute('y', y - yDelta);
          fo.setAttribute('height', height);
          fo.setAttribute('width', width);

          var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
          var p = document.createElement("P");

          p.setAttribute("style", "font-size:.8em; font-family:Arial;text-align:center;color:#555;");
          p.innerHTML = el.textContent.replace('|','<br />');

          body.appendChild(p);
          fo.appendChild(body);
  
          // Remove the original SVG text and replace it with the HTML.
          g.removeChild(el);
          g.appendChild(fo);
      }
  });

The above code work but, understandably, is far from ideal. It’s just a proof of concept that you can hopefully use. I saw other similar questions about updating SVG files but I couldn’t get them to work. The above code might be able to update th SVG <text> nodes relying on <tspan> for multi-line support. I might try to get that to work at some point.

Tests

• Chrome 23.0.1271.97 m: PASS
• Firefox 17.0.1: PASS (more height needed)
• IE9: FAIL (not sure why)

References

• Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM
• http://raphaeljs.com/
• jQuery SVG: http://keith-wood.name/svg.html

---

Update 0

Also, it appears that Google Image Charts API is now deprecated.

Important: The Image Charts portion of Google Chart Tools has been officially deprecated as of April 20, 2012. It will continue to work as per our deprecation policy.

So, although you can create the chart as an example of what you would like, it’s possible that functionality was not brought over to Google Chart Tools.

That said, I did find this Chart Wizard that will help create the necessary JavaScript to embed your chart with the Visualization API.

---

Original

Doesn’t appear possible. You could force it using hAxis.minTextSpacing. It works but that’s certainly not the purpose of that configuration option. You could also pull the labels out and handle them via HTML, but I know that’s not ideal either.