playing with dashboard

templates/gracedb/datas.html

@@ -3,39 +3,50 @@
 {% block jscript %}
 <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);
+      google.load('visualization', '1.0', {'packages':['corechart','controls']});
+    </script>
       
-      // Callback that creates and populates a data table, 
-      // instantiates the pie chart, passes in the data and
-      // draws it.
-      function drawChart() {
-
-      // Create the data table.
-      var data = new google.visualization.DataTable();
-      data.addColumn('string', 'Topping');
-      data.addColumn('number', 'Slices');
-      data.addRows([
-        ['Mushrooms', 3],
-        ['Onions', 1],
-        ['Olives', 1], 
-        ['Zucchini', 1],
-        ['Pepperoni', 2]
-      ]);
-
-      // Set chart options
-      var options = {'title':'How Much Pizza I Ate Last Night',
-                     'width':400,
-                     'height':300};
-
-      // Instantiate and draw our chart, passing in some options.
-      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
-      chart.draw(data, options);
-    }
+
+    <script type="text/javascript">
+      google.setOnLoadCallback(setupDash);
+      function setupDash() {
+        var dashboard = new google.visualization.Dashboard(
+            document.getElementById('dash'));
+
+        var chart = new google.visualization.ChartWrapper({
+            'chartType': 'ColumnChart',
+            'containerId': 'chart',
+            'options': {
+                'width': 800,
+                'height': 300,
+            }
+        });
+
+        var control = new google.visualization.ControlWrapper({
+            'controlType': 'CategoryFilter',
+            'containerId': 'control',
+            'options': {
+                'filterColumnLabel': 'Year',
+            },
+            //'state': {},
+        });
+
+        dashboard.bind(control, chart);
+        getData(dashboard);
+      }
+      function getData(dashboard) {
+          var opts = {sendMethod: 'xhr'};
+          var query = new google.visualization.Query('https://moe.phys.uwm.edu/gracedb/datas/source', opts);
+          query.send(function(response){
+            if (response.isError()) {
+                alert("ERRORZ");
+                return;
+            }
+            data = response.getDataTable();
+            dashboard.draw(data);
+          });
+      }
     </script>
 
 
@@ -66,9 +77,9 @@
           
           // Send the query with a callback function.
           query.send(handleQueryResponse);
-        }
-        function handleQueryResponse(response) {
+        };
 
+        function handleQueryResponse(response) {
           if (response.isError()) {
             alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
             return;
@@ -88,6 +99,61 @@
         }
     </script>
 
+    <script type="text/javascript">
+  // 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 = google.visualization.arrayToDataTable([
+          ['Name', 'Donuts eaten', 'thrown up'],
+          ['Michael' , 5,6],
+          ['Elisa', 7,8],
+          ['Robert', 3,4],
+          ['John', 2,3],
+          ['Jessica', 6,5],
+          ['Aaron', 1,0],
+          ['Margareth', 8,7]
+        ]);
+
+        // Create a dashboard.
+        var dashboard = new google.visualization.Dashboard(
+          document.getElementById('dashboard_div'));
+
+        // Create a range slider, passing some options
+        var donutRangeSlider = new google.visualization.ControlWrapper({
+          'controlType': 'NumberRangeFilter',
+          'containerId': 'filter_div',
+          'options': {
+            'filterColumnLabel': 'Donuts eaten'
+          }
+        });
+
+        // Create a pie chart, passing some options
+        var pieChart = new google.visualization.ChartWrapper({
+          'chartType': 'BarChart',
+          'containerId': 'chart_div',
+          'options': {
+            'width': 300,
+            '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, pieChart);
+
+        // Draw the dashboard.
+        dashboard.draw(data);
+      }
+    </script>
 
 {% endblock %}
 
@@ -101,8 +167,21 @@
 IMA dATAhATE-Ahhhhhhhhhhhh
 {{ thing }}
 <hr/>
-<div id="chart_div">ONEs</div>
+<div id="chart_div1">ONEs</div>
 <hr/>
 <div id="chart_div2">Goobs</div>
 
+<div id="dash">
+    Dashle
+    <div id="chart">Chartle</div>
+    <div id="control">controlle</div>
+</div>
+
+ <!--Div that will hold the dashboard-->
+    <div id="dashboard_div">
+      <!--Divs that will hold each control and chart-->
+      <div id="chart_div"></div>
+      <div id="filter_div"></div>
+    </div>
+
 {% endblock %}