CODEWITHSUNDEEP
google-visualizationaxis-labels
Michael Greisman
Michael Greisman

Reputation: 410

Calculated text column for Google Line Chart x-axis not working

Changing my Line Chart's x-axis labels from one bit of text to another bit of text isn't working; what am I doing wrong, please?

I have a Line Chart whose discrete x-axis is labeled with text representations of the date. (I'm using corechart; I've created a dataTable, created a dataView based off of that, and have created the chart as a ChartWrapper).

I'm filtering the dataView based on the textual date, so my initial x-axis domain values are in the format 2013-09-01... and that works. But now I need to change the x-axis labels to the format 9/2013. The examples I've found on this seem clear, but the chart isn't drawn but is replaced by an error: "c is null". Googling that, the problem sounds like my domain column is the wrong data type, but I don't see how that's possible.

Can you please point out my error? Below, I've gotten the list of columns that I need displayed; that would be a list like [0,3,5] where 0 is the domain column. I remove it first so I can set the new, formatted column:

// Format the x-axis as n/Y
// remove unformatted column 0;
view_col_list.splice(0, 1);
data_displayed.setColumns([
  {
    role: 'domain',
    calc: function(dataTable, row) {
      var my_date = new Date(dataTable.getValue(row, 0));
      console.info('the date I want to format: %o',my_date);
      // this does in fact produce "9/2013"
      console.info('the date I want to show' + my_date.getMonth() + '/' + my_date.getFullYear());
      return my_date.getMonth() + '/' + my_date.getFullYear();
    },
    type: 'string',
    sourceColumn: 0,
    id: 0
  },
  view_col_list
]);

Upvotes: 0

Views: 418

Answers (1)

asgallant
asgallant

Reputation: 26340

I would guess that your dates are probably not the problem, but there are a few things I would recommend changing with them: remove the "sourceColumn" attribute, as it isn't needed; and change the way you are constructing your new date string, as converting a string to a Date object is inconsistent across browsers. Also, the #getMonth method returns the 0-indexed month, so "2013-09-01" would get turned into "8/2013" in your code (assuming the date string conversion works). There is an easier way that doesn't involve converting to Date objects and back into strings:

var dateArray = dataTable.getValue(row, 0).split('-');
return dateArray[1] + '/' + dateArray[0];

I suspect the problem is caused by this:

view_col_list.splice(0, 1);
data_displayed.setColumns([{...}, view_col_list]);

which is equivalent to data_displayed.setColumns([{...}, [...]]); which definitely won't work. Rather than splice the first element from the view_col_list, replace it with your object:

view_col_list[0] = {...};
data_displayed.setColumns(view_col_list);

Upvotes: 1

Related Questions