Google Visualization style roles in object-literal DataTable

0
votes

I am creating Google Visualizations (currently ColumnCharts) from AJAX data, by returning an object literal suitable for passing to the DataTable constructor according to these docs:

https://developers.google.com/chart/interactive/docs/reference#dataparam

Data is all working, but I can't work out how to get the style roles working. I thought the documentation was saying to create the below, but it doesn't set the colors; what am I doing wrong?

{  
     "cols":[  
            {  
                 "id":"x",
                 "type":"number",
                 "label":"Period"
            },
            {  
                 "id":"quotes",
                 "type":"number",
                 "label":"Quotes"
            },
            {  
                 "id":"quotes_style",
                 "type":"number",
                 "p":{  
                        "role":"style"
                 }
            },
            {  
                 "id":"orders",
                 "type":"number",
                 "label":"Converted to Orders"
            },
            {  
                 "id":"orders_style",
                 "type":"number",
                 "p":{  
                        "role":"style"
                 }
            }
     ],
     "rows":[  
            {  
                 "c":[  
                        {  
                             "v":0,
                             "f":"2/2015"
                        },
                        {  
                             "v":4
                        },
                        {  
                             "p":{  
                                    "style":"color:#dddddd"
                             }
                        },
                        {  
                             "v":3
                        },
                        {  
                             "p":{  
                                    "style":"color:#00d67c"
                             }
                        }
                 ],
                 "p":null
            }
     ],
     "p":null
}
1
javascriptgoogle-visualization

1 Answers

1
votes

Okay, fixed it; first of all in cols the type of the column should be string; then in the rows, the style columns should just have v set to the style string, not p.

(Found this by calling google.visualization.arrayToDataTable() on a working array in the help documentation and calling .toJSON() on the result - very handy!)

Final JSON:

{  
    "cols":[  
         {  
                "id":"x",
                "type":"number",
                "label":"Period"
         },
         {  
                "id":"quotes",
                "type":"number",
                "label":"Quotes"
         },
         {  
                "id":"quotes_style",
                "type":"string",
                "p":{  
                     "role":"style"
                }
         },
         {  
                "id":"orders",
                "type":"number",
                "label":"Converted to Orders"
         },
         {  
                "id":"orders_style",
                "type":"string",
                "p":{  
                     "role":"style"
                }
         }
    ],
    "rows":[  
         {  
                "c":[  
                     {  
                            "v":0,
                            "f":"2/2015"
                     },
                     {  
                            "v":4
                     },
                     {  
                            "v":"color:#dddddd"
                     },
                     {  
                            "v":3
                     },
                     {  
                            "v":"color:#00d67c"
                     }
                ],
                "p":null
         }
    ],
    "p":null
}