2013-07-19 57 views
0

我正在开发一个应用程序,我有一些CSV格式的数据,我想用谷歌可视化API在折线图中显示它们,我用JSON将我的数据发送到我的视图并显示给图表:更新谷歌图表

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

这正常工作,现在我想将其他数据添加到这张图表,举例来说,如果我点击一个按钮,该数据应与新的信息和另一条线图进行更新应该引起有关方面能够比较它们。

下面是一个例子:比如在一开始,这是我的数据,该数据显示:

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

然后我想其他数据添加到这张图是这样的:

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

回答

1

有有几种方法可以执行此操作:

  1. 如果您知道发送CSV数据的初始事务期间的所有数据,您可以填充DataTable中的所有数据,并使用DataView仅查看某些列。如果要显示其他列,最简单的方法是创建一个新的DataView,然后重新绘制图表。
  2. 如果您不知道数据,需要再次调用服务器以获取新数据,则一旦数据返回,您可以使用addColumn函数将新数据添加到DataTable,然后每个项目使用setCell。然后再次在图表上拨打draw。 (我已经提起的功能要求有addColumn接受阵列,以使它更容易些。)

顺便说一句,我又提出了功能要求接受直接DataTable CSV文件。显然,当/如果这些功能请求中的任何一个都完成时,我不作任何承诺。