Динамическое изменение данных для Google Charts - PullRequest
Новая
       18

Динамическое изменение данных для Google Charts

0 голосов
/ 26 февраля 2020

У меня есть данные в формате: 

+----------+----------+----------+----------+
| Date     | Name     | Sent     | Received |
+----------+----------+----------+----------+
| 1-1-2020 | A        |        5 |        6 |
| 2-1-2020 | A        |        2 |        3 |
| 3-1-2020 | A        |        7 |        3 |
| 4-1-2020 | A        |        7 |        3 |
| 5-1-2020 | A        |        7 |        3 |
+----------+----------+----------+----------+

+----------+----------+----------+----------+
| Date     | Name     | Sent     | Received |
+----------+----------+----------+----------+
| 1-1-2020 | B        |        6 |        3 |
| 2-1-2020 | B        |        2 |        3 |
| 3-1-2020 | B        |        1 |        2 |
| 4-1-2020 | B        |        3 |        6 |
| 5-1-2020 | B        |        5 |        3 |
+----------+----------+----------+----------+

+----------+----------+----------+----------+
| Date     | Name     | Sent     | Received |
+----------+----------+----------+----------+
| 1-1-2020 | C        |        6 |        3 |
| 2-1-2020 | C        |        2 |        3 |
| 3-1-2020 | C        |        1 |        2 |
| 4-1-2020 | C        |        3 |        6 |
| 5-1-2020 | C        |        5 |        3 |
+----------+----------+----------+----------+

Я хочу построить итоговую сумму за день для отправленных и полученных, используя диаграммы Google. Я должен иметь возможность установить имя в качестве фильтра для включения одного / нескольких источников данных.

Я попытался использовать обработчик изменения состояния в фильтре категорий, но после изменения источника данных на новой панели все равно отображаются старые данные. Любые выводы будут оценены.

Вот код, который я попробовал. 

<html>
  <head>
  </head>

<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em; height: 500px">

  <p style="padding-left: 1em"><strong>Donuts eaten per person</strong></p>
        <div style="padding-left: 1em" id="categoryPicker_div"></div>
        <div id="chart_div" style="padding-top: 15px; padding-bottom: 15px; height: 400px"></div>
        <div id="time_div"></div>

</div>

<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart', 'line', 'controls']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

  var categoryPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'categoryPicker_div',
    'options': {
      'filterColumnIndex': 1,
      'ui': {
        'labelStacking': 'vertical',
        'label': 'Workgroup Selection:',
        'allowTyping': true,
        'allowMultiple': true
      }
    }
  });

  var line = new google.visualization.ChartWrapper({
    'chartType': 'LineChart',
    'containerId': 'chart_div',
    'options': {
      'legend': {'position': 'top'},
        'curveType': 'linear',
        'animation': {
          'startup': false,
          'duration': 0,
          'easing': 'out'
      },
      'chartArea': {'height': '80%','width': '85%'},
      'lineWidth': 3,
      'hAxis': {'title': 'Date'},
      'vAxis': {
        'viewWindow': {'min': 0 },
        'viewWindowMode':'pretty'
        },
      'crosshair':{
        'trigger': 'both'
      }
    },
    'view': {'columns': [0, 2, 3]}
  });

  var control = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'time_div',
    'options': {
      // Filter by the date axis.
      'filterColumnIndex': 0,
      'ui': {
        'chartType': 'LineChart',
        'chartOptions': {
          'chartArea': {'width': '85%', 'height':'20%'},
          'hAxis': {'baselineColor': 'none'}
        },
        'chartView': {'columns': [0, 2, 3]},
        // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
        'minRangeSize': 86400000
      }
    }
    //'state': {'range': {'start': new Date(2016, 9, 1),'end': new Date(2016, 10, 1)}}
  });

var Data_ = google.visualization.arrayToDataTable([
    ['Date', 'Workgroup', 'Sent', 'Received'],
    [new Date(2016, 9, 15), 'A', 25, 3],
    [new Date(2016, 9, 20), 'B', 31, 2],
    [new Date(2016, 9, 21), 'C', 15, 5],
    [new Date(2016, 9, 22), 'D', 7, 0],
    [new Date(2016, 9, 23), 'E', 13, 1],
    [new Date(2016, 9, 24), 'F', 8, 4],
    [new Date(2016, 9, 25), 'G', 8, 3],
    [new Date(2016, 9, 26), 'H', 13, 1],
    [new Date(2016, 9, 29), 'I', 22, 4]
  ]);

var Data_A = google.visualization.arrayToDataTable([
    ['Date', 'Workgroup', 'Sent', 'Received'],
    [new Date(2016, 9, 19), 'A', 5, 0],
    [new Date(2016, 9, 20), 'B', 3, 2],
    [new Date(2016, 9, 21), 'C', 0, 1],
    [new Date(2016, 9, 22), 'D', 2, 0],
    [new Date(2016, 9, 24), 'F', 4, 2],
    [new Date(2016, 9, 25), 'G', 3, 1],
    [new Date(2016, 9, 26), 'H', 4, 1],
    [new Date(2016, 9, 27), 'I', 3, 2]
  ]);

  // var chart = new google.charts.Line(document.getElementById('chart_div'));
  //dashboard.bind([control, categoryPicker], line);
  //dashboard.draw(Data_);

  function drawDash(Data){
      console.log("inside drawDash");
      Data = eval(Data);
      console.log(Data);
      dashboard.bind([categoryPicker, control],line)
      dashboard.draw(Data);
      };

  google.visualization.events.addListener(categoryPicker, 'statechange', function (){
    console.log("State Changed");
    console.log(categoryPicker.getState().selectedValues[0]);

    if (categoryPicker.getState().selectedValues[0] === undefined){
      console.log("Default Value Selected");
      drawDash(Data_);
    }
    else{
      drawDash("Data_"+categoryPicker.getState().selectedValues[0]);
    }

  });

drawDash(Data_);  

}

</script>


  </body>
</html>

1 Ответ

0 голосов
/ 27 февраля 2020

Похоже, что слушатель перерисовывает всю панель инструментов (и, возможно, сбрасывает фильтры). Вместо этого вы можете попробовать перерисовать только диаграмму, вызвав line.draw ()

. Кроме того, вместо создания 2 отдельных таблиц DataTable, я бы создал только один и отфильтровал бы представление в соответствии с выбранным значением. Например: 

view.setRows(Data_.getFilteredRows([{
  column: 1,
  value: categoryPicker.getState().selectedValues[0]
},

Данное предложение подробно описано по этому вопросу: Мне нужно отфильтровать элементы в google.visualization.datatable, используемом в Google Charts

...