CODEWITHSUNDEEP
phpjsongraphstylesgoogle-visualization
Locksleyu
Locksleyu

Reputation: 5355

Cannot get role: 'style' to work with Column chart when using JSON with Google Charts

By following Google's documentation, I have been able to get a column chart to work fine with static data. However all the columns are the same color and I want to use role: 'style' to set the color as described here:

var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
    ['Copper', 8.94, '#b87333'],            // RGB value
['Silver', 10.49, 'silver'],            // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
  ]);

The problem I am having is that I can't figure out how to get this to work with JSON where the data is dynamic (it is pulled from MySQL using a script).

This is my code that does not display anything:

echo <<< END
{
"cols": [
  {"id":"","label":"Topping","pattern":"","type":"string"},
  {"id":"","label":"Slices","pattern":"","type":"number"},
  {type:'string', role:'style'}
],
"rows": [ 
END;

while($row = mysqli_fetch_array($result))
{

  echo <<< END
  {"c":[{"v":"
  END;
  echo $row['DEVICEID'];
  echo <<< END
    ","f":null},{"v":
  END;
  echo $row['minutecount'];
  echo <<< END
    ,"f":null},{"v":"gold","f":null}]},
  END;
}

These are the two things I have added to try and get it to work:

{type:'string', role:'style'}
...
,{"v":"gold","f":null}

I can't seem to find a JSON example so the above declarations may be incorrect. Right now I have all them hardcoded to 'gold', but once that works I will be changing the colors dynamically.

Without these, the chart displays fine (with dynamic data) but with all the same color.

Upvotes: 2

Views: 3296

Answers (1)

Locksleyu
Locksleyu

Reputation: 5355

I figured out the problem, it was this line:

 {type:'string', role:'style'}

When I changed it to the following, everything worked.

 {"type":"string", "role":"style"}

Upvotes: 3

Related Questions