title: Google Charts, AJAX, and using style / color
body: <p>I have followed various examples...<br>
  <a href="https://stackoverflow.com/questions/21118595/change-google-chart-bar-colors-when-data-table-input-is-from-json-data-from-serv">Change Google Chart bar colors when data table input is from JSON data from server</a><br>
  ...and I'm positive I have my data in the correct format. It is being loaded with AJAX, the code is below.<br><br></p>
  
  <p><b>AJAX PHP</b></p>
  
  <pre><code>$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" =&gt; "style");
  $cols[] = $col{$i++};
  
  $k = 0;
  foreach($rets as $ret) {
      $rowno = "row" . $k;
      ${$rowno}["c"] = array();
      $cell0["v"]= $ret-&gt;ret; //the first cell is always the title
      ${$rowno}["c"][] = $cell0;
      $cell1["v"]= $ret-&gt;cnt;
      ${$rowno}["c"][] = $cell1;
      $cell2["v"]= "color: " . $ret-&gt;colour;
      ${$rowno}["c"][] = $cell2;
      $rows[] = ${$rowno};
  }
  
  $data = array("cols"=&gt;$cols,"rows"=&gt;$rows);
  echo json_encode($data);
  </code></pre>
  
  <p>The JSON that is created is below...</p>
  
  <pre><code>{  
     "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"
              }
           ]
        }
     ]
  }
  </code></pre>
  
  <p><b>Javascript</b></p>
  
  <pre><code>function drawChart2() {
      $.ajax({
          url: '../ajax/gc_position_ret_min.php',
          beforeSend: function(){
              $("#chart2").html('&lt;img src="/img/loading.gif"&gt;');
          },
          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
  }
  </code></pre>
  
  <p>So, no matter what happens, the data comes up correctly, but the style is ignored. If I hardcode a style in the PHP, it has no effect.<br><br>
  So my question is... how do I get different bar colours when I get the data from a source through AJAX, which part is not working?</p>