json to javascript - гугл чарты - PullRequest
Новая
       5

json to javascript - гугл чарты

4 голосов
/ 16 июля 2010

В прошлом я использовал следующий метод для надлежащего анализа данных json, чтобы я мог заполнить поле выбора: 

var request = null; 

request = $.ajax({ 
type: "POST", 
url: "url goes here", 
dataType: 'text', 
success: function(returned){ 
    returned = JSON.parse(returned) 

    $.each(returned, function(selectid,item) 
    { 
        var sel = $("#"+selectid).get(0); 
        sel.options.length=0; 

        $.each(item, function(i,subitem){ 
            sel.options[i]=new Option(subitem.text, subitem.value); 
        }); 
    }); 

    request = null; 
    } 
});

Как применить ту же технику к приведенному ниже коду, но безустановите флажок, просто разберите JSON в функцию drawChart? 

$.ajax({ 
url: 'chart_json.aspx', 
type: 'POST', 
dataType: 'text', 
success: function(data) { 
    drawChart(data); 
} 
});

Ответы [ 2 ]

4 голосов
/ 16 июля 2010

Я думаю, что ваша проблема заключается в вашем ответе ajax, я бы сделал следующее:

в вашем ответе: 

{ 
  graphData : [
    ['user1',{v:0.00, f:'0.00'}],
    ['user2',{v:0.00, f:'0.00'}],
    ['user3',{v:0.00, f:'0.00'}],
    ['user4',{v:0.00, f:'0.00'}],
    ['user5',{v:0.00, f:'0.00'}]
  ],
  status : "ok"
}

в вашем JS: 

$.ajax({
  url: 'get_json.aspx',
  type: 'POST',
  dataType: 'json',//this is important
  success: function(data) {
    //this is not vital, but it's nice to check the response
    if(typeof data === "object" && data.status === "ok"){
        graphData = data.graphData;
        drawVisualization(graphData);
    }
  }
});

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

3 голосов
/ 16 июля 2010 
$.ajax({
  url: 'get_json.aspx',
  type: 'POST',
  dataType: 'json', // as noted by Sinan
  success: function(data) {
    drawVisualization(data);
  }
});

function drawVisualization(serverData) {
    var chartData = [];
    for(var i = 0; i < serverData.length; i++) {
      chartData.push([serverData[i][0], serverData[i][1].v]);
    }
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'WIP');
    data.addColumn('number', 'Percentage');
    data.addRows(chartData);
    new google.visualization.PieChart(document.getElementById('visualization')).draw(data, {width: 400, height: 240, is3D:true});     
}

Массив chartData должен иметь 2 столбца (поскольку вы дважды вызываете addColumn для google.visualization.DataTable) со строкой и числом в каждой строке.

Пример здесь

...