CODEWITHSUNDEEP
javascriptjqueryjsongoogle-visualization
mahsa.teimourikia
mahsa.teimourikia

Reputation: 1774

Update Google Charts

I am developing an application, I have some data in CSV format and I want to show them in a line chart using Google Visualization API, I send my data with JSON to my view and show it to the chart:

<script type="text/javascript">
results = [];

google.load("jquery", "1.3.2");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){
    $.getJSON("http://localhost:8081/petclinic/users/7/campaigns/2/queries/4/analyze", function(data){
        for (var i = 1; i < data.length; i++) {
                data[i][1] =parseInt(data[i][1]);
        }

        var data = google.visualization.arrayToDataTable(data);
        var options = {
          title: 'Data Analysis'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
});
</script>

This works correctly, now I want to add other data to this chart, for example, if I click on a button the data should be updated with new info and another line chart should be drawn to be able to compare them.

Here is an example: for example in the beginning this is my data which is shown:

            var data = google.visualization.arrayToDataTable([
                                                           ['Date', 'Obama'],
                                                           ['07/05/2004',  1000],
                                                           ['08/05/2004',  1170],
                                                           ['09/05/2004',  660],
                                                           ['10/05/2004',  1030],
                                                           ['11/05/2004',  1030],
                                                           ['12/05/2004',  1030],
                                                           ['13/05/2004',  1030],
                                                         ]);

Then I want to add other data to this chart like this:

            var data = google.visualization.arrayToDataTable([
                                                           ['Date', 'Obama', 'Romney'],
                                                           ['07/05/2004',  1000,      400],
                                                           ['08/05/2004',  1170,      460],
                                                           ['09/05/2004',  660,       1120],
                                                           ['10/05/2004',  1030,      540],
                                                           ['11/05/2004',  1030,      540],
                                                           ['12/05/2004',  1030,      540],
                                                           ['13/05/2004',  1030,      540],
                                                         ]);

Upvotes: 0

Views: 1879

Answers (1)

Jeremy Faller
Jeremy Faller

Reputation: 1394

There are a couple of ways you can go about doing this:

  1. If you know all the data during the initial transaction where you send the CSV data, you can populate all the data in the DataTable, and use a DataView to only view some of the columns. When you want to display the additional columns, the easiest thing to do is to create a new DataView, and redraw the chart.
  2. If you don't know the data, and need to do a second call to the server to get the new data, once the data is returned, you can add the new data to the DataTable with the addColumn function, and then use setCell for every item. Then just call draw on the chart again. (I've filed a feature request to have addColumn accept an array to make this easier.)

Incidentally, I've also filed a feature request to accept CSV files directly in DataTable. Obviously, I make no promises when/if any of these feature requests will get done.

Upvotes: 1

Related Questions