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

});