Dates on X axis in ColumnChart result in crazy axis labels

[Martin Omander]

My app handles datasets in which the first column is a date, followed
by a variable number of number columns. The app uses these datasets to
draw Annotated Timelines and ColumnCharts. It recently started showing
crazy X axis labels. Here is a typical, small data set:

google.visualization.Query.setResponse({"status":"ok","table":{"rows":
[{"c":[{"f":"2012-10-11","v":"Date(2012,9,11)"},{"v":40},{"v":
31}]}],"cols":[{"type":"date","id":"date","label":"Date"},
{"type":"number","id":"Forum misc, new posts","label":"Forum misc, new
posts"},{"type":"number","id":"Forum misc, answered within
48h","label":"Forum misc, answered within
48h"}]},"reqId":"11","version":"0.6"});

When rendered as a ColumnChart, this data used to result in a blue and
a red bar for "2012-10-12", but recently it has started acting up. The
blue and red bars are still there, but shifted to the left, and the X
axis now goes from the year "2000" to "2050".

At the web page https://developers.google.com/chart/interactive/docs/customizing_axes#Help
there are two proposed remedies:

1. Change the type of your first data table column to string.
If I did this, the back-end code would have to know if the front-end
intends to draw the graph as an Annotated Timeline (a date column is
required) or a ColumnChart (a date column messes up the X axis). This
seems backwards and it would require a rewrite of my back-end, so I'd
like to avoid it.

2. Use a DataView as adapter to convert the type of your first data
table column to string.
When I tried this, the red bar disappeared and only the blue bar was
displayed.


Is there another way to fix this display issue, so I get back the blue
and a red bar for "2012-10-12" with proper labeling for the dataset
above?


Best Regards,

Martin

[Sergey Grabkovsky]

Hi,

I'm sorry that there isn't a right solution for this. The correct thing to do would be to force the chart to interpret the column as discrete, but there isn't a way to do this today. The best that you can do is to use a view like you said. Here is how I did it:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable({

    "rows": [
      {"c":[{"f":"2012-10-11","v":"Date(2012,9,11)"},{"v":40},{"v": 31}]}],
    "cols":[
      {"type":"date","id":"date","label":"Date"}, 
      {"type":"number","id":"Forum misc, new posts","label":"Forum misc, new posts"},

      {"type":"number","id":"Forum misc, answered within 48h","label":"Forum misc, answered within 48h"}]});
  
  var view = new google.visualization.DataView(data);
  view.setColumns([{calc:function(dataTable, rowNum) {
    return dataTable.getFormattedValue(rowNum, 0).toString();
  }, type:'string', label:'Height in Inches'}, 1, 2]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(view,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"}}
      );

[Martin Omander]

Sergey, got it. It's unfortunate that there is no clean way to resolve
this. But thanks for letting me know!

Martin

> >https://developers.google.com/chart/interactive/docs/customizing_axes...