title: Google Charts API DataTable Cell Color
body: <p>I'm trying to use the <a href="http://code.google.com/apis/chart/" rel="nofollow">Google Charts API</a> to display a <a href="http://code.google.com/apis/chart/interactive/docs/reference.html#DataTable" rel="nofollow"><code>DataTable</code></a> which has some of its cells coloured depending on their value. The table generates fine, but none of my style properties are applied to the cells. According to the documentation I should be able to set a cell value using the <a href="http://code.google.com/apis/chart/interactive/docs/reference.html#dataparam" rel="nofollow"><code>p</code></a> value:</p>
  
  <blockquote>
    <p>p [Optional] An object that is a map of custom values applied to the cell. These values can be of any JavaScript type. If your visualisation supports any cell-level properties, it will describe them; otherwise, this property will be ignored. Example: p:{style: 'border: 1px solid green;'}.</p>
  </blockquote>
  
  <p>I'm passing a Perl generated JSON object to the <code>DataTable</code> constructor. The JSON object looks like this:</p>
  
  <pre><code>{"cols":[{"pattern":"","type":"string","label":"alias","id":""},
          {"pattern":"","type":"string","label":"state","id":""},
          {"pattern":"","type":"string","label":"server_name","id":""},
          {"pattern":"","type":"number","label":"connections","id":""},
          {"pattern":"","type":"number","label":"sessions","id":""},
          {"pattern":"","type":"number","label":"queues","id":""},
          {"pattern":"","type":"number","label":"topics","id":""},
          {"pattern":"","type":"number","label":"durables","id":""},
          {"pattern":"","type":"number","label":"pending_message","id":""}
      ],
  "rows":[
          {"c":[{"v":"live1"},
          {"p":{"style":"border: 1px solid green;"},"v":"Active"},
          {"v":"serice1"},{"v":"580"},{"v":"1177"},{"v":"632"},{"v":"200"},{"v":"68"},{"v":"69"}
      ]},
      {"c":[
          {"v":"live2"},
          {"p":{"style":"border: 1px solid green;"},"v":"Active"},
          {"v":"service2"},{"v":"68"},{"v":"1481"},{"v":"164"},{"v":"48"},{"v":"4"},{"v":"2592"}
      ]},
      {"c":[
          {"v":"uat1"},
          {"p":{"style":"border: 1px solid green;"},
          "v":"Active"},{"v":"service3"},{"v":"299"},{"v":"1072"},{"v":"305"},{"v":"111"},{"v":"39"},{"v":"17"}]},
      {"c":[
          {"v":"uat2"},
          {"p":{"style":"border: 1px solid green;"},
          "v":"Active"},{"v":"service4"},{"v":"115"},{"v":"1755"},{"v":"302"},{"v":"79"},{"v":"9"},{"v":"1"}]
      }],
  "p":null}
  </code></pre>
  
  <p>Can any one see what I'm doing wrong, or have an example JSON object structure of a <code>DataTable</code> with style applied to cells or rows?</p>