Changing x-axis label to show year and quarter for Google Visualization Bubble chart

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:

Quarter demo

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...

enter image description here

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/

jmac jmac · Accepted Answer · 2013-02-08T02:39:58

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!

Changing x-axis label to show year and quarter for Google Visualization Bubble chart

1 Answers