谷歌可視化儀表板表格中的Grand Total

我有一個簡單的Google可視化儀表板示例，帶有一個categorypicker控件和一個表格。我的代碼如下。谷歌可視化儀表板表格中的Grand Total

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1.1', {packages: ['controls']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Prepare the data. 
     var data = google.visualization.arrayToDataTable([ 
      ['Metric', 'Value'], 
      ['CPU' , 12], 
      ['Memory', 20], 
      ['Disk', 7], 
      ['Network', 54] 
     ]); 

     // Define a category picker for the 'Metric' column. 
     var categoryPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control', 
      'options': { 
      'filterColumnLabel': 'Metric', 
      'ui': { 
       'allowTyping': false, 
       'allowMultiple': true, 
       'selectedValuesLayout': 'belowStacked' 
      } 
      }, 

     }); 

     // Define a table. 
     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'chart', 
      'options': { 
      'width': 400, 
      'height': 180 
      } 
     }); 

     // Create the dashboard. 
     var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')). 
      // Configure the category picker to affect the table 
      bind(categoryPicker, table). 
      // Draw the dashboard 
      draw(data); 
     } 

     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="dashboard"> 
     <table> 
     <tr style='vertical-align: top'> 
      <td style='width: 300px; font-size: 0.9em;'> 
      <div id="control"></div> 
      </td> 
      <td style='width: 600px'> 
      <div style="float: left;" id="chart"></div> 
      </td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html>

我堅持一個問題，我希望總值的最後總和。如何在表格末尾再添加一行，以顯示第二列中所有值的總和。即最初應該顯示全部四行的總數，並且當應用過濾器時，它應該顯示過濾行值的總和。

來源

2013-04-21 mpsbhat

你可以只添加一個行之前你「畫」的圖表顯示了總：

例如：

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'], 
    ['2003', 1336060, 3817614,  974066,  1104797, 6651824, 15727003], 
    ['2004', 1538156, 3968305,  928875,  1151983, 5940129, 17356071], 
    ['2005', 1576579, 4063225,  1063414,  1156441, 5714009, 16716049], 
    ['2006', 1600652, 4604684,  940478,  1167979, 6190532, 18542843], 
    ['2007', 1968113, 4013653,  1037079,  1207029, 6420270, 19564053], 
    ['2008', 1901067, 6792087,  1037327,  1284795, 6240921, 19830493] 
    ]); 

    function getSum(data, column) { 
    var total = 0; 
    for (i = 0; i < data.getNumberOfRows(); i++) 
     total = total + data.getValue(i, column); 
    return total; 
    } 

    alert(getSum(data, 1));

這會給你一個很好的警告框說：9920627

1336060+1538156+1576579+1600652+1968113+1901067=9920627

您可以在末尾添加一條線，如下所示：

addRow('Total', getSum(data, 1));

如果問題是如何讓已被過濾你的滑塊等的列的總和，這是一個不同的野獸，和一些this jsfiddle by asgallant可能會更好：

google.load('visualization', '1.1', {packages: ['controls']}); 
google.setOnLoadCallback(drawVisualization); 

function drawVisualization() { 
    // Prepare the data 
    var data = google.visualization.arrayToDataTable([ 
     ['Name', 'RoolNumber', 'Gender', 'Age', 'Donuts eaten'], 
     ['Michael', 1, 'Male', 12, 5], 
     ['Elisa', 2, 'Female', 20, 7], 
     ['Robert', 3, 'Male', 7, 3], 
     ['John', 4, 'Male', 54, 2], 
     ['Jessica', 5, 'Female', 22, 6], 
     ['Aaron', 6, 'Male', 3, 1], 
     ['Margareth', 7, 'Female', 42, 8], 
     ['Miranda', 8, 'Female', 33, 6] 
    ]); 

    // Define a slider control for the Age column. 
    var slider_rn = new google.visualization.ControlWrapper({ 
     controlType: 'NumberRangeFilter', 
     containerId: 'control2', 
     options: { 
      filterColumnLabel: 'RoolNumber', 
      ui: { 
       labelStacking: 'vertical' 
      } 
     } 
    }); 

    var slider = new google.visualization.ControlWrapper({ 
     controlType: 'NumberRangeFilter', 
     containerId: 'control1', 
     state: { 
      lowValue: 10, 
      highValue: 40, 
      highThumbAtMax: true 
     }, 
     options: { 
      filterColumnLabel: 'Age', 
      ui: { 
       labelStacking: 'vertical' 
      } 
     } 
    }); 

    // Define a category picker control for the Gender column 
    var categoryPicker = new google.visualization.ControlWrapper({ 
     controlType: 'CategoryFilter', 
     containerId: 'control3', 
     options: { 
      filterColumnLabel: 'Gender', 
      ui: { 
       labelStacking: 'vertical', 
       allowTyping: false, 
       allowMultiple: false 
      } 
     } 
    }); 

    // Define a Pie chart 
    var pie = new google.visualization.ChartWrapper({ 
     chartType: 'PieChart', 
     containerId: 'chart1', 
     options: { 
      width: 300, 
      height: 300, 
      legend: 'none', 
      title: 'Donuts eaten per person', 
      chartArea: { 
       left: 15, 
       top: 15, 
       right: 0, 
       bottom: 0 
      }, 
      pieSliceText: 'label' 
     }, 
     // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten) 
     // from the 'data' DataTable. 
     view: { 
      columns: [0, 4] 
     } 
    }); 

    // Define a table 
    var table = new google.visualization.ChartWrapper({ 
     chartType: 'Table', 
     containerId: 'chart2', 
     options: { 
      width: '500px' 
     } 
    }); 

    // get average and geometric mean values 
    google.visualization.events.addListener(table, 'ready', function() { 
     var group = google.visualization.data.group(table.getDataTable(), [{ 
      // we need a key column to group on, but since we want all rows grouped into 1, 
      // then it needs a constant value 
      column: 0, 
      type: 'number', 
      modifier: function() { 
       return 1; 
      } 
     }], [{ 
      // get the average age 
      column: 3, 
      label: 'Average Age', 
      type: 'number', 
      aggregation: google.visualization.data.avg 
     }, { 
      // get the geometric mean of age 
      column: 3, 
      label: 'Geometric Mean of Age', 
      type: 'number', 
      aggregation: function (values) { 
       var product = 1; 
       var n = values.length; 
       for (i = 0; i < n; i++) { 
        product = product * values[i]; 
       } 
       return nthroot(product, n); 
      } 
     }]); 
     document.getElementById('avg').innerHTML = group.getValue(0, 1); 
     document.getElementById('geomean').innerHTML = group.getValue(0, 2); 
    }); 

    // Create a dashboard 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    // Establish bindings, declaring the both the slider and the category 
    // picker will drive both charts. 
    bind([slider, slider_rn, categoryPicker], [table, pie]). 
    // Draw the entire dashboard. 
    draw(data); 
} 

// nthroot function courtesy of http://gotochriswest.com 
// see http://gotochriswest.com/blog/2011/05/06/cube-root-an-beyond/ 
// special function necessary because Math.pow(-8, 1/3) returns NaN instead of -2 
function nthroot(x, n) { 
    try { 
     var negate = n % 2 == 1 && x < 0; 
     if (negate) { 
      x = -x; 
     } 
     var possible = Math.pow(x, 1/n); 
     n = Math.pow(possible, n); 
     if (Math.abs(x - n) < 1 && (x > 0 == n > 0)) { 
      return negate ? -possible : possible; 
     } 
    } catch(e){} 
}

來源

2013-04-22 00:07:19 jmac

這就是我確切需要的@jmac。我跟着你的第二個例子（儀表板）和我的[代碼在這裏]（http://jsfiddle.net/eWQhn/）。我使用'var query = new google.visualization.Query（）'方法從[此電子表格]中獲取數據（https://docs.google.com/spreadsheet/ccc?key=0AozvCNI02VmpdFBsVkxOQ3NENVZ1djhxVmZUNUdtY0E）。但我再次停下來在桌子上再增加一行。我嘗試'data.addRow（['Total'，group.getValue（0，1）]）;'但它給出了一個錯誤。 – mpsbhat 2013-04-23 04:42:38

請自行試一試。如果你不能解決問題，那麼請提出一個單獨的問題，將努力和細節放在你正在嘗試的內容上，問題是什麼以及你卡在哪裏。在你問問之前，**請**嘗試自己做，並且在你問之前理解我鏈接的代碼在做什麼。如果你花時間去研究它，你可以自己弄清楚它，而且調試自己的代碼比用別人去查看它更容易。 – jmac 2013-04-23 05:24:37

當然@jmac。我會嘗試自己。 – mpsbhat 2013-04-23 06:33:24

谷歌可視化儀表板表格中的Grand Total

回答

相關問題