Google Charts, AJAX, и используя стиль/цвета

Question

я следовал различным примерам ...
Change Google Chart bar colors when data table input is from JSON data from server
... и я уверен, у меня есть свои данные в правильном формате. Он загружается с помощью AJAX, код ниже.

AJAX PHP

$rets = ret_priced_product(); 

$i=1; 

$cols = array(); 
$rows = array(); 

$col{$i}=array(); 
$col{$i}["label"]="Retailer"; 
$col{$i}["type"]="string"; 
$cols[] = $col{$i++}; 

$col{$i}=array(); 
$col{$i}["label"]="Cheapest"; 
$col{$i}["type"]="number"; 
$cols[] = $col{$i++}; 

$col{$i}=array(); 
$col{$i}["type"] = "string"; 
$col{$i}["p"] = array("role" => "style"); 
$cols[] = $col{$i++}; 

$k = 0; 
foreach($rets as $ret) { 
    $rowno = "row" . $k; 
    ${$rowno}["c"] = array(); 
    $cell0["v"]= $ret->ret; //the first cell is always the title 
    ${$rowno}["c"][] = $cell0; 
    $cell1["v"]= $ret->cnt; 
    ${$rowno}["c"][] = $cell1; 
    $cell2["v"]= "color: " . $ret->colour; 
    ${$rowno}["c"][] = $cell2; 
    $rows[] = ${$rowno}; 
} 

$data = array("cols"=>$cols,"rows"=>$rows); 
echo json_encode($data); 

JSON, который создается ниже ...

{ 
    "cols":[ 
     { 
     "id":"", 
     "label":"Retailer", 
     "pattern":"", 
     "type":"string" 
     }, 
     { 
     "id":"", 
     "label":"Cheapest", 
     "pattern":"", 
     "type":"number" 
     }, 
     { 
     "type":"string", 
     "p":{ 
      "role":"style" 
     } 
     } 
    ], 
    "rows":[ 
     { 
     "c":[ 
      { 
       "v":"Ret1" 
      }, 
      { 
       "v":"6" 
      }, 
      { 
       "v":"color: #FF9900" 
      } 
     ] 
     }, 
     { 
     "c":[ 
      { 
       "v":"Ret2" 
      }, 
      { 
       "v":"34" 
      }, 
      { 
       "v":"color: #F03A40" 
      } 
     ] 
     }, 
     { 
     "c":[ 
      { 
       "v":"Ret3" 
      }, 
      { 
       "v":"60" 
      }, 
      { 
       "v":"color: #0043F0" 
      } 
     ] 
     } 
    ] 
} 

Javascript

function drawChart2() { 
    $.ajax({ 
     url: '../ajax/gc_position_ret_min.php', 
     beforeSend: function(){ 
      $("#chart2").html('<img src="/img/loading.gif">'); 
     }, 
     type: 'post', 
     data: { 
      cat: cat, 
     }, 
     dataType: 'json' 
    }).done(function(data){ 
     console.log(data); 
     jsonData = data; 

     var data = new google.visualization.DataTable(jsonData); 
     var options = { 
      title: "Retailer with the lowest priced product", 
     }; 

     var chart = new google.charts.Bar(document.getElementById('chart2')); 
     chart.draw(data, options); 

    }).fail(function(){ 
     // 
    });//AJAX 
} 

Итак, независимо от того, что происходит, данные появляются правильно, но стиль игнорируется. Если я жестко программирую стиль в PHP, это не имеет никакого эффекта.

Итак, мой вопрос: как мне получить разные цвета бара, когда я получаю данные из источника через AJAX, какая часть не работает?

Answer 1

Итак, после того, как я разорвал свои волосы, я подумал, возможно, я должен использовать visualization, а не новый, который Google рекомендует. Поэтому я изменил var chart = new google.charts.Bar(document.getElementById('chart2')); на var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));, и он сработал.
Надеюсь, это поможет кому-то другому.