amcharts нужно разобрать значения из ответа ajax

Question

Я пытаюсь создать amcharts гистограммы. У меня есть следующий JSON, который получает от JSON:

[
        { "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"},
        { "option": "Ireland", "percentage": 131.10,"color":"#ff9900"},
        { "option": "Germany", "percentage": 115.80,"color":"#448800"},
        { "option": "Australia", "percentage": 109.90,"color":"#2175d9"},
        { "option": "Austria", "percentage": 108.30,"color":"#2175d9"},
        { "option": "UK", "percentage": 99.00,"color":"#2175d9"}
    ]

Я называю Аякс следующим образом:

$("#viewResult").click(function(){

       $("#chart").show();

       var qstnId = $("div[name='pollqstn']").attr("id");
       //Ajax to load all poll results
       $.post("fetchpollresult.php", {qstnid: qstnId}, function (data) {
           drawStuff(data);
       });


   });

Моя страница fetchpollresult.php выглядит так:

$questionid = $_REQUEST['qstnid'];

 $arranstext = array();
 $arranscount = array();

 $arranscolours = array("#2175d9","#448800","#448800","#ff9900");


//find qstn text
$pollqstndetails = $DB->get_records('epoll_questions', array('id' => $questionid));


$optiondetails = $DB->get_records('epoll_answers', array('questionid' => $questionid));

foreach($optiondetails as $optval){

 $optionresponseCount = $DB->get_records('epoll_responses', array('answerid' => $optval->id,'questionid'=>$questionid));   

 $countOptresponse =  count($optionresponseCount);


 array_push($arranstext ,$optval->answertext);
 array_push($arranscount ,count($optionresponseCount));

}


 $data =array();

for($i=0;$i<count($arranstext);$i++){

$data[]  = array('option' =>$arranstext[$i],'percentage'=>$arranscount[$i],'color'=>$arranscolours[$i]) ;
}

$optionnoresponseCount = $DB->get_records('epoll_responses', array('answerid' => 0,'questionid'=>$questionid));   

$data[]  = array('option' =>"NA",'percentage'=>count($optionnoresponseCount),'color'=>"#ff9900") ;


echo json_encode($data);

Я получаю ответ как:

        [
            { "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"},
            { "option": "Ireland", "percentage": 131.10,"color":"#ff9900"},
            { "option": "Germany", "percentage": 115.80,"color":"#448800"},
            { "option": "Australia", "percentage": 109.90,"color":"#2175d9"},
            { "option": "Austria", "percentage": 108.30,"color":"#2175d9"},
            { "option": "UK", "percentage": 99.00,"color":"#2175d9"}
        ]


Than I have a function calling in ajax response:

   function drawStuff(val){ 


    // RADAR CHART
    chart = new AmCharts.AmSerialChart();
chartData =val; //assigning ajax response
    chart.dataProvider = chartData;
    chart.categoryField = "option";
    chart.startDuration = 3;
    chart.sequencedAnimation = false;

    // VALUE AXIS
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.axisAlpha = 0.15;
    valueAxis.minimum = 0;
    valueAxis.dashLength = 3;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.type = "column";
    graph.colorField = "color"
    graph.valueField = "percentage";
    graph.fillAlphas = 0.6;
    graph.balloonText = "[[value]] litres of beer per year";
    chart.addGraph(graph);

    // WRITE
    chart.write("chart");
}        

Но в этом случае это не работает. Когда я жестко кодирую его на той же странице, он работает нормально.

Что я понимаю, это:

var chartData = 
        [
            { "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"},
            { "option": "Ireland", "percentage": 131.10,"color":"#ff9900"},
            { "option": "Germany", "percentage": 115.80,"color":"#448800"},
            { "option": "Australia", "percentage": 109.90,"color":"#2175d9"},
            { "option": "Austria", "percentage": 108.30,"color":"#2175d9"},
            { "option": "UK", "percentage": 99.00,"color":"#2175d9"}
        ]

Мне необходимо parseFloat процентные значения JSON.

Как я могу разобрать только процентную пару, такую ​​как 156.90,131.10.... из этого json и передать как chartData??

Я получаю диаграмму следующим образом:

Answer 1

Есть несколько причин, почему график не отображается.

1) Вы не указываете тип контента для вызова AJAX в jQuery. Таким образом, вы получите простой текстовый ответ, который не преобразуется в массив. Это четвертый параметр в $.post() функция.:

$.post("fetchpollresult.php", {qstnid: qstnId}, function (data) {
           drawStuff(data);
       }, "json");

2) Простая опечатка. У вас есть "варианты" для categoryField в коде диаграммы, а "вариант" (в единственном числе) в данных.

Просто измените categoryField соответственно:

chart.categoryField = "option";

3) Вы присваиваете объект диаграммы в унитарной переменной. Это может запутать некоторые старые браузеры. Просто добавь var перед присвоением инициализировать переменную диаграммы:

var chart = new AmCharts.AmSerialChart();

Вот полный код:

$( "#viewResult" ).click( function() {

  $( "#chart" ).show();

  var qstnId = $( "div[name='pollqstn']" ).attr( "id" );
  //Ajax to load all poll results
  $.post( "fetchpollresult.php", {
    qstnid: qstnId
  }, function( data ) {
    drawStuff( data );
  }, "json" );

} );

function drawStuff( chartData ) {
  var chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  chart.categoryField = "option";
  chart.startDuration = 3;
  chart.sequencedAnimation = false;

  // VALUE AXIS
  var valueAxis = new AmCharts.ValueAxis();
  valueAxis.axisAlpha = 0.15;
  valueAxis.minimum = 0;
  valueAxis.dashLength = 3;
  chart.addValueAxis( valueAxis );

  // GRAPH
  var graph = new AmCharts.AmGraph();
  graph.type = "column";
  graph.colorField = "color"
  graph.valueField = "percentage";
  graph.fillAlphas = 0.6;
  graph.balloonText = "[[value]] litres of beer per year";
  chart.addGraph( graph );

  // WRITE
  chart.write( "chart" );
}