2015-10-19 2 views
0

Как загрузить диаграмму с помощью удаленных данных, используя запрос ajax, возвращающий данные в формате JSON?Загрузить таблицу c3 с удаленными данными

Кодирование фрагмент:

var chart = c3.generate({ 
    bindto:"#chartdivObservation", 
    data: { 
     columns: [ 
      ['loading', 30, 20, 50, 40, 60, 50], 
     ] 
    } 
}); 

$(document).on("change","#getObservation",function(){ 
    var team_id=$(this).val(); 
    var user_id=<?=$userId?>; 

    $.ajax({ 
     url:"ajax/user/getDeltaStats.php", 
     type:"POST", 
     data:{ 
      get:"getObservationReport", 
      teamId:team_id, 
      userId:user_id 
     }, 
     success:function(response){ 
      var data = $.trim(response) 
      setTimeout(function(){ 
       chart.unload('loading'); 
       console.log("loading chart...") 
       console.log(data) 
       chart.load({columns: data}) 
      }, 4500) 

      console.log(chart) 

     } 
    }); 
}); 

В первом столбце «загрузки» является фиктивные данные, так что диаграмма оказаны. Позже, используя таймаут, я загружаю его новыми данными (ссылка http://c3js.org/samples/data_load.html). Но диаграмма не обрабатывается новыми данными.

Ответ генерируется запрос Ajax является:

[["Agenda",90,70,70,20,40,70,60,60,58,63],["Precise Praise",53,60,80,68,80,60],["Circulation & Radar",70,100,93,60,100,90,73,90,75,45,60,60,80,73,60]] 

ответ

0

Вот пример, который хорошо работает для моего приложения. Может быть, это помогает.

$(document).on("click", "#btnPDquant", function(event) { 
    $.ajax({ 
    url: "PDQuantCalc", 
    type: "post", 
    data: $('#formPDquant').serialize(), 
    success: function(response){ 
     var newdat = JSON.parse(response); 
     $("#divPDquant").text(newdat.PDquant[1]); 
     chart.x(newdat.year); 
     chart.load({ 
      columns: [ newdat.PDquant ] 
     }); 
    }, 
    error: function (response) { 
     $("#divPDquant").text("error");} 
    }); 
    event.preventDefault(); // Important! Prevents submitting the form. 
}); 
Смежные вопросы