Column Chart with date axis not working

Question

I have a Column Chart with an x-axis value which is a date. This chart worked this morning but is suddenly broken and displaying "Bars series with value domain axis is not supported." as an error message. The website in question hasn't been updated in weeks.

My DataTable construction code looks like:

var data= new google.visualization.DataTable({
        "cols":[{"label":"Date","type":"date"},{"label":"New Users","type":"number"}],
        "rows":[{"c":[{"v":new Date(1325656800000),"f":null},{"v":1355,"f":null}]}]
    });

What can I do to my code to fix this?

Answer 1

It's not a bug. Google Visualisation API has changed.

At http://code.google.com/apis/chart/interactive/docs/customizing_axes.html#Help they post some solutions to this problem. Using option:

strictFirstColumnType: false

can only be used as a temporary solution. Google says:

However, please bare in mind that this option is only available for limited time and will be removed in the near future.

The recommended solution is that you change your Date fields on x axis to String. I've achieved this by using formatter before adding value to the DateTable object.

var formatterMoney = new google.visualization.NumberFormat({suffix: ' zł', decimalSymbol: ',', groupingSymbol: ' '});  
var formatterDate = new google.visualization.DateFormat({pattern: 'dd.MM.yyyy'});

var data = new google.visualization.DataTable();

data.addColumn('string', 'order date'); //used to be date field here
data.addColumn('number', 'total amount');
data.addRow([formatterDate.formatValue(new Date('2011-12-20')),971793.93]); //used to be Date object, now is Date formated as String
data.addRow([formatterDate.formatValue(new Date('2011-11-30')),1.0]);
data.addRow([formatterDate.formatValue(new Date('2011-11-17')),1.0]);
data.addRow([formatterDate.formatValue(new Date('2011-10-27')),1.72]);
data.addRow([formatterDate.formatValue(new Date('2011-10-26')),10.27]);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
formatterMoney.format(data, 1);
chart.draw(data, {width: window.width, height: 400, hAxis: {direction: -1}});

Answer 2

The problem is with the Date fields. I've converted the date field to a String and I'm using a String now. In case you are using formatters, you can format the value before supplying it to the DataTable:

formatter.formatValue(date)

I'm guessing this is a bug; I'll try to file a bug report.