Загрузка данных Google с использованием ajax / json - PullRequest
Новая
       21

Загрузка данных Google с использованием ajax / json

0 голосов
/ 21 мая 2010

Я не могу понять, как загрузить данные, используя ajax / json. Вот мой код JSON в удаленном файле (pie.json) 

{ 
   cols: [{id: 'task',  label: 'Task',          type: 'string'}, 
          {id: 'hours', label: 'Hours per Day', type: 'number'}], 
   rows: [{c:[{v: 'Work'},     {v: 11}]}, 
          {c:[{v: 'Eat'},      {v: 2}]}, 
          {c:[{v: 'Commute'},  {v: 2}]}, 
          {c:[{v: 'Watch TV'}, {v:2}]}, 
          {c:[{v: 'Sleep'},    {v:7, f:'7.000'}]} 
         ] 
  }

Это то, что я пробовал до сих пор, но это не работает. 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 

<script type="text/javascript"> 
google.load("visualization", "1", {packages:["piechart"]}); 

function ajaxjson() { 
   jsonreq=GetXmlHttpObject(); 
   jsonreq.open("GET", "pie.json", true); 
   jsonreq.onreadystatechange = jsonHandler; 
   jsonreq.send(null); 
  } 


function jsonHandler() { 
 if (jsonreq.readyState == 4) 
   { 
   var res = jsonreq.responseText; 
   google.setOnLoadCallback(drawChart); 
   function drawChart() { 
   var data = new google.visualization.DataTable(res, 0.6) 
   var chart = new google.visualization.PieChart(document.getElementByI('chart_div')); 
   chart.draw(data, {width: 400, height: 240, is3D: true}); 
   }     // end drawChart 
   } // end if 
} // end jsonHandler 


function GetXmlHttpObject() 
  { 
   var xmlHttp=null; 
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
   return xmlHttp; 
  }

Все работает отлично, если я заменю переменную 'res' реальным кодом в pie.json.

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 07 мая 2013

, если бы я был в вас, я буду использовать jQuery для сохранения кода: 

$.getJSON("pie.json", function(data) { 
  drawWanChart(data);
});

и вот функция, которая рисует ваш график: 

 function drawWanChart(jsonData)
 {
    jsonData = jQuery.parseJSON(jsonData);

    if(jsonData != null)
    {                           
        data = new google.visualization.DataTable(jsonData);
        chart = new Google.visualization.Table(document.getElementById('chart_div'));
        chart.draw(data, null);
    }
 }

Пожалуйста, обратитесь к официальной документации:

0 голосов
/ 21 мая 2010

Просто предположение, потому что я не знаком с google объектами, которые вы используете, но я уверен, что responseText просто возвращает строку. JavaScript не может изначально анализировать JSON (насколько мне известно, только XML), поэтому вам придется eval("var res = " + jsonreq.responseText).

Надеюсь, это поможет.

...