Google Chart - 凡例フィールドとしてのJSONデータソースアイテム - スタックカラム

Question

JSONデータソースを使用して積み上げ縦棒グラフを作成し、JSONデータ内のアイテムをフィールドとしてグループ化する必要があります。私はどのようにこれを行うにはリソースを発見していない、と私はJSの経験がありません。

グループ化するフィールドが分​​かっている場合は、複数のデータソースを結合する方法を知っています。しかし、この場合、クライアントフィールドは動的です。

このスタックの質問は、私が達成したいものに似ています。

[["2017/06/25", "Some Client A", 805.0], ["2017/07/02", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]] 

これまでのところ、私は以下があります：JSON format for Google chart stacked column

私のデータは次のように入ってきます。これは明らかに動作しません：

function drawStacked() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Week'); 
    data.addColumn('string', 'client'); 
    data.addColumn('number', 'Hours'); 
    data.addRows({{ sbl1|safe }}); 

Answer 1

ポストに示したデータは、他の答えからコードで正常に動作する必要があり、
作業スニペット以下を参照してください...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Week'); 
 
    data.addColumn('string', 'client'); 
 
    data.addColumn('number', 'Hours'); 
 
    data.addRows([["2017/07/09", "Some Client A", 805.0], ["2017/07/09", "Some Client B", 955.0], ["2017/07/09", "Some Client C", 805.0]]); 
 
    
 
    // create data view 
 
    var view = new google.visualization.DataView(data); 
 

 
    // init column arrays 
 
    var aggColumns = []; 
 
    var viewColumns = [{ 
 
     calc: function (dt, row) { 
 
     return dt.getFormattedValue(row, 0); 
 
     }, 
 
     label: data.getColumnLabel(0), 
 
     type: 'string' 
 
    }]; 
 

 
    // build view & agg column for each client 
 
    data.getDistinctValues(1).forEach(function (client, index) { 
 
     // add view column 
 
     viewColumns.push({ 
 
     calc: function (dt, row) { 
 
      if (dt.getValue(row, 1) === client) { 
 
      return dt.getValue(row, 2); 
 
      } 
 
      return null; 
 
     }, 
 
     label: client, 
 
     type: 'number' 
 
     }); 
 

 
     // add agg column 
 
     aggColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: index + 1, 
 
     label: client, 
 
     type: 'number' 
 
     }); 
 
    }); 
 

 
    // set view columns 
 
    view.setColumns(viewColumns); 
 

 
    // agg view by first column 
 
    var group = google.visualization.data.group(
 
     view, 
 
     [0], 
 
     aggColumns 
 
    ); 
 

 
    // draw chart 
 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(group, { 
 
     isStacked: true 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>