Google Chart Is Not Displaying

I'm trying to create a feature in which when you select a region from a dropdown list and request rainfall data for it, you'll get a Google Chart for that data. But, it's not worki

Solution 1:

made a few changes...

1. google.load and setOnLoadCallback should only be called once per page load
2. added value attribute to option to avoid long if statement
3. changed query to use the tq= parameter, which allows sql statement, and returns only the columns needed, instead of entire range
4. removed 'get data' button

EDIT

5. chart covers the dropdown list -- is due to css float: left; on .region
   changed to text-align: left;
6. increase height of bars -- use chart option bar.groupWidth
7. x-axis to have a difference of 1000 -- use chart option hAxis.ticks
   provide desired labels in an array
8. y-axis to show all the years and not just a few in between -- same as above, but use vAxis.ticks
9. added comments, let me know...

see following, working snippet...

// load google charts, version '45'. 'current' version throws error when loading DataView
google.charts.load('45', {
  // callback function when google finished loading
  'callback': function() {
    jQuery(".region").change(drawChart);
    // removed 'drawChart()', appears you want a selection before drawing
  },
  // packages used on this page
  'packages': ['corechart']
});

function drawChart() {
  // get the selected option value
  var region = jQuery(".region").find(":selected").val();

  // build query with select statement based on region value
  var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wLbWMwwu_bXcpxm8TlkNtkR4gbeqz_o8CuRzdDQMUaM/gviz/tq?gid=799372846&tq=select A," + region);

  // run query
  query.send(handleQueryResponse);
};

function handleQueryResponse(response) {
  // get data table
  var data = response.getDataTable();

  // create number formatter
  var formatter = new google.visualization.NumberFormat({
    pattern: '0'
  });
  // format first column
  formatter.format(data, 0);

  // create number formatter
  var formatter = new google.visualization.NumberFormat({
    pattern: '#,##0.0'
  });
  // format second column
  formatter.format(data, 1);

  // set chart area height
  var chartAreaHeight = data.getNumberOfRows() * 12;

  // set chart height
  var chartHeight = chartAreaHeight + 70;

  // set x-axis labels or 'ticks'
  var xTicks = [];

  // find max amount for ticks
  var dataMax = google.visualization.data.group(
    data,
    // modifier column to find max on entire table
    [{column: 0, type: 'string', modifier: function () {return '';}}],
    // max column
    [{column: 1, type: 'number', aggregation: google.visualization.data.max}]
  );

  // 'round up' to nearest 1000
  var maxTick = Math.ceil(dataMax.getValue(0, 1) / 1000) * 1000;

  // load ticks array
  for (var i = 0; i <= maxTick; i = i + 1000) {
    xTicks.push(i);
  }

  // build y-axis ticks, add every year, need to reduce font or increase height
  var yTicks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    yTicks.push(data.getValue(i, 0));
  }

  // chart options
  var options = {
    animation: {
      startup: true,
      easing: 'linear',
      duration: 750
    },
    annotations: {
      textStyle: {
        fontSize: 7
      }
    },
    title: jQuery(".region").find(":selected").text(),
    legend: "none",
    vAxis: {
      title: "Year",
      format: "0"
    },
    hAxis: {
      title: "Rainfall (in mm)"
    },
    height: chartHeight,
    chartArea: {
      height: chartAreaHeight,
      // use number for exact, string for percentage "100%"
      top: 70,
      right: 100,
      bottom: 100,
      left: 100
    },
    // set bar height
    bar: {
      groupWidth: 7
    },
    // set x-axis ticks
    hAxis: {
      ticks: xTicks
    },
    // set y-axis options
    vAxis: {
      // format for year
      format: '0',
      // text style, reduce font
      textStyle: {
        fontSize: 8
      },
      // tick marks
      ticks: yTicks
    }
  };

  // create data view from data table
  var view = new google.visualization.DataView(data);
  // add calculated column for annotations, 'current' version bombs here
  view.setColumns([0, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
  }]);

  // create, draw chart
  var chart = new google.visualization.BarChart(document.getElementById("chart"));
  chart.draw(view, options);

  // re-draw chart when the window resizes
  // removed 'window.addEventListener' as may not work in older browsers
  $(window).resize(function() {
    chart.draw(view, options);
  });
};

.text {
  margin-bottom: 10px;
}

.region {
  text-align: left;
}

button {
  text-align: left;
  margin-left: 10px;
}

#chart {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="text">
    Select a region below to know the annual rainfall in that region.
</div>

<div>
    <select class="region">
        <!-- like this better than 'optgroup', if selection must be made before draw -->
        <option selected="selected" disabled>Please select a region...</option>
        <option value="B">Andaman &amp; Nicobar Islands</option>
        <option value="C">Arunachal Pradesh</option>
        <option value="D">Assam, Meghalaya</option>
        <option value="E">Bihar</option>
        <option value="F">Chattisgarh</option>
        <option value="G">Coastal Karnataka</option>
        <option value="H">Coastal Andhra Pradesh</option>
        <option value="I">East Rajasthan</option>
        <option value="J">East Madhya Pradesh</option>
        <option value="K">East Uttar Pradesh</option>
        <option value="L">Gangetic West Bengal</option>
        <option value="M">Gujarat Region, Dadra &amp; Nagar Haveli</option>
        <option value="N">Haryana, Delhi, Chandigarh</option>
        <option value="O">Himachal Pradesh</option>
        <option value="P">Jammu, Kashmir</option>
        <option value="Q">Jharkhand</option>
        <option value="R">Kerala</option>
        <option value="S">Kokan, Goa</option>
        <option value="T">Lakshadweep</option>
        <option value="U">Madhya Maharashtra</option>
        <option value="V">Maratwada</option>
        <option value="W">Nagaland, Manipur, Mizoram, Tripura</option>
        <option value="X">North Interior Karnataka</option>
        <option value="Y">Orissa</option>
        <option value="Z">Punjab</option>
        <option value="AA">Rayalseema</option>
        <option value="AB">Saurashtra, Kutch, Diu</option>
        <option value="AC">South Interior Karnataka</option>
        <option value="AD">Sub-Himalayan, West Bengal, Sikkim</option>
        <option value="AE">Tamil Nadu, Pondicherry</option>
        <option value="AF">Telengana</option>
        <option value="AG">Uttaranchal</option>
        <option value="AH">Vidarbha</option>
        <option value="AI">West Madhya Pradesh</option>
        <option value="AJ">West Rajasthan</option>
        <option value="AK">West Uttar Pradesh</option>
    </select>
</div>

<div id="chart">
</div>

Solution 2:

Try this

https://jsfiddle.net/15rdener/

that's the wrong format for a javascript object

 options = {
             title = "East Madhya Pradesh"
           }

you should use

options = {
             title : "East Madhya Pradesh"
          }