Ruby on rails 3 使用JSON和Google图表中的数据绘制图表时遇到问题

我试图用谷歌图表和我从MYSQL创建的JSON绘制一个折线图。我曾尝试使用Google Visualization 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>

数据暗示
姆博纳特
OpenLabel
潦草
JIVES软件
锂技术
获得满足感
tumblr
纽约时报
镀金
groupon
布卢姆贝格诺
NWSCorp
埃西
四方
发出短而尖的叫声
商业内幕人士

---

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

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

});

---

这有什么错误吗？如果你在jsFiddle中也有这样的功能，那就太好了，这样我们就可以可视化正在发生的事情。由于数据来自何处，所以不能将其放入jsFiddle。下面是它抛出的错误：

uncaughttypeerror:无法读取未定义的属性“jsonData.total_score”

jsonData看起来如何？看起来它里面没有总分数属性。

{“创建时间”：“2013-01-15T14:04:31Z”，“订婚分数”：0，“最受欢迎分数”：0，“关注分数”：286，“好友分数”：1627，“id”：2941，“总分数”：10，“受欢迎分数”：0，“出席分数”：286，“声誉分数”：200，“转发分数”：0，“分数期结束”：“2013-01-11”，“分数周期开始”：“2013-01-10”，“分数周期类型”：“周”，“分数时间戳”：“2013-01-15T14:04:31Z”，“社会实体id”：1，“推特计数”：98，“更新时间”：“2013-01-15T14:04:31Z”

我想我可能知道你的问题所在。我会发布答案。我如何回复变更事件的数据？你的HTML是什么样的？你可以直接调用drawChart（）无论何时刷新视图。请确保在重新打印之前清空用于渲染图形的任何元素。我假设这是

线图

造成的。是的，线图div保存图形。您可以执行以下操作：

$（“select”）.change（function（）{drawChart（）；}）；

用HTML更新你的帖子，这样我就可以看到它是什么样子了。