[Fixed]-Static x-axis with datetime type column

by

1👍

✅

dates simply don’t work well with ColumnChart

you can try adjusting bar.groupWidth and other options but never seems to work

in the release notes, they mention they’ve…

Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.

none of these seem to do the trick

using a Material chart gets a little closer, but still displays many dates in between columns

but if you like the look of the chart with type: 'string'

you can use a DataView to draw the chart, based on the values from the filter

the following snippet creates a DataView,
converts the first column to 'string',
and filters the data based on the values chosen in the filter 

  var range = slider.getState();

  var dataView = new google.visualization.DataView(slider.getDataTable());

  dataView.setColumns([{
    calc: 'stringify',
    sourceColumn: 0,
    type: 'string'
  }, 1, 2]);

  dataView.setRows(dataTable.getFilteredRows([{
    column: 0,
    minValue: range.lowValue,
    maxValue: range.highValue
  }]));

see following working snippet, the chart is drawn when the slider is 'ready' and on 'statechange' 

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Date', type: 'date'},
        {label: '+', type: 'number'},
        {label: '-', type: 'number'},
      ],
      rows: [
        {c:[{v: new Date(2016, 2, 13)}, {v: null}, {v: -100}]},
        {c:[{v: new Date(2016, 3, 18)}, {v: 50}, {v: null}]},
        {c:[{v: new Date(2016, 4, 21)}, {v: 50}, {v: null}]},
        {c:[{v: new Date(2016, 5, 20)}, {v: null}, {v: -200}]},
        {c:[{v: new Date(2016, 6, 23)}, {v: 50}, {v: null}]},
        {c:[{v: new Date(2016, 7, 12)}, {v: 100}, {v: null}]},
        {c:[{v: new Date(2016, 8, 28)}, {v: 200}, {v: null}]},
        {c:[{v: new Date(2016, 8, 28)}, {v: null}, {v: -1000}]}
      ]
    });

    var options = {
      title: 'Transaction Chart'
    };

    var slider = new google.visualization.ControlWrapper({
      controlType: 'DateRangeFilter',
      containerId: 'filter_div',
      dataTable: dataTable,
      options: {
        filterColumnIndex: 0,
        ui: {
          format: {pattern: 'yyyy-MM-dd'}
        }
      }
    });

    google.visualization.events.addListener(slider, 'ready', drawChart);
    google.visualization.events.addListener(slider, 'statechange', drawChart);

    slider.draw();

    function drawChart() {
      var range = slider.getState();

      var dataView = new google.visualization.DataView(slider.getDataTable());
      dataView.setColumns([{
        calc: 'stringify',
        sourceColumn: 0,
        type: 'string'
      }, 1, 2]);
      dataView.setRows(dataTable.getFilteredRows([{
        column: 0,
        minValue: range.lowValue,
        maxValue: range.highValue
      }]));

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(dataView, options);
    }
  },
  packages: ['controls', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>
👤WhiteHat

Leave a comment