Friday 20 December 2013

7 Creating a Dashboard - Part II

Here we take the same data used in the previous post and convert it into a dashboard. We have replaced the chart with a chart wrapper. Added three filters. Added a dashboard component and bound the three filters to the chart wrapper. You can see the result both in this blog as well as on this regular HTML page.

The Dashboard on this blog

Data Source

sOne can choose one or multiple states. Also one can specify the range of cow and buffalo milk production and so select only the states that have this production.


<head>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
     google.load('visualization', '1', {'packages': ['corechart','controls']});
     google.setOnLoadCallback(drawDashBoardMQ);
    
    function drawDashBoardMQ() {
            var queryMQ = new google.visualization.Query(
      'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc&sheet=MilkProduction&range=B2:H37&headers=1');
      queryMQ.setQuery('select B,E,F'); 
      queryMQ.send(handleQueryResponseMQ);
    };
    
    function handleQueryResponseMQ(responseMQ) {
      if (responseMQ.isError()) {
       alert('Error in query: ' + responseMQ.getMessage() + ' ' + responseMQ.getDetailedMessage());
       return;
     }
  
   var dashboardMQ = new google.visualization.Dashboard(document.getElementById('dash_divMQ')); 
 
 // Create a filter, passing some options
 // to filter out some rows based on value of column Cow Milk Total
   var CowMilkRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'cowfilter_MQ',
    'options': {
      'filterColumnLabel': 'Cow Milk Total',
      'label' : 'Cow',
      'minValue': 0.0,
      'maxValue': 5000.0
    }
   });
  
  // Create a filter, passing some options
  // to filter out some rows based on value of column Buffalo Milk
   var BuffaloMilkRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'buffalofilter_MQ',
    'options': {
      'filterColumnLabel': 'Buffalo Milk',
      'minValue': 0.0,
      'maxValue': 5000.0
    }
   });
  
   // Create a filter, passing some options
   // to filter out rows based on value of column State
   var StateFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'Statefilter_MQ',
    'options': {
      'filterColumnLabel': 'State',
      'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': true,
          'caption' : 'Choose State'
        },
     
    }
   });
  
  // Create a chart, passing some options
  // This is a chart wrapper
  var ColChartMQ = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart_divMQ',
    'options': {
      'width': 900,
      'height': 600,
      'title' : 'Milk Production',
      'hAxis': {title: 'State', titleTextStyle: {color: 'red'}},
    }
  }); 
  // Connect the three filters to the same chart
     dashboardMQ.bind([CowMilkRangeSlider,BuffaloMilkRangeSlider,StateFilter], ColChartMQ);
     
  // Get the data   
    var dataMQ = responseMQ.getDataTable();
    
  // Publish everything through teh dashboard
   dashboardMQ.draw(dataMQ)
   
}

    </script>
  </head>
  <body>
  <h3>
The Dashboard on this blog </h3>
<div id="dash_divMQ">
    <div id="Statefilter_MQ" style="height: 50px; width: 900px;">
</div>
<div id="chart_divMQ" style="height: 600px; width: 900px;">
</div>
<div id="cowfilter_MQ" style="height: 50px; width: 900px;">
</div>
<div id="buffalofilter_MQ" style="height: 50px; width: 900px;">
</div>
</div>
<a href="https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc&amp;usp=drive_web#gid=1" target="_blank">Data Source</a>
  </body>



for some reason, the data from the first row, Andhra Pradesh, cannot be seen on the dashboard even though it is visible in previous normal Column Chart !!

A more sophisticated RangeFilter is shown in this post.

No comments:

Post a Comment