2016-12-19 4 views
1

Chartwrapperを使用してチャートをレンダリングしています。ビューフィルタが適用された後、チャートラッパーからデータを抽出します。 Chart Wrapperからフィルタリングされたデータを取得してJsonに変換するにはどうすればよいですか?chartwrapperからデータを取得するjsonを表示してjsonに変換する

var viewRows = trendsData.getFilteredRows([{column: trendsData.getColumnIndex('p_type'), value: prd}]); 

var wrapper = new google.visualization.ChartWrapper({ 
     chartType: 'LineChart', 
     dataTable: trendsData, 
     containerId: 'trends_div', 
     options: { 
        curveType: 'function', 
        height: 350, 
        legend: {position: 'right', alignment: 'center'}, 
        lineWidth: 3, 
        title: trendMetricLabel + ' By ' + period, 
        theme: 'material', 
        hAxis: { 
         titleTextStyle:{fontSize: 12}, 
         columnType: 'String', 
         showTextEvery: showTextInterval, 
         maxAlternation:1, 
         slantedText:'true', 
         slantedTextAngle:'40', 
         viewWindowMode: 'pretty', 
         textStyle: {fontSize: 12} 
        }, 
        vAxis: { 
         format: 'short', 
         minValue: 0, 
         viewWindow: { 
           min: 0 
          } 
        }, 
        series: { 
          0: { color: '#e7711b' } 
        } 
      } 
    }); 

    wrapper.setView({ 
      columns: [3,4,5,6], 
      rows: viewRows 
     }); 

答えて

1

1)

var dataView = new google.visualization.DataView(wrapper.getDataTable()); 

2ラッパーのデータテーブルからデータビューを作成)は、ラッパー・ビューからの行と列

dataView.setColumns(wrapper.getView().columns); 
dataView.setRows(wrapper.getView().rows); 

セット3)次に、データテーブルにデータビューを変換しますto json

dataView.toDataTable().toJSON() 

...これは(別の答えから使用されるデータを)支援を期待

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

 
function drawChart() { 
 
    var trendsData = new google.visualization.DataTable(); 
 
    trendsData.addColumn("string", "Date"); 
 
    trendsData.addColumn("number", "Retailer 1"); 
 
    trendsData.addColumn("number", "Retailer 3"); 
 
    trendsData.addColumn("number", "Retailer 2"); 
 

 
    trendsData.addRows([ 
 
    ["01/12", 160, {v: 208, f: '208'},{v: 320, f: '320'}], 
 
    ["02/12", 570, {v: 741, f: '741'},{v: 1140, f: '1140'}], 
 
    ["03/12", 385, {v: 497, f: '497'},{v: 770, f: '770'}], 
 
    ["04/12", 328, {v: 425, f: '425'},{v: 656, f: '656'}], 
 
    ["05/12", 445, {v: 577, f: '577'},{v: 890, f: '890'}], 
 
    ["06/12", 406, {v: 525, f: '525'},{v: 812, f: '812'}], 
 
    ["07/12", 249, {v: 475, f: '475'},{v: 772, f: '772'}] 
 
    ]); 
 

 
    var wrapper = new google.visualization.ChartWrapper({ 
 
    chartType: 'LineChart', 
 
    containerId: 'trends_div', 
 
    dataTable: trendsData, 
 
    options: { 
 
     curveType: 'function', 
 
     height: 350, 
 
     legend: { 
 
     position: 'right', 
 
     alignment: 'center' 
 
     }, 
 
     lineWidth: 3, 
 
     //title: trendMetricLabel + ' By ' + period, 
 
     theme: 'material', 
 
     hAxis: { 
 
     titleTextStyle: { 
 
      fontSize: 12 
 
     }, 
 
     columnType: 'String', 
 
     //showTextEvery: showTextInterval, 
 
     maxAlternation: 1, 
 
     slantedText: true, 
 
     slantedTextAngle: 40, 
 
     viewWindowMode: 'pretty', 
 
     textStyle: { 
 
      fontSize: 12 
 
     } 
 
     }, 
 
     vAxis: { 
 
     format: 'short', 
 
     minValue: 0, 
 
     viewWindow: { 
 
      min: 0 
 
     } 
 
     }, 
 
     series: { 
 
     0: { 
 
      color: '#e7711b' 
 
     } 
 
     } 
 
    }, 
 
    view: { 
 
     columns: [0, 1], 
 
     rows: [0, 2, 4, 6] 
 
    } 
 
    }); 
 

 
    google.visualization.events.addListener(wrapper, 'ready', function() { 
 

 
    // create view from wrapper data table 
 
    var dataView = new google.visualization.DataView(wrapper.getDataTable()); 
 

 
    // set columns/rows 
 
    dataView.setColumns(wrapper.getView().columns); 
 
    dataView.setRows(wrapper.getView().rows); 
 

 
    // convert view to data table, then json 
 
    document.getElementById('json_div').innerHTML = dataView.toDataTable().toJSON(); 
 
    }); 
 

 
    wrapper.draw(); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="trends_div"></div> 
 
<div id="json_div"></div>

+0

... – WhiteHat

+0

おかげホワイトハットを、次の作業スニペットを参照してください!! – sam

関連する問題