Vizualyse: Column Chart

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.

7 Creating a Dashboard - Part 1

When you have a lot of data to be shown on a page, it makes sense to give the viewer an opportunity to filter some of the data so that he or she gets a cleaner view. In this case, we will first draw a rather clumsy Column Chart and then in the next section. The data for the chart is drawn from this spreadsheet. The chart shown below can also be seen in this regular HTML page.

Basic Column Chart Showing All Data

Data Source

Note how we have specified

the Google Docs spreadsheet : https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc
the sheet : sheet=MilkProduction
range : range=B2:H37
headers : headers=1
columns : query.setQuery('select B,E,F');
chart type : var chartMQ = new google.visualization.ColumnChart(document.getElementById('chart_divMQ'));


<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(drawColChartMQ);
    
    function drawColChartMQ() {
      var query = new google.visualization.Query(
      'https://docs.google.com/a/yantrajaal.com/spreadsheet/ccc?key=0AhEX55Pfl1eedExUbS1xNzBuQVAyNDJTeG1weFQxbXc&sheet=MilkProduction&range=B2:H37&headers=1');
      query.setQuery('select B,E,F'); 
      query.send(handleQueryResponseMQ);
      };
    
    function handleQueryResponseMQ(responseMQ) {
      if (responseMQ.isError()) {
       alert('Error in query: ' + responseMQ.getMessage() + ' ' + responseMQ.getDetailedMessage());
       return;
      }
  
    var options = {
          title: 'Milk Production',
          hAxis: {title: 'State', titleTextStyle: {color: 'red'}}
        };

    var data = responseMQ.getDataTable();
    var chartMQ = new google.visualization.ColumnChart(document.getElementById('chart_divMQ'));
    chartMQ.draw(data, options );
}

    </script>
  </head>
  <body>
  <h3>
Basic Column Chart Showing All Data</h3>
<div id="chart_divMQ" style="height: 500px; width: 900px;">
</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>
<br />

In the next post we will convert this into a Dashboard

Pages

Friday, 20 December 2013

7 Creating a Dashboard - Part II

The Dashboard on this blog

7 Creating a Dashboard - Part 1

Basic Column Chart Showing All Data