使用AJAX更新Google Charts值

Question

I'm trying to update a Google Chart with data from a database using AJAX.

The updates should happen when I select an option.

However, it doesn't update anything...

Here's the chart:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([

<?php include("chartdata.php");?>
]);

var options = {
    animation: {duration: 1000, easing: 'out', "startup": true},
    vAxis: {minValue: 0},
    pointSize: 4,
    pointShape: 'circle'
};

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);

// FILTER CHART

$("#chart-selector option").click(function() {
    var selectname = $(this).val();
    $.ajax({
        url:"include/chartdata-filter.php",
        method:"POST",
        data:{select_name:selectname},
        dataType:"text",
        success:function(chart)
        {
            alert(chart); // WORKS
            chart.draw(google.visualization.arrayToDataTable([chart]), options); // DOESN'T WORK
        }
    });
});}

This is the select field. So when I select one it should update the chart:

<select id="chart-selector" name="select_name" onchange="chartSelect()">
<option>List Item 1</option>
<option>List Item 2</option>
</select>

When I select one of the options I get the output correctly in the alert. The output in the alert looks something like this (from chart.php):

['Date', 'Column 1', 'Column 2'],
['2016-10-01', 0, 0],
['2016-10-02', 1, 2],
['2016-10-03', 3, 4],
['2016-10-04', 5, 6],
['2016-10-05', 7, 8],
['2016-10-06', 9, 10]

Also, when I manually paste this data into the AJAX success function it works as well:

chart.draw(google.visualization.arrayToDataTable([
    ['Date', 'Column 1', 'Column 2'],
    ['2016-10-01', 0, 0],
    ['2016-10-02', 1, 2],
    ['2016-10-03', 3, 4],
    ['2016-10-04', 5, 6],
    ['2016-10-05', 7, 8],
    ['2016-10-06', 9, 10]]), options); // THIS WORKS

But obviously pasting it manually doesn't make any sense since I want to update the data onchange.

So to recap:

1. I have select options.

2. When I select one of the options the data should be pulled from the databse (WORKS).

3. The data is pulled correctly in the alert, but it isn't updated in the chart. When I paste in the code manually it works onchange. So the problem is probably somewhere in here:

   chart.draw(google.visualization.arrayToDataTable([chart]), options);

Any suggestions?

Thanks in advance for anyone who has an idea!

Answer 1

I'm guessing it's because you're using dataType: 'text' so your chart variable is a string rather than an array (i.e. "[1, 2, 3]" instead of [1, 2, 3]). It's showing up correctly in the alert because the alert is displaying the contents of the string. You need to deserialize the array first. Try this:

var arr = JSON.parse("[" + ajaxResponse.replace(/'/g, '"').replace(/,$/g, '') + "]");
chart.draw(google.visualization.arrayToDataTable(arr), options);

Edit: Runcorn's answer includes an important detail I forgot to include. If the text returned from your ajax call doesn't have single quotes escaped with a \ or replaced with double quotes, it will fail.

Edit 2: Updated to include the relevant snippet for the working code. Here's a fiddle with it working correctly.