Having trouble drawing chart using data from JSON and Google Charts - ruby-on-rails-3

Question

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.
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())
});
}
});
};
Here is the graph span that should be update:
<span id="line_graph"></span>
Here is the drop down html:
<select id="social_entity_id" name="social_entity[id]">
<option value="1">DataSimply</option>
<option value="2">mbonat</option>
<option value="3">OpenLabel</option>
<option value="4">scrible</option>
<option value="5">jivesoftware</option>
<option value="6">lithiumTech</option>
<option value="7">getsatisfaction</option>
<option value="8">tumblr</option>
<option value="9">nytimes</option>
<option value="10">gilt</option>
<option value="11">groupon</option>
<option value="12">Bloombergnow</option>
<option value="13">NWSCorp</option>
<option value="14">etsy</option>
<option value="15">foursquare</option>
<option value="16">Yelp</option>
<option value="17">businessinsider</option>
</select>
Where should I put the change event so that the numbers changed based on the selected value of the dropdown?

Answer 1

The AJAX operation works asynchronously, so you need to wait until the operation has completed before initializing your charts.
$(function() {
var chart;
var drawChart = function {
var selectedValue = $("select#social_entity_id option:selected").val();
$.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([
['1', response.overall_score, 1, 1, 1, 1 ],
['1', 1, 1, 1, 1, 1 ]);
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' }
};
chart = new google.visualization.LineChart(document.getElementById('line_graph'));
chart.draw(data, options);
}
});
}
google.load("visualization", "1", {'callback': drawChart, packages:["corechart"]});
$('#social_entity_id').change(drawChart);
});