mukhtyar/index.html

## index.html
<html>
  <head>
    <!--Load the AJAX API-->
    <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', {packages:['table']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawVisualization);


      // Callback that creates and populates a data table,
      // instantiates the table, passes in the data and
      // draws it.
      function drawVisualization() {
        var query = new google.visualization.Query(
            'http://cal-adapt.org/temperature/heat_days.json/?tq=lng%3D-123.20068359375%26lat%3D40.12849105685408%26scenario%3Da2%26model%3Dgfdl%26type%3Dnumdays%26units%3Dimperial%26climvar%3Dtmax&tqx=reqId%3A0');

        // Send the query with a callback function.
        query.send(handleQueryResponse);
      }

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

        var data = response.getDataTable();

        // Create and draw the table.
        var table = new google.visualization.Table(document.getElementById('table'));
        table.draw(data);

        document.getElementById('climnorm_avg_numdays').innerHTML = data.getColumnProperty(1, 'climnorm_avg_numdays');

        document.getElementById('extreme_heat_threshold').innerHTML = data.getColumnProperty(1, 'extreme_heat_threshold');

      }
    </script>
  </head>
  <body >
    <h4>Historical Avg. # Extreme Heat Days: <span id="climnorm_avg_numdays"></span></h4>
    <h4>Extreme Heat Day Threshold: <span id="extreme_heat_threshold"></span></h4>
    <div id="table"></div>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<!--Load the AJAX API-->
	<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', {packages:['table']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawVisualization);


	// Callback that creates and populates a data table,
	// instantiates the table, passes in the data and
	// draws it.
	function drawVisualization() {
	var query = new google.visualization.Query(
	'http://cal-adapt.org/temperature/heat_days.json/?tq=lng%3D-123.20068359375%26lat%3D40.12849105685408%26scenario%3Da2%26model%3Dgfdl%26type%3Dnumdays%26units%3Dimperial%26climvar%3Dtmax&tqx=reqId%3A0');

	// Send the query with a callback function.
	query.send(handleQueryResponse);
	}

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

	var data = response.getDataTable();

	// Create and draw the table.
	var table = new google.visualization.Table(document.getElementById('table'));
	table.draw(data);

	document.getElementById('climnorm_avg_numdays').innerHTML = data.getColumnProperty(1, 'climnorm_avg_numdays');

	document.getElementById('extreme_heat_threshold').innerHTML = data.getColumnProperty(1, 'extreme_heat_threshold');

	}
	</script>
	</head>
	<body >
	<h4>Historical Avg. # Extreme Heat Days: <span id="climnorm_avg_numdays"></span></h4>
	<h4>Extreme Heat Day Threshold: <span id="extreme_heat_threshold"></span></h4>
	<div id="table"></div>
	</body>
	</html>