From 018cebeab4c3c8ade5362c3a8ff49d5534daab46 Mon Sep 17 00:00:00 2001
From: Brian Moe <brian.moe@ligo.org>
Date: Tue, 10 Jan 2012 15:56:12 -0600
Subject: [PATCH] playing with dashboard
---
templates/gracedb/datas.html | 147 +++++++++++++++++++++++++++--------
1 file changed, 113 insertions(+), 34 deletions(-)
diff --git a/templates/gracedb/datas.html b/templates/gracedb/datas.html
index a57962e7b..9e05c51e9 100644
--- a/templates/gracedb/datas.html
+++ b/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 %}
--
GitLab