PocketQuery Control Template Example

pocketquery-control-template.html

<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
  <table class="columns">
    <tr>
      <td><div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div></td>
      <td><div id="programmatic_chart_div"></div></td>
    </tr>
  </table>
</div>

<script>


(function() {
  function getDataTableArray() { // TODO
    var dataTableArray = [];
    jQuery.each(queryArray, function(index, row) {
      // TODO: build dataTableArray
    });

    return dataTableArray;
  }

  function onload() {
	
    var dashboard = new google.visualization.Dashboard(document.getElementById('programmatic_dashboard_div'));

    var programmaticSlider = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'programmatic_control_div',
      'options': {
        'filterColumnLabel': 'release'
      }
    });

    var programmaticChart  = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'programmatic_chart_div'
    });

    // the correct array must be created from the PQ result which is in slightly different format
    // the function getDataTableArray should receive the query array and return the array for the data table
    // in the correct format:
    //var dataTableArray = getDataTableArray(PocketQuery.queryArray("myQueryName"));
    //var data = google.visualization.arrayToDataTable(dataTableArray);

    // This is only for demo purpose!
    var data = google.visualization.arrayToDataTable([
      ['release', 'page1', 'page2', 'page3'],
      ['2015.08.00' , 5145, 10125, 4514],
      ['2015.09.00', 7214, 1212, 1454],
      ['2015.10.00', 3151, 8215, 4748],
      ['2015.10.01', 2125, 1021, 1561],
      ['2015.11.00', 6215, 5545, 12545],
      ['2015.12.00', 10125, 3458, 1245],
      ['2015.12.01', 8145, 1101, 14521]
    ]);

    dashboard.bind(programmaticSlider, programmaticChart);
    dashboard.draw(data);
  }
  
  PocketQuery.loadCharts(['corechart','controls'], {callback: onload});

}());

</script>