Plotting cities on map - 25/01/2017

D3js- Treemap 20/01/2017

Treemap

Creating interactive google chart - Dashboard 2

Basic Column Chart Showing All Data

DATA SOURCE

Creating interactive google chart - Dashboard 1

Basic Column Chart Showing All Data

DATA SOURCE

Data visualization - Specifying the range of data and selecting columns

The Chart below displays the the poverty among the top 10 states of INDIA

=========================================================================================================
  " the code for the above Google chart is displayed Below "


<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1BiBAL-DDDj2kpk8Gqohi_aV42FfcsBokUk7G2JysbRs/edit?usp=sharing');

  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var options = {'title'

Google charts using google docs

========================================
   <div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1ZKpGtoWg5yz_TX8CbadBVNJVaR_k4yIE81q0qpuEPLE/edit?usp=sharing');

  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var options = {'title':'Crime among children 2011',
                       'width':400,
                       'height':600};
  var chart = new google.visualization.PieChart(document.getElementById('columnchart'));
  chart.draw(data, options);
}
</script>

<title>Data from a Spreadsheet</title>
</head>

<body>
<span id='columnchart'></span>
</body>
========================================

12/01/2017 - Basic Google Chart

========================================
   <!--Load the AJAX API-->
    <script src="https://www.google.com/jsapi" type="text/javascript"></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);

      // 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_div1'));
        chart.draw(data, options);
      }
    </script>
========================================