I am new to Google Charts and am trying to incorporate a Line Graph with visible data points into a web page. I started of building a static Line Graph to understand what can be done with Google Charts. Having done that, I worked out how to change the colour of the data points in the graph.
The next step is to make the data values programmable, which I have done o a limited extent using a JSon Data Table (courtesy of the Internet), but I cannot identify the data table element that affects the colour and size of the data points.
The start point for my graph is:
function drawChart() {
var data = google.visualization.arrayToDataTable
([['Round', 'Position',{'type': 'string', 'role': 'style'}],
['Round 1', 3, 'point { size: 7; shape-type: round; fill-color: red; }' ],
['Round 2', 2, 'point { size: 7; shape-type: round; fill-color: green; }'],
['Round 3', 3, 'point { size: 7; shape-type: round; fill-color: red; }'],
['Round 4', 4, 'point { size: 7; shape-type: round; fill-color: grey; }'],
['Round 5', 3, 'point { size: 7; shape-type: round; fill-color: green; }']
]);
The sort of equivalent Json Data table
{
"cols": [
{"id":"","label":"Round","pattern":"","type":"string"},
{"id":"","label":"Position","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Round 1","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Round 2","f":null},{"v":2,"f":null}]},
{"c":[{"v":"Round 3","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Round 4","f":null},{"v":4,"f":null}]},
{"c":[{"v":"Round 5","f":null},{"v":1,"f":null}]}
]
}
Plus miscellaneous bits around the outside to set the size etc. I cannot find or perhaps understand what needs to be added or changed to change the colour and size and shape of the data points. Any pointers in the right direction would be appreciated.