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']
});

functiondrawChart() {
  // get the selected option valuevar region = jQuery(".region").find(":selected").val();

  // build query with select statement based on region valuevar 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);
};

functionhandleQueryResponse(response) {
  // get data tablevar data = response.getDataTable();

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

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

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

  // set chart heightvar chartHeight = chartAreaHeight + 70;

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

  // find max amount for ticksvar 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 1000var maxTick = Math.ceil(dataMax.getValue(0, 1) / 1000) * 1000;

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

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

  // chart optionsvar 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 heightbar: {
      groupWidth: 7
    },
    // set x-axis tickshAxis: {
      ticks: xTicks
    },
    // set y-axis optionsvAxis: {
      // format for yearformat: '0',
      // text style, reduce fonttextStyle: {
        fontSize: 8
      },
      // tick marksticks: yTicks
    }
  };

  // create data view from data tablevar 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 chartvar 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%;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divclass="text">
    Select a region below to know the annual rainfall in that region.
</div><div><selectclass="region"><!-- like this better than 'optgroup', if selection must be made before draw --><optionselected="selected"disabled>Please select a region...</option><optionvalue="B">Andaman &amp; Nicobar Islands</option><optionvalue="C">Arunachal Pradesh</option><optionvalue="D">Assam, Meghalaya</option><optionvalue="E">Bihar</option><optionvalue="F">Chattisgarh</option><optionvalue="G">Coastal Karnataka</option><optionvalue="H">Coastal Andhra Pradesh</option><optionvalue="I">East Rajasthan</option><optionvalue="J">East Madhya Pradesh</option><optionvalue="K">East Uttar Pradesh</option><optionvalue="L">Gangetic West Bengal</option><optionvalue="M">Gujarat Region, Dadra &amp; Nagar Haveli</option><optionvalue="N">Haryana, Delhi, Chandigarh</option><optionvalue="O">Himachal Pradesh</option><optionvalue="P">Jammu, Kashmir</option><optionvalue="Q">Jharkhand</option><optionvalue="R">Kerala</option><optionvalue="S">Kokan, Goa</option><optionvalue="T">Lakshadweep</option><optionvalue="U">Madhya Maharashtra</option><optionvalue="V">Maratwada</option><optionvalue="W">Nagaland, Manipur, Mizoram, Tripura</option><optionvalue="X">North Interior Karnataka</option><optionvalue="Y">Orissa</option><optionvalue="Z">Punjab</option><optionvalue="AA">Rayalseema</option><optionvalue="AB">Saurashtra, Kutch, Diu</option><optionvalue="AC">South Interior Karnataka</option><optionvalue="AD">Sub-Himalayan, West Bengal, Sikkim</option><optionvalue="AE">Tamil Nadu, Pondicherry</option><optionvalue="AF">Telengana</option><optionvalue="AG">Uttaranchal</option><optionvalue="AH">Vidarbha</option><optionvalue="AI">West Madhya Pradesh</option><optionvalue="AJ">West Rajasthan</option><optionvalue="AK">West Uttar Pradesh</option></select></div><divid="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"
          }