<style> .reportTableTotalLabel { font-weight: bold; } .reportTableTotalRow { border-top: 1px solid #D0D0D0; } .google-visualization-table-tr-odd, .google-visualization-table-tr-odd td, .google-visualization-table-tr-odd-nonstrict { background-color : #F0F0F0 !important; } .google-visualization-table-table { margin: 0 auto !important; } td.cell { width: 80px; } .headerCell { text-align:right; } </style> <div id="table_div" style="width:100%"> </div> <div id="chart_div"> </div> <div id="chart_div2"> </div> <script src="/wp-content/uploads/jquery-1.11.3.min.js">;</script> <script type="text/javascript" src="https://www.google.com/jsapi">;</script> <script type="text/javascript"> google.load('visualization', '1', {'packages': ['table', 'corechart']}); //google.setOnLoadCallback(drawChart); // function drawChart() { function fixReportTableCss() { $("table.google-visualization-table-table").removeAttr("style"); $('td.reportTableTotalLabel').parent().find("td").each(function(index, item) { $(item).addClass('reportTableTotalRow'); }); $("th.headerCell:first-child").css({'text-align':'left'}); //$("th td:last-child").css({'border-left':'1px solid #D0D0D0'}); $("tr td.cell:last-child").css({'border-left':'1px solid #CCC'}); } $().ready(function(){ // Data var data = new google.visualization.DataTable(); data.addColumn('string', 'Nom'); data.addColumn('number', 'Janvier'); data.addColumn('number', 'Février'); data.addColumn('number', 'Mars'); data.addColumn('number', 'Avril'); data.addColumn({type: 'number', label: 'Total'}); data.addRow(['Jean', 5, 12, 18, 25, 60]); data.addRow(['Robert', 0, 1, 20, 2, 23]); data.addRow(['Maud', 11, 5, 7, 9, 32]); data.addRow(['Tom', 3, 1, 1, 4, 9]); // Grouping (sum) var groupColumns = []; for (var j=1; j<=(data.getNumberOfColumns()-2); j++) { groupColumns.push({ column: j, type: 'number', aggregation: google.visualization.data.sum }); } groupColumns.push({ column: data.getNumberOfColumns()-1, type: 'number', aggregation: google.visualization.data.sum }); var reportview = google.visualization.data.group(data, [0], groupColumns); var grandTotal = google.visualization.data.group(reportview, [{ type: 'string', column: 0, modifier: function (val) {return null;} }], groupColumns); var row = [{v: 'Total', p: {className:'reportTableTotalLabel'}}]; for (var i = 1; i < grandTotal.getNumberOfColumns(); i++) { row.push({v: grandTotal.getValue(0, i)}); } reportview.addRow(row); // Formatting var formatter = new google.visualization.NumberFormat({pattern:'#,###'}); for (var i = 1; i < reportview.getNumberOfColumns(); i++) { formatter.format(reportview, i); } // Fixing 'grand total' behaviour var tb = new google.visualization.Table(document.getElementById('table_div')); google.visualization.events.addListener(tb, 'sort', function(e) { var parentRow = $('td.reportTableTotalLabel').parent(); if (!parentRow.is(':last-child')) parentRow.siblings().last().after(parentRow); //parentRow.find("td").each(function(index, item) { $(item).addClass('reportTableTotalRow'); }); fixReportTableCss(); }); // Display DataTable tb.draw(reportview, {showRowNumber: false, cssClassNames : {tableCell: 'cell', headerCell:'headerCell'}}); // Fixing final layout fixReportTableCss(); // Display Chart 1 var options = { legend: { position: 'top', maxLines: 5 }, bar: { groupWidth: '75%' }, isStacked: true, }; var chart = new google.visualization.ColumnChart(document.getElementById("chart_div")); data.removeColumn(data.getNumberOfColumns()-1); // remove total column chart.draw(data, options); // Display Chart 2 if (data.getNumberOfColumns() > 2) { var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'Année'); for (var j=0; j<=(data.getNumberOfRows()-1); j++) { data2.addColumn('number', data.getValue(j, 0)); } data2.addRows(data.getNumberOfColumns()-1); for (var j=1; j<=(data.getNumberOfColumns()-1); j++) { data2.setCell(j-1, 0, data.getColumnLabel(j)); for (var k=1; k<=(data.getNumberOfRows()); k++) { data2.setCell(j-1, k, data.getValue(k-1, j)); } } var chart2 = new google.visualization.ColumnChart(document.getElementById("chart_div2")); chart2.draw(data2, options); } else { var options = { title: data.getColumnLabel(1), height: 400, legend: { position: 'top', maxLines: 5 } }; var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2')); chart2.draw(data, options); } }); </script>