Dashboard 谷歌柱形图仪表板_Dashboard_Google Visualization

Dashboard 谷歌柱形图仪表板

google-visualization

Dashboard 谷歌柱形图仪表板,dashboard,google-visualization,Dashboard,Google Visualization,我有一个谷歌仪表板柱形图：我的问题是如何对团队进行分组。例如，HAX应该只有一列是DOCOP，而利用率应该是所有DOCOP的总和下面是我的代码：-  <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http:

我有一个谷歌仪表板柱形图：

我的问题是如何对团队进行分组。例如，HAX应该只有一列是DOCOP，而利用率应该是所有DOCOP的总和

下面是我的代码：-

  <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
     google.load('visualization', '1.0', {'packages':['controls','corechart']});
      // google.load('visualization', '1', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.

     google.setOnLoadCallback(drawDashboard);
      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
           title: 'Utilization',
          is3D: 'true',
          width: 1000,
          height: 600
        };

        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

     var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Month'
          }
        });

     var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'TeamName',
        options: {
            filterColumnLabel: 'Teams', // filter by Team name
            ui: {
                caption: 'Choose a Team',
                sortValues: true,
                allowNone: true,
                allowMultiple: true,
                allowTyping: true
            }

        }
     });

     var columnChart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart_div',
          'options': {
            'width': 600,
            'height': 400,

            'legend': 'none',
      'hAxis': {
        'title': 'Teams',
        'titleColor':'#cc0000',
                'titleFontSize':20
      },
      'vAxis': {
        'title': 'Utilization',
        'titleColor':'#cc0000',
                'titleFontSize':20

      }
          },
      view:{
      columns:['Group','Utilization']
      }
        });

  /*  var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'pie_div',
          'options': {
            'width': 500,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
          }
        }); */



        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind([donutRangeSlider, categoryPicker], [columnChart]);

     dashboard.draw(data);
    }


    </script>



<body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
    <div><br><br></div>
      <div id="TeamName"></div>

      <div id="chart_div"></div>
      <div id="pie_div"></div>
    </div>
  </body>


//加载可视化API和控件包。
load（'visualization'，'1.0'，{'packages'：['controls'，'corechart']}）；
//load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawDashboard）；
//创建并填充数据表的回调，
//实例化仪表板、范围滑块和饼图，
//传入数据并绘制它。
函数drawDashboard（）{
//创建我们的数据表。
var data=new google.visualization.DataTable（）；
变量选项={
标题：“利用率”，
is3D:'正确'，
宽度：1000，
身高：600
};
var dashboard=new google.visualization.dashboard(
document.getElementById（'dashboard_div'）；
var donutRangeSlider=new google.visualization.ControlWrapper({
“controlType”：“NumberArrangeFilter”，
“containerId”：“filter_div”，
“选项”：{
“filterColumnLabel”：“月”
}
});
var categoryPicker=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
containerId:'团队名称'，
选项：{
filterColumnLabel:'团队'，//按团队名称筛选
用户界面：{
描述：“选择一个团队”，
sortValues:没错，
阿隆：是的，
allowMultiple:对，
allowTyping:正确
}
}
});
var columnChart=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱船”：“海图分区”，
“选项”：{
“宽度”：600，
‘高度’：400，
“图例”：“无”，
“哈克斯”：{
“标题”：“团队”，
“标题颜色”：“cc0000”，
“标题字体大小”：20
},
“vAxis”：{
“标题”：“利用率”，
“标题颜色”：“cc0000”，
“标题字体大小”：20
}
},
视图：{
列：[“组”、“利用率”]
}
});
/*var pieChart=new google.visualization.ChartWrapper({
'chartType'：'PieChart'，
“集装箱船”：“pie_div”，
“选项”：{
“宽度”：500，
‘高度’：300，
'文本'：'值'，
“图例”：“右”
}
}); */
//建立依赖关系，声明“筛选器”驱动“pieChart”，
//这样，饼图将只显示通过的条目
//给定选定的滑块范围。
dashboard.bind（[donutRangeSlider，categoryPicker]，[columnChart]）；
仪表盘.绘图（数据）；
}

我们有办法做到这一点吗？我不想修改json数据。某个参数或某个将HAX和团队名称分组的东西

提前谢谢

演示：-

您可以通过使用datatable进行分组来实现这一点。将以下侦听器添加到代码中，并添加dataTable：

 google.visualization.events.addListener(categoryPicker, 'ready',
     function(event) {
         columnChart.setDataTable(google.visualization.data.group(

             table.getDataTable(), [0], [{
                 'column': 5,
                 'aggregation': google.visualization.data.sum,
                 'type': 'number'
             }]
         ));

         columnChart.draw();
     });

 google.visualization.events.addListener(categoryPicker, 'statechange',

     function(event) {
         columnChart.setDataTable(google.visualization.data.group(
             table.getDataTable(), [0], [{
                 'column': 5,
                 'aggregation': google.visualization.data.sum,
                 'typdpe': 'number'
             }]
         ));
         columnChart.draw();
     });
 }

还可以查看附加的滑块事件。由@Henrik创建

完整代码段：





//加载可视化API和控件包。
load（'visualization'，'1.0'，{'packages'：['controls'，'corechart']}）；
//load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawDashboard）；
//创建并填充数据表的回调，
//实例化仪表板、范围滑块和饼图，
//传入数据并绘制它。
函数drawDashboard（）{
//创建我们的数据表。
var data=new google.visualization.DataTable（{“cols”：[{“label”：“Group”，“type”：“string”}，{“label”：“Teams”，“type”：“string”}，{“label”：“Month”，“type”：“number”}，{“label”：“Work hours”，“type”：“Training hours”}，{“type”：“number”}，{“label”：“usage”；“use”，“type”；“number”}，{“rows”：[{“c”：[{“v”：“v”：“CLNTSV{“v”：“v”：“CLNTSV”}，，{“v”的“v”：“CLNTSV”的，{“v”的“v”：“CSPro”}，，{“v”：4}，，，{“v”：168}，，，{“v”：0.0:0:0.0:0:0.0:0:0.949...0.0...................................................可能，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，{“c“““““““““下列下列下列以下以下以下以下以下以下以下以下以下”c““““““““““““““““““{“v”：107}，{“v”：1.02287}，{“c”：[{“v”：“CLNTSV”}，{“v”：“CSPro”}，{“v”：7}，{“v”：314.25}，{“v”：23}，{“v”：0.900775}，{“c”：[{“v”：{“v”：2552.46}，{“v”：878.42}，，{“v”：878.42}，，{“v”：0.81.42}，，{“v”：0.815323}}，，，，{，“c”c“““““““““““““““““，，[c“““““““““““[v”：”以下以下以下以下以下简称““““““““：：”CSCSSPSPP”CSSPP““，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，"v:0.951064},{"c:[{"v:"CLNTSV},{"v:"Docstars},{"v:5},{"v:1404.41},{"v:192.51},{"v:0.988193}“v”：6.7，{“v”：1421.97}，，，{“v”：14.9.97}，，{“v”：183.93}，，{“v”：183.93}，，{“v：0.979.979.927}}，，，，，，，，，，{“c”c““““““，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，{“v”：0.867859}，{“c”：[{“v”：“CLNTSV”}，{“v”：“JPMC”}，{“v”：5}，{“v”：2560.9}，{“v”：1397.62}，{“v”：0.885179}{“c”c“““{“v”：“CLNTSV”的“{”v“““““““““““““““““““”v““““““““”v““““：”CLNTSV”的”c“，，，{”v““““““““““““““，，{”v“：6.5.5”7 7，，，{“v”：3248.3248.58.59}，，，，，，，，，{“v““““““：1931.5.5.5.5.5.5.85}，，，，，，，，，，，，，，，，，，，，，，，，，，，{”1931.85.85，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，{“0.5”0.0.0.0.0.85{“v”：0.862475}，{“c”：[{“v”：“CLNTSV”}，{“v”：“XFT”}，{“v”：5}，{“v”：1890.48}，{“v”：69}，{“v”：0.971964}，{“c”：[{“v”：”CLNTSV“}，{“v”：“XFT”}，{“v”：6}，{“v”：2083.39}，{“v”：