1

ここに初めて投稿します。

複数のグラフを表示する Google ダッシュボードを開発しようとしています。各グラフには、異なるデータ テーブルからデータを供給する必要があります。これらのデータ テーブルは、JSON フィードを介して同じ Google スプレッドシートから入力されます。Google スプレッドシートに対してクエリを実行し、Google がクエリを返したときにそれらを変数として保存することで、データ テーブルを作成しています。

さらに複雑なことに、各グラフに影響を与える必要があるカテゴリ フィルターがあります。これは、「論理」ダッシュボードのように、個別のデータ テーブルごとにダッシュボードを作成してそれらを集約することによって行われ、それぞれにカテゴリ フィルターを作成しています。他のダッシュボードの他のカテゴリ フィルタに影響を与えるために、イベントをリッスンするカテゴリ フィルタの最初のインスタンス。こうすることで、すべてのチャートは、カテゴリ フィルターでのみ行われた状態の変更によって影響を受けます。

概念実証のために、以下のコードを開発しています。Javascript コンソールを実行してすべてのエラーを修正しましたが、まだ空白のページが表示されます。

上記が理にかなっていることを願っています。ご協力いただきありがとうございます。

    <html>
<head>
    <title>Google visualisation demo: chart query controls</title>
    <!--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 controls package.
    // Packages for all the other charts you need will be loaded
    // automatically by the system.
    google.load('visualization', '1.1', {'packages':['controls','linechart']});

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

    // Declare variables outside of functions.
    var data1;
    var data2;

    function drawVisualization() {

    // Replace the data source URL on next line with your data source URL.
    var query1 = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AkjuVAUAbKOZdFM2LTByOVdLMkpFT3FmVTFyOW1jT2c&output=html');

    // Apply query language.
    query1.setQuery('SELECT E,F,I,C, sum(D) group by E,F,I,C');

    // Send the query with a callback function.
    query1.send(Dashboard1);

    // Replace the data source URL on next line with your data source URL.
    var query2 = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AkjuVAUAbKOZdFM2LTByOVdLMkpFT3FmVTFyOW1jT2c&output=html');

    // Apply query language.
    query2.setQuery('SELECT E,F,I,C, sum(D) group by E,F,I,C');

    // Send the query with a callback function.
    query2.send(Dashboard2);

    // First category filter
    network_filter = createDashboard1();
    network_filter2 = createDashboard2();

    // Second category filter
    introducer_filter = createDashboard1();
    introducer_filter2 = createDashboard2();

    // Third category filter
    business_filter = createDashboard1();
    business_filter2 = createDashboard2();

    // First category filter Event Listener
    google.visualization.events.addListener(network_filter, 'statechange', function() {
        network_filter2.setState(network_filter.getState());
        network_filter2.draw();
    });

    // Second category filter Event Listener
    google.visualization.events.addListener(business_filter, 'statechange', function() {
        business_filter2.setState(business_filter.getState());
        business_filter2.draw();
    });

    // Third category filter Event Listener
    google.visualization.events.addListener(introducer_filter, 'statechange', function() {
        introducer_filter2.setState(introducer_filter.getState());
        introducer_filter2.draw();
    });

    }

    function Dashboard1(response) {
        data1 = response.getDataTable();
        return data1;
        }

    // Everything is loaded. Assemble your dashboard...
    function createDashboard1() {

    // Wrapper for category filter declared in above function
    var networkPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'network_filter',
    'options': {
      'filterColumnLabel': 'Main Network',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
    });

    // Wrapper for category filter declared in above function
    var businessPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'business_filter',
    'options': {
      'filterColumnLabel': 'Business',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
    });

    // Wrapper for category filter declared in above function
    var introducerPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'introducer_filter',
    'options': {
      'filterColumnLabel': 'Introducer',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
    });

    // Chart effected by category filter
    var introducerChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'introducer_chart',

    'options': {
      'width': 800,
      'height': 200
    },
    'view': {'columns': [2, 4]}
    });

    // Table effected by category filter
    var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table',
    'options': {
      'width': '900px'
    }
    });

    // Bind, glue and draw dashboard
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
        bind(networkPicker, businessPicker).
        bind(businessPicker, introducerPicker).
        bind(introducerPicker, introducerChart).
        bind(introducerPicker, table).
        draw(data1);

        return networkPicker;
        return businessPicker;
        return introducerPicker;
        return data1;
    }

    function Dashboard2(response) {
        data2 = response.getDataTable();
        return data2;
    }

    // Everything is loaded. Assemble your dashboard...
    function createDashboard2() {

    // Wrapper for category filter declared in above function
    var networkPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'network_filter2',
    'options': {
      'filterColumnLabel': 'Main Network',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
    });

    // Wrapper for category filter declared in above function
    var businessPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'business_filter2',
    'options': {
      'filterColumnLabel': 'Business',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
    });

    // Wrapper for category filter declared in above function
    var introducerPicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'introducer_filter2',
    'options': {
      'filterColumnLabel': 'Introducer',
      'ui': {
        'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false    
      }
    }
    });

    // PieChart effected by category filter
    var productPie = new google.visualization.ChartWrapper({
       'chartType':'PieChart',
       'containerId': 'product_pie',
        'options': {'width': 300,'height': 300},
        'view': {'columns': [3, 4]}
    });

    // Table effected by category filter 
    var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table2',
    'options': {
      'width': '900px'
    }
    });

    // Bind, glue and draw dashboard
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
        bind(networkPicker, businessPicker).
        bind(businessPicker, introducerPicker).
        bind(introducerPicker, productPie).
        bind(introducerPicker, table).
        draw(data2);

        return networkPicker;
        return businessPicker;
        return introducerPicker;
        return data2;
    }

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

    </script>
</head>
<body>

<!--Div that will hold the dashboard-->
    <div id="dashboard_div">
        <!--Divs that will hold each control and chart-->
        <div id="network_filter"></div>
        <!--Display none because its managed by event listener-->
        <div id="network_filter2" style="display:none"></div>
        <div id="business_filter"></div>
        <!--Display none because its managed by event listener-->
        <div id="business_filter2" style="display:none"></div>
        <div id="introducer_filter"></div>
        <!--Display none because its managed by event listener-->
        <div id="introducer_filter2" style="display:none"></div>
        <div id="introducer_chart"></div>
        <div id="product_pie"></div>
        <div id="table"></div>
        <div id="table2"></div>
    </div>

<body>
</html>
4

0 に答える 0