Графики Google - сумма отображаемых столбцов с ползунком

Question

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

https://jsfiddle.net/2uktvcut/

google.charts.load('current', { 
 
    'packages': ['corechart', 'controls'] 
 
}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ["Date", "Total"], 
 
    [new Date("1/1/17"), 13], 
 
    [new Date("1/2/17"), 15], 
 
    [new Date("1/3/17"), 15], 
 
    [new Date("1/4/17"), 23], 
 
    [new Date("1/5/17"), 51], 
 
    [new Date("1/6/17"), 17], 
 
    [new Date("1/7/17"), 11], 
 
    [new Date("1/8/17"), 18], 
 
    [new Date("1/9/17"), 8], 
 
    [new Date("1/10/17"), 34], 
 
    [new Date("1/11/17"), 13], 
 
    [new Date("1/12/17"), 21] 
 
    ]); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder')); 
 

 
    var dateSlider = new google.visualization.ControlWrapper({ 
 
    'controlType': 'DateRangeFilter', 
 
    'containerId': 'marketingChartControl', 
 
    'options': { 
 
     'filterColumnLabel': 'Date', 
 
    } 
 
    }); 
 

 
    var stockChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'ColumnChart', 
 
    containerId: 'marketingChart', 
 
    options: { 
 
     theme: 'material', 
 
     legend: { 
 
     position: 'bottom', 
 
     }, 
 
     focusTarget: 'category', 
 
     chartArea: { 
 
     width: '95%', 
 
     height: '90%', 
 
     }, 
 
     width: $(document).width() * 0.98, 
 
     height: $(document).height() * .70, 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
     }, 
 
     }, 
 
    } 
 
    }); 
 

 
    google.visualization.events.addListener(stockChart, 'ready', function() { 
 
    document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>'; 
 

 
    var dt = stockChart.getDataTable(); 
 
    console.log(dt); 
 
    }); 
 

 
    dashboard.bind(dateSlider, stockChart); 
 

 
    dashboard.draw(data); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 

 
<div id="marketingChartHolder"> 
 
    <div id="marketingChartControl" style="width: 100%"></div> 
 
    <div id="marketingChart"></div> 
 
    <div id='png'></div> 
 
    <div id="totalHolder"> 
 
    <p> 
 
     Placeholder 
 
    </p> 
 
    </div> 
 
</div>

Я думаю, что я сделал старт с stockChart.getDataTable() однако я не уверен, как поступить.

После того, как я получу значение, я планирую использовать jquery для изменения значения <p>.

Answer 1

вы можете использовать метод group() агрегировать данные

см следующий рабочий фрагмент кода ...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ["Date", "Total"], 
 
    [new Date("1/1/17"), 13], 
 
    [new Date("1/2/17"), 15], 
 
    [new Date("1/3/17"), 15], 
 
    [new Date("1/4/17"), 23], 
 
    [new Date("1/5/17"), 51], 
 
    [new Date("1/6/17"), 17], 
 
    [new Date("1/7/17"), 11], 
 
    [new Date("1/8/17"), 18], 
 
    [new Date("1/9/17"), 8], 
 
    [new Date("1/10/17"), 34], 
 
    [new Date("1/11/17"), 13], 
 
    [new Date("1/12/17"), 21] 
 
    ]); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('marketingChartHolder')); 
 

 
    var dateSlider = new google.visualization.ControlWrapper({ 
 
    'controlType': 'DateRangeFilter', 
 
    'containerId': 'marketingChartControl', 
 
    'options': { 
 
     'filterColumnLabel': 'Date', 
 
    } 
 
    }); 
 

 
    var stockChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'ColumnChart', 
 
    containerId: 'marketingChart', 
 
    options: { 
 
     theme: 'material', 
 
     legend: { 
 
     position: 'bottom', 
 
     }, 
 
     focusTarget: 'category', 
 
     chartArea: { 
 
     width: '95%', 
 
     height: '90%', 
 
     }, 
 
     width: $(document).width() * 0.98, 
 
     height: $(document).height() * .70, 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
     }, 
 
     }, 
 
    } 
 
    }); 
 

 
    google.visualization.events.addListener(dateSlider, 'statechange', calcTotal); 
 

 
    google.visualization.events.addListener(stockChart, 'ready', function() { 
 
    document.getElementById('png').innerHTML = '<button><a target="_blank" href="' + stockChart.getChart().getImageURI() + '">Get Image</a></button>'; 
 
    calcTotal(); 
 
    }); 
 

 
    function calcTotal() { 
 
    var dataTotal = google.visualization.data.group(
 
     stockChart.getDataTable(), 
 
     [{column: 0, type: 'string', modifier: function() {return 'Total';}}], 
 
     [ 
 
     { 
 
      aggregation: google.visualization.data.sum, 
 
      column: 1, 
 
      label: 'Total', 
 
      type: 'number' 
 
     } 
 
     ] 
 
    ); 
 

 
    var container = document.getElementById('totalHolder'); 
 
    var table = new google.visualization.Table(container); 
 
    table.draw(dataTotal); 
 
    } 
 

 
    dashboard.bind(dateSlider, stockChart); 
 

 
    dashboard.draw(data); 
 
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 

 
<div id="marketingChartHolder"> 
 
    <div id="marketingChartControl" style="width: 100%"></div> 
 
    <div id="marketingChart"></div> 
 
    <div id='png'></div> 
 
    <div id="totalHolder"></div> 
 
</div>