title: Having trouble drawing chart using data from JSON and Google Charts
body: <p>I am trying to draw a line graph using google charts and a JSON that I have created from MYSQL. I have tried to use the examples provided on Google Visualization API but haven't been successful.</p>
  
  <pre><code>google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  
  
  function drawChart() {
      var selectedValue = $("select option:selected").val()
      var jsonData = $.ajax({
          type: 'get',
          url: '/social_scores/'+selectedValue,
          dataType:"json",
          success: function(response, status, jqXHR) {
               /* Create the charts after operation succeeded */
               var data = new google.visualization.DataTable(response);
               data.addColumn('string', 'Week');
               data.addColumn('number', 'Overall');
               data.addColumn('number', 'Presence');
               data.addColumn('number', 'Popularity');
               data.addColumn('number', 'Engagement');
               data.addColumn('number', 'Reputation');
               data.addRows([
                   ['Week 1', response.overall_score, response.presence_score, response.popularity_score, response.engagement_score, response.reputation_score ],
                   ['Week 2', response.overall_score, response.presence_score, response.popularity_score, response.engagement_score, response.reputation_score ]
               ]);
              var options = {
                  title:'Key Success Metrics over time across all channels',
                  'backgroundColor': 'transparent',
                  'width': 620,
                  'vAxis': {minValue:"0", maxValue:"100", gridlines:{count: 7} },
                  'chartArea': {top:"50", left: "40"},
                  'legend':{position: 'top', alignment: 'start' }
             };
             var chart = new google.visualization.LineChart(document.getElementById('line_graph'));
             chart.draw(data, options);
            ("select").change(function(){
              alert($("select option:selected").val())
  
             });
  
  
          }
      });
  };
  </code></pre>
  
  <p>Here is the graph span that should be update:</p>
  
  <pre><code>&lt;span id="line_graph"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Here is the drop down html:</p>
  
  <pre><code>&lt;select id="social_entity_id" name="social_entity[id]"&gt;
  &lt;option value="1"&gt;DataSimply&lt;/option&gt;
  &lt;option value="2"&gt;mbonat&lt;/option&gt;
  &lt;option value="3"&gt;OpenLabel&lt;/option&gt;
  &lt;option value="4"&gt;scrible&lt;/option&gt;
  &lt;option value="5"&gt;jivesoftware&lt;/option&gt;
  &lt;option value="6"&gt;lithiumTech&lt;/option&gt;
  &lt;option value="7"&gt;getsatisfaction&lt;/option&gt;
  &lt;option value="8"&gt;tumblr&lt;/option&gt;
  &lt;option value="9"&gt;nytimes&lt;/option&gt;
  &lt;option value="10"&gt;gilt&lt;/option&gt;
  &lt;option value="11"&gt;groupon&lt;/option&gt;
  &lt;option value="12"&gt;Bloombergnow&lt;/option&gt;
  &lt;option value="13"&gt;NWSCorp&lt;/option&gt;
  &lt;option value="14"&gt;etsy&lt;/option&gt;
  &lt;option value="15"&gt;foursquare&lt;/option&gt;
  &lt;option value="16"&gt;Yelp&lt;/option&gt;
  &lt;option value="17"&gt;businessinsider&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Where should I put the change event so that the numbers changed based on the selected value of the dropdown?</p>