Googleのチャート、3列のレコードセットを扱う方法は？

Question

ように私は、MySQLのレコードを持っている：私の目標は、（私は日付のフィルタを使用できるように、日付の種類）x軸に年/月と積み上げ棒グラフを持つことである、と顧客価値を積層

Date;Customer;Turnover 
2016-03-01;Cust1;120 
2016-03-01;Cust2;120 
2016-04-01;Cust1;130 
2016-04-01;Cust2;125 
2016-05-01;Cust1;135 
2016-05-01;Cust2;110 

お互いの上にさらに、私はディスプレイから隠したい顧客をフィルタリングする必要があります。

ダッシュボードフィルタコントロールでもデータをグループ化/集計しようと時間を費やしましたが、まだ突破口を作っていないので、誰かが私にこれをどこから始めるべきかというヒントを与えることを期待していました。

ありがとう

Answer 1

x軸に日付を表​​示するために、あなたは顧客ごとに列

1. グループを必要とするデータ日付によって日付によって、お客様
2. ソートグループ化されたデータ、カスタマー
3. は、顧客ごとに

を列を持つ新しいテーブルを構築するユニークな顧客IDの

を取得します

あなた_spent時間trying_にあなたがあなたがコードのいずれかを共有することができ、助けとどの部分が必要なのですか...提供フィドルから取られ、

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

 
function drawVisualization() { 
 
    var data = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'dat_ym', label: 'Start Date', type: 'date'}, 
 
     {id: 'user-id', label: 'User-Id', type: 'string'}, 
 
     {id: 'customer-id', label: 'Customer-Id', type: 'string'}, 
 
     {id: 's_minutes', label: 'minutes', type: 'number'} 
 
    ], 
 
    rows: [ 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '67205'}, {v: 1122} ]}, 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '67205'}, {v: 332} ]}, 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]}, 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '228626'}, {v: 334} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '67205'}, {v: 554} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '67205'}, {v: 0} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '228626'}, {v: 544} ]}, 
 
    ] 
 
    }); 
 

 
    // group data by date, customer 
 
    var grouped_data = google.visualization.data.group(
 
    data, 
 
    [0, 2], 
 
    [ 
 
     {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'} 
 
    ] 
 
); 
 

 
    // sort grouped data 
 
    grouped_data.sort([{column: 0},{column: 1}]); 
 

 
    // get unique customers 
 
    var custGroup = google.visualization.data.group(
 
    data, 
 
    [2] 
 
); 
 

 
    // build customer data table 
 
    var custData = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'dat_ym', label: 'Start Date', type: 'date'}, 
 
    ] 
 
    }); 
 

 
    // add column for each customer 
 
    for (var i = 0; i < custGroup.getNumberOfRows(); i++) { 
 
    custData.addColumn(
 
     {label: custGroup.getValue(i, 0), type: 'number'} 
 
    ); 
 
    } 
 

 
    // add rows for each date 
 
    var rowDate; 
 
    var rowIndex; 
 
    for (var i = 0; i < grouped_data.getNumberOfRows(); i++) { 
 
    // add row when date changes 
 
    if (rowDate !== grouped_data.getValue(i, 0).getTime()) { 
 
     rowDate = grouped_data.getValue(i, 0).getTime(); 
 
     rowIndex = custData.addRow(); 
 
     custData.setValue(rowIndex, 0, new Date(rowDate)); 
 
    } 
 

 
    // find customer column 
 
    for (var x = 1; x < custData.getNumberOfColumns(); x++) { 
 
     if (custData.getColumnLabel(x) === grouped_data.getValue(i, 1)) { 
 
     custData.setValue(rowIndex, x, grouped_data.getValue(i, 2)); 
 
     } 
 
    } 
 
    } 
 

 
    var options = { 
 
    hAxis: {title: '', textStyle: { fontSize: '13' }, textPosition: 'in'}, 
 
    vAxis: {title: '', textStyle: { fontSize: '10' }}, 
 
    seriesType: 'bars', 
 
    legend: {position: 'top', textStyle: {color: 'black', fontSize: 14}}, 
 
    isStacked: true 
 
    }; 
 

 
    var tableTE = new google.visualization.Table(document.getElementById('table_div_te')); 
 
    tableTE.draw(data, {showRowNumber: true, frozenColumns: 1, width: '100%', height: '300'}); 
 

 
    var tableTEAgg = new google.visualization.Table(document.getElementById('table_div_teagg')); 
 
    tableTEAgg.draw(custData, {showRowNumber: true, frozenColumns: 1, width: '100%', height: '300'}); 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(custData, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table_div_te"></div> 
 
<div id="table_div_teagg"></div> 
 
<div id="chart_div" style="width: 1600px; height: 300px;"></div>