Question

I’m trying to use the Google Charts API to display a DataTable 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 p value:

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;’}.

I’m passing a Perl generated JSON object to the DataTable constructor. The JSON object looks like this:

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

Can any one see what I’m doing wrong, or have an example JSON object structure of a DataTable with style applied to cells or rows?

Answer 1

Ok looks like I missed something:

in the dataTable options you have to set ‘allowHtml: true’
Then all formatting properties will be accepted, hope this saves someone a bit of digging around, although it is fairly obvious :-s