[visualization-api] Google Charts Gauge Won't Visualize

[Robin Hrynyszyn]

This has been driving me crazy, I can't figure out why my gauge chart won't 
visualize. I currently have a page with four charts, and all load and work, 
but the gauge does not show up, and I am not getting any errors in the 
console. I do not think it is a json issue, because the chart will not even 
show up.

Here is my code for the page, chart4 is the gauge chart:



  <!--Load the AJAX Charts API-->
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";></script>

<script type="text/javascript" 
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar',
 
'corechart', 'gauge']}]}"></script>

<script type="text/javascript">

      google.setOnLoadCallback(drawChart);

        function drawChart() {
var jsonData;

var wb = $( ".waterbody option:selected" ).attr("value");
var d = $( ".time option:selected" ).attr("value"); 
var s = $( ".species option:selected" ).attr("value"); 
  
  jsonData1 = $.ajax({
          url: "getData.php",
  data: {chart:"1", waterbody: wb, date:d},
          dataType:"json",
          async: false
          }).responseText;

  jsonData2 = $.ajax({
          url: "getdata.php",
  data: {chart: "2", waterbody: wb, date:d},
          dataType:"json",
          async: false
          }).responseText;

  jsonData3 = $.ajax({
          url: "getData.php",
  data: {chart: "3", waterbody: wb, date:d, species: s},
          dataType:"json",
          async: false
          }).responseText;
  jsonData4 = $.ajax({
          url: "getData.php",
          data: {chart: "4", waterbody: wb, date:d},
          dataType:"json",
          async: false
          }).responseText;





      var options1 = {
          title: 'Species Distribution'
        };

      var options2 = {
    
           width: 600,
   height:450,
   chart: {
          },
          bars: 'vertical', // Required for Material Bar Charts.
          series: {
            0: { axis: 'Fish Caught' }, // Bind series 0 to an axis named 
'distance'.
            1: { axis: 'Fish Harvested' } // Bind series 1 to an axis named 
'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'Fish/Hour'} // Bottom x-axis.

            }
          }
        };

        var options3 = {
          title: 'Chart',
          legend: { position: 'none' },
          width: 600,
  height: 450,
          chart: { title: 'Chart',
                   subtitle: 'based on species and waterbody selected' },
          bars: 'vertical', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'bottom', label: 'Length Groups (in inches)'}, // 
Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };


        var options4 = {
          width: 200,
          height: 200,
  min: 1,
  max: 20,
          redFrom: 15, 
  redTo: 20,
          yellowFrom:10, 
  yellowTo: 15,
          minorTicks: .25
        };

var data1 = new google.visualization.DataTable(jsonData1);
var data2 = new google.visualization.DataTable(jsonData2);
var data3 = new google.visualization.DataTable(jsonData3);
var data4 = new google.visualization.DataTable(jsonData4);

        var chart1 = new 
google.visualization.PieChart(document.getElementById('piechart'));
        var chart2 = new 
google.charts.Bar(document.getElementById('barchart1'));
        var chart3 = new 
google.charts.Bar(document.getElementById('barchart2'));
        var chart4 = new 
google.visualization.Gauge(document.getElementById('gauge'));


        chart1.draw(data1, options1);
        chart2.draw(data2, options2);
        chart3.draw(data3, options3);
        chart4.draw(data4, options4);

      }



  $( document ).ready(function() {
  $(".filter").click(function() {
  //var value = $( ".time option:selected" ).attr("value");
  //alert(value);
drawChart();
  });
  });
</script>
    <link href="css/bootstrap-social.css" rel="stylesheet">
    <link rel="stylesheet" 
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>


<div id="piechart"></div>


<div id="barchart1"></div>


<div id="barchart2"></div>


        <div id="gauge"></div>







Thanks in advance for any help anyone can offer!

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.