Question

I’m trying to have the x-axis on my Bubble chart display its label values in quarters such as “Q1 FY13”, similiar to the charts axis as shown:

In the API they mentioned using a domain column in the datatable as the role where you could then specify a string such as ‘Q1/09’ (https://developers.google.com/chart/interactive/docs/roles),

role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300

But from what I can tell this seems to be restricted by the type of chart you use, and bubble charts first column has to be a number.

This is a picture of what I have currently, using quarters as the axis, but alas you can’t tell what year you’re looking at…

So does anyone know if this possible? If not, is there another workaround I could do to show these labels?

UPDATE:

While the workarounds on the accepted answer should work, here is an answer from google groups that shows how to format the labels as Quarters:

https://groups.google.com/forum/#!topic/google-visualization-api/_qk7DkPmKxU

You can format the axis labels as quarters if you use a “date” axis (support for date axes is not listed in the documentation, but it works): http://jsfiddle.net/asgallant/m5bsr/

Answer 1

There are two ways to do this. You can not display the X-axis labels, and then add another div right below it displaying the axis categories (using a line chart, for instance).

The second chart would have no data at all in it. An example can be found here:

  function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'Cats');
    data.addColumn('number', 'Blanket 1');
    // This dummy series is to extend the chart from 0-5 for padding
    data.addColumn('number', null);
    data.addRows([
      [{v: 1, f:'A'}, 1, 10, null],
      [{v: 2, f:'B'}, 2, 5, null],
      [{v: 3, f:'C'}, 4, 12, null],
      [{v: 4, f:'D'}, 8, 5, null],
      [{v: 5, f:''}, null, null, {v: 0, f:''}]
    ]);

    options = {
      curveType: 'function',
      lineWidth: 2,
      hAxis: {
        // Show a baseline at 0
        baseline: 0,
        // 6 Gridlines, 4 labels + left and right for padding
        gridlines: {
          count: 6
        },
        // Hide our labels
        textPosition: 'none'
      },
      vAxis: {
        baseline: 0,
      },
      series: [
        {},
        {},
        // Hide our dummy series
        {
          lineWidth: 0,
          pointsize: 0,
          visibleInLegend: false
        },
      ]
    };

    // Add dummy data for the axis labels
    var data2 = new google.visualization.DataTable();
    data2.addColumn('string', 'x');
    data2.addColumn('number', 'dummy');
    data2.addRows([
      ['A', null],
      ['B', null],
      ['C', null],
      ['D', null]
    ]);

    chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
    chart1.draw(data, options);

    chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
    chart2.draw(data2,
                {
                  chartArea: {
                    top:0,
                    height:"0%"
                  },
                  min: 0,
                  max: 0,
                  hAxis: {
                    baselineColor: '#FFFFFF'
                  },
                  vAxis: {
                    baselineColor: '#FFFFFF',
                    direction: -1,
                    textPosition: 'none',
                    gridlines: {
                      color: '#FFFFFF'
                    }
                  }
                });
  }

This works, but is a bit annoying since you have to work with two separate charts and it is counter-intuitive for anyone who doesn’t know what you’re doing to figure out the code.

So jeffery_the_wind came up with an awesome solution that uses jquery to hack the SVG for the axis labels. The trick is to align the axis labels with position: in and then to use javascript to loop through the svg looking for properly aligned text elements, and changing their values with the contents of an array. Here is a sample of the code he used:

/*
 *
 * The following 2 functions are a little hacky, they have to be done after calling the "draw" function
 * The bubble chart originally displays only numbers along the x and y axes instead of customer or product names
 * These 2 functions replace those numbers with the words for the customers and products
 *
 */
for ( var i = -2; i < products.length + 1; i ++ ){
    $('#customer_product_grid svg text[text-anchor="start"]:contains("'+i+'")').text(function(j,t){
        if (t == i){
            if (i >= products.length || i < 0){
                return " ";
            }
            return products[i];
        }
    });
}

for ( var i = -2; i <= customers.length + 3; i ++ ){
    $('#customer_product_grid svg text[text-anchor="end"]:contains("'+i+'")').text(function(j,t){
        if (i >= customers.length + 1 || i <= 0){
            return " ";
        }else if (t == i){                    
            return customers[i-1];
        }
    });
}

This version is quite awesome, and a bit better for usability. It does, however, have issues if you want to add other text to the chart/align things in certain ways.

Pick your poison!