Goole Visualization DateRangeFilter Data issue. Data Conflict between Feb and March

问题

When I'm selecting the dates between 1st feb to 28th feb, the Google visualization displaying the data of March instead of February.

Screenshot

The Below code has data and control and chart wrappers.

    google.load('visualization', '1', {packages:['corechart','controls','table'], callback:drawChart});

Js Fiddle Link

Please help me in finding a solution for this.

Thanks in advance.

回答1:

try using the newer library, loader.js vs jsapi

seems to work fine here...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date','OrderDate');
    data.addColumn('number','Order_Qty');
    data.addRows([
      [new Date(2014,0,1),100],
      [new Date(2014,0,3),120],
      [new Date(2014,0,30),110],
      [new Date(2014,1,1),170],
      [new Date(2014,1,10),180],
      [new Date(2014,1,25),110],
      [new Date(2014,2,1),170],
      [new Date(2014,2,14),170],
      [new Date(2014,2,20),170],
      [new Date(2014,3,12),170],
      [new Date(2014,3,16),170],
      [new Date(2014,3,13),170]
    ]);


    var table_Chart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options': {},
      'view': {'columns':[0, 1]}
    });

    var slider_Date = new google.visualization.ControlWrapper({
        'controlType': 'DateRangeFilter',
        'containerId': 'filter_date_div_Date',
        'options': {
          'filterColumnIndex':'0'
        }
    });

    new  google.visualization.Dashboard(document.getElementById('dashboard_div'))
    .bind([slider_Date],[table_Chart])
    .draw(data);
  },
  packages: ['controls', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_date_div_Date"></div>
  <div id="table_div"></div>
</div>

回答2:

This was a bug in the Google charts Date() handling. It is fixed now by its developer.

Github: google/google-visualization-issues Chart data series shows up mis-aligned for all February data

回答3:

Short term solution for the .clone() and .toDataTable() issue with the live version of the Visualization.

Clone Usage:

prev: newDatatable = oldDatatable.clone();

now: newDatatable = cloneDataTable(oldDatatable);

ToDatatableUsage:

prev: newDatatable = oldDataView.toDatatable();

now: newDatatable = convertDataViewToDataTable(oldDataView);

Functions:

function cloneDataTable(dataTable) {
    var newDataTable = dataTable.clone();
    for (var c = 0; c < dataTable.getNumberOfColumns(); c++) {
        if (dataTable.getColumnType(c) == 'datetime' || dataTable.getColumnType(c) == 'date' ) {
            for (var r = 0; r < dataTable.getNumberOfRows() ; r++) {
                newDataTable.setValue(r, c, dataTable.getValue(r, c));
            }
        }
    }
    return newDataTable;
}

function convertDataViewToDataTable(dataView) {
    var newDataTable = dataView.toDataTable();
    for (var c = 0; c < dataView.getNumberOfColumns(); c++) {
        if (dataView.getColumnType(c) == 'datetime' || dataView.getColumnType(c) == 'date' ) {
            for (var r = 0; r < dataView.getNumberOfRows(); r++) {
                newDataTable.setValue(r, c, dataView.getValue(r, c));
            }
        }
    }
    return newDataTable;
}

Hope this helps... J

来源：https://stackoverflow.com/questions/37528321/goole-visualization-daterangefilter-data-issue-data-conflict-between-feb-and-ma

标签

javascript

google-visualization