Graphiques Google - Somme des colonnes affichées avec curseur

Question

J'ai créé un tableau de bord avec un curseur de date qui modifie ce qui est indiqué par le graphique. Je ne pouvais pas trouver un moyen de faire la somme des colonnes affichées.

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>

Je pense que je l'ai fait un départ avec stockChart.getDataTable() mais je ne suis pas sûr comment procéder.

Une fois la valeur obtenue, je prévois d'utiliser jquery pour modifier la valeur de <p>.

Answer 1

vous pouvez utiliser la méthode group() pour agréger les données

voir l'extrait suivant ... travail

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>