Ruby on Rails 3 - 使用来自JSON和Google图表的数据绘制图表时遇到问题

Question

我正在尝试使用谷歌图表和我从MYSQL创建的JSON绘制折线图。我尝试使用谷歌可视化API上提供的示例，但没有成功。

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())
           });

        }
    });
};

以下是应更新的图形跨度：

<span id="line_graph"></span>

这是下拉的 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>

我应该在哪里放置更改事件，以便根据下拉列表的选定值更改数字？

Answer 1

AJAX 操作异步工作，因此您需要等到操作完成后再初始化图表。

$(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);
});