谷歌图表API - 如何从视图或分组视图中转移数据

时间:2016-01-23 10:39:55

标签: charts google-visualization

如何通过谷歌图表API透过谷歌图表显示数据? 我有多个图表都将具有相同的原始数据表,我创建了对此数据的视图以包括要包含和聚合的特定列,然后我将对数据进行分组,在某些情况下需要从视图或PIVOT数据分组数据。 我目前关注的订单是DataTable - >查看 - >聚合 - >小组 - 任何人都可以帮助他们如何实现这一目标或详细信息吗?我提供了一个小提琴

http://jsfiddle.net/louloumac/pjv64wL0/

/*
test case
create view on table to show only centain columns
1 & 2) aggregate total sources
3) aggregate total cash
4) pivot the table to show total sources per company:WHAT IS BEST WAY TO DO THIS?
|date           | company 1 | company 2
|1/1/2016 11:00 | 3                 | 2
|1/1/2016 12:00 | 1         | 0

*/

google.charts.load('current', {packages: ['corechart', 'bar','line','table']});
google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
     var data = new google.visualization.DataTable();
            //set column type to be number for continuous and string to be discrete for major axis
            data.addColumn('datetime', 'start date');
            data.addColumn('string', 'tick text');
            data.addColumn('number', 'company');
            data.addColumn('number', 'Source 1');
            data.addColumn('number', 'Source 2');
            data.addColumn('number', 'Total Cash');

            data.addRows([
                    [new Date('2016-01-01 00:00'),'2015 WK 53', 1,1,2,230],
                    [new Date('2016-01-01 00:00'),'2015 WK 53', 1,0,1,100],
                    [new Date('2016-01-01 00:00'),'2015 WK 53', 2,1,1,100],
                    [new Date('2016-01-08 00:00'),'2016 WK 1', 1,1,2,230],
                    [new Date('2016-01-08 00:00'),'2016 WK 1', 1,1,2,230]
                    ]);




        //create view on data
        var view = new google.visualization.DataView(data);
        var table1 = new google.visualization.Table(document.getElementById('table1'));




       table1.draw(view); 
      //set view columns test 1 & 2
       view.setColumns([0,1,2,{type: 'number', label: 'Total Sources', 
                    calc: function (dt, row) { 
                        return dt.getValue(row, 3) + dt.getValue(row, 4);   
                        }
                        }]);



                var table2 = new google.visualization.Table(document.getElementById('table2'));
        table2.draw(view);

         //set view columns test 3  
        var view2 = new google.visualization.DataView(data);
        view2.setColumns([0,1,2,{type: 'number', label: 'Total Cash', 
                    calc: function (dt, row) { 
                        return dt.getValue(row, 5);   
                        }
                        }]);
        var table3 = new google.visualization.Table(document.getElementById('table3'));
        table3.draw(view2);

            //group by date & company aggregate source totals
        var grouped_data_table2 = google.visualization.data.group(view, [0,2], [{ 'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number' }]);

        var table3 = new google.visualization.Table(document.getElementById('table3'));
        table3.draw(grouped_data_table2);

        //group by date & company aggregate cash
        var grouped_data_table3 = google.visualization.data.group(view2, [0,2], [{ 'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number' }]);
        var table4 = new google.visualization.Table(document.getElementById('table4'));
        table4.draw(grouped_data_table3);

        /*
        how do I pivot the table from the view or the grouped data?
        I would like to use the pivoted table to draw the chart

        */
        //example chart table below
        var pivoteddata = new google.visualization.DataTable();
         pivoteddata.addColumn('datetime', 'start date');
         pivoteddata.addColumn('string', 'tick text');
         pivoteddata.addColumn('number', 'company 1');
         pivoteddata.addColumn('number', 'company 2');
                 pivoteddata.addRows([
                    [new Date('2016-01-01 00:00'),'2015 WK 53', 4,2],
                    [new Date('2016-01-08 00:00'),'2016 WK 1', 0,6]
                    ]);

        //mock table
        var table5 = new google.visualization.Table(document.getElementById('table5'));
        table5.draw(pivoteddata); 
        var viewc = new google.visualization.DataView(pivoteddata);
        viewc.setColumns([0,2,3]);
        //is there a better way to add ticks to hAxis?
        var dates=pivoteddata.getDistinctValues(0);
        var ticks=pivoteddata.getDistinctValues(1);

          var newTicks=[];
          for(i=0;i<ticks.length;i++){
            newTicks.push({v: new Date(dates[i]), f: ticks[i]});
          }

          var chartoptions={
            'width':'100%',
            "hAxis": {
                "ticks":newTicks
            }
            }
         //draw chart with mock pivot data table
          var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
          chart.draw(viewc, chartoptions);

      }

0 个答案:

没有答案