1

I have followed various examples...
Change Google Chart bar colors when data table input is from JSON data from server
...and I'm positive I have my data in the correct format. It is being loaded with AJAX, the code is below.

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);

The JSON that is created is below...

{  
   "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
}

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.

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?

Community
  • 1
  • 1
themrflibble
  • 303
  • 3
  • 10

1 Answers1

1

So after hours of tearing my hair out, I had a thought, perhaps I should use the visualization rather than the new one that Google are bigging to recommend. So I changed var chart = new google.charts.Bar(document.getElementById('chart2')); to var chart = new google.visualization.ColumnChart(document.getElementById('chart2')); and it worked.
I hope this helps somebody else.

themrflibble
  • 303
  • 3
  • 10