Column chart with broken date axis

Question

I have a column with x-axis position which is a date. This chart worked this morning, but it suddenly broke and it displays "Series bars with an axis of value values ​​are not supported." as an error message. This website is not updating after a few weeks.

My DataTable build code looks like this:

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 with my code to fix this?

Answer 1

The problem is with the Date fields. I converted the date field to String, and now I am using String. If you use formatters, you can format the value before delivering it to the DataTable:

 formatter.formatValue(date) 

I assume this is a mistake; I will try to write an error report.

Answer 2

It's not a mistake. The Google Visualization 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 note that this option is only available for a limited time and will be removed soon.

The recommended solution is that you change the Date fields along the x axis to String. I achieved this with formatting before adding the value to the DateTable.

 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}});