I need to filter elements in google.visualization.datatable used in Google Charts

问题

I'm populating my google's datatable via using this code

$.ajax({
    url: "Default2.aspx/GetChartData",
    data: "",
    dataType: "json",
    type: "POST",
    contentType: "application/json; chartset=utf-8",
    success: function (data) {
        chartData = data.d;
    },
    error: function () {
    alert("Error loading data! Please try again.");
    }
}).done(function () {
        google.charts.setOnLoadCallback(drawChart);
    });
function drawChart() {
      var data = google.visualization.arrayToDataTable(chartData);

Now I want to delete rows based on some filters which check the particular value(date) from the row of the datatable. But the problem is that there is not any method in documentation using which i can go through row elements.

回答1:

you can use a DataView to show only certain rows from the DataTable

using the getFilteredRows and setRows methods...

the getFilteredRows method returns an array of row indexes that meet certain criteria

the criteria is an array of conditions

you pass the column index and the condition

e.g. --> {column: 0, minValue: 2016} -- (first column must be >= 2016)
e.g. --> {column: 0, value: 2017} -- (first column must = 2017)
e.g. --> {column: 0, maxValue: 2015} -- (first column must be <= 2015)

see following DataTable...

var data = google.visualization.arrayToDataTable([
  ['X', 'Y1', 'Y2'],
  [2010, 10, 14],
  [2011, 14, 22],
  [2012, 16, 24],
  [2013, 22, 30],
  [2014, 28, 36],
  [2015, 30, 44],
  [2016, 34, 42],
  [2017, 36, 44],
  [2018, 42, 50],
  [2019, 48, 56]
]);

to filter on the 'X' column (column 0), we could say...

data.getFilteredRows([{column: 0, minValue: 2016}])

you can use multiple criteria as well...

data.getFilteredRows([
  {column: 0, minValue: 2016},
  {column: 1, minValue: 40}
])`

then pass the returned row indexes to setRows on the data view

var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
  {column: 0, minValue: 2016},
  {column: 1, minValue: 40}
]));

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y1', 'Y2'],
    [2010, 10, 14],
    [2011, 14, 22],
    [2012, 16, 24],
    [2013, 22, 30],
    [2014, 28, 36],
    [2015, 30, 44],
    [2016, 34, 42],
    [2017, 36, 44],
    [2018, 42, 50],
    [2019, 48, 56]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([
    {column: 0, minValue: 2016},
    {column: 1, minValue: 40}
  ]));

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(view);
}

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

EDIT

you can filter on any type, including dates,

here is an example of filtering on exact date...

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y1', 'Y2'],
    [new Date(2016, 7, 1), 10, 14],
    [new Date(2016, 8, 1), 14, 22],
    [new Date(2016, 9, 1), 16, 24],
    [new Date(2016, 10, 1), 22, 30],
    [new Date(2016, 11, 1), 28, 36],
    [new Date(2017, 0, 1), 30, 44],
    [new Date(2017, 1, 1), 34, 42],
    [new Date(2017, 2, 1), 36, 44],
    [new Date(2017, 3, 1), 42, 50],
    [new Date(2017, 4, 1), 48, 56]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([
    {column: 0, value: new Date(2016, 11, 1)}
  ]));

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(view);
}

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

note: if the date values include specific time values, then you'll need to use a range, to filter for a specific date...

google.charts.load('current', {
  callback: drawChart,
  packages: ['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y1', 'Y2'],
    [new Date(2017, 0, 1, 12, 35, 16), 30, 44],
    [new Date(2017, 0, 1, 14, 46, 10), 34, 42],
    [new Date(2017, 0, 1, 16, 12, 44), 36, 44],
    [new Date(2017, 0, 1, 17, 20, 47), 42, 50],
    [new Date(2017, 0, 1, 18, 23, 59), 48, 56],
    [new Date(2017, 0, 2, 12, 35, 16), 30, 44],
    [new Date(2017, 0, 2, 14, 46, 10), 34, 42],
    [new Date(2017, 0, 2, 16, 12, 44), 36, 44],
    [new Date(2017, 0, 2, 17, 20, 47), 42, 50],
    [new Date(2017, 0, 2, 18, 23, 59), 48, 56]
  ]);

  var view = new google.visualization.DataView(data);
  view.setRows(data.getFilteredRows([{
    column: 0,
    minValue: new Date(2017, 0, 1, 0, 0, 0),
    maxValue: new Date(2017, 0, 1, 23, 59, 59)
  }]));

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Table(container);
  chart.draw(view);
}

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

来源：https://stackoverflow.com/questions/43232078/i-need-to-filter-elements-in-google-visualization-datatable-used-in-google-chart

标签

datatable

google-visualization