0

Googleチャットダッシュボードでドリルダウン機能を実現するためのコードを教えてください。

年をクリックすると、次のレベル、たとえば月、次に週、そして日にドリルダウンする必要があります。

いわゆるドリルダウン機能です。これはチャート用のコードです...ダッシュボードでの使用方法を知りたいです-たとえば、カテゴリフィルターを使用します。

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['Category', 'Name', 'Value'],
        ['Foo', 'Fiz', 5],
        ['Foo', 'Buz', 2],
        ['Bar', 'Qud', 7],
        ['Bar', 'Piz', 4],
        ['Cad', 'Baz', 6],
        ['Cad', 'Nar', 8]
    ]);

    var aggregateData = google.visualization.data.group(data, [0], [{
        type: 'number',
        label: 'Value',
        column: 2,
        aggregation: google.visualization.data.sum
    }]);

    var topLevel = true;



    var chart = new google.visualization.ColumnChart(document.querySelector('#chart'));
    var options = {
        height: 400,
        width: 600
    };

    function draw (category) {
        if (topLevel) {
            // rename the title
            options.title = 'Top Level data';
            // draw the chart using the aggregate data
            chart.draw(aggregateData, options);
        }
        else {
            var view = new google.visualization.DataView(data);
            // use columns "Name" and "Value"
            view.setColumns([1, 2]);
            // filter the data based on the category
            view.setRows(data.getFilteredRows([{column: 0, value: category}]));
            // rename the title
            options.title = 'Category: ' + category;
            // draw the chart using the view
            chart.draw(view, options);
        }
    }

    google.visualization.events.addListener(chart, 'select', function () {
        if (topLevel) {
            var selection = chart.getSelection();
            // drill down if the selection isn't empty
            if (selection.length) {
                var category = aggregateData.getValue(selection[0].row, 0);
                topLevel = false;
                draw(category);
            }
        }
        else {
            // go back to the top
            topLevel = true;
            draw();
        }
    });

    draw();
}
//google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});
//google.load('visualization', '1', {packages: ['corechart'], callback: drawchart});

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart"></div>
  </body>
</html>

よろしく、般若

4

1 に答える 1