How to append data to a polymer google-chart? - google-visualization

Question

Take a look at this google-chart:
<google-chart id='c1' type='line' options='{"title": "Example"}'></google-chart>
To fill it with data I can do:
document.getElementById("c1").data = [["Date", "Value"], ["01.01.2016", 100]];
However, I am not able to append data, this does not work:
document.getElementById("c1").data.push(["02.01.2016", 200]);
How can I push/splice data to/from it?
I want to push a value by WebSocket regularly and remove the oldest one in the same time.
Update 1
I have tried replacing the data with rows and cols.
rows is a plain array, you can just push data to it, which works, partly.
In fact, before the chart is drawn, you can use document.getElementById("xy").rows.push(); and it works (That is, once the chart is drawn, it includes the pushed rows.
But, after the chart has been drawn, push does not work anymore. The update to rows is silently swallowed and results in no update of the chart.
Note that calling document.getElementById("c1").drawChart(); also does not update the chart's view.
Update 2
As suggested by #Ümit I have tried the following two, unfortunately both without success:
var chart = document.getElementById("c1");
chart.data = [["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540]];
window.setTimeout(function() {
chart.push('data',["2008", 200, 999]);
chart.drawChart();
console.log("Pushed");
}, 1000);
var chart = document.getElementById("c1");
chart.cols = [{label: "Category", type: "string"}, {label: "Value", type: "number"}];
chart.rows = [["Category 1", Math.random() * 2], ["Category 2", Math.random() * 2]];
window.setTimeout(function() {
chart.push('rows', ["Category 3", Math.random() * 2]);
chart.drawChart();
console.log("Pushed");
}, 1000);
Update 3
Third try, replacing the complete rows, without success:
var chart = document.getElementById("c1");
chart.cols = [{label: "Category", type: "string"}, {label: "Value", type: "number"}];
chart.rows = [["Category 1", Math.random() * 2], ["Category 2", Math.random() * 2]];
window.setTimeout(function() {
var temp = chart.rows;
//console.log(temp);
temp.push(["Category 3", Math.random() * 2]);
//console.log(temp);
chart.push('rows', temp); // does not work
chart.rows = temp; // does also not work
chart.drawChart();
console.log("Pushed");
}, 1000);

Answer 1

Because you are dealing with Arrays and Objects respectively you need to use the array/object mutation functions of Polymer to ensure that the observer in google-chart is called and the chart gets updated.
So in your code you should do this:
document.getElementById("c1").push('data',["02.01.2016", 200]);
or
document.getElementById("xy").push('row',["02.01.2016", 200]);
Update:
The problem is that google-chart relies on normal property observers for data, rows and cols which will only work if you replace the entire array/object (see this SO answer).
So either you can create an issue in the google-chart repo or re-create data/rows

Answer 2

This is the working solution:
var chart = document.getElementById("c1");
chart.data = [["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540]];
window.setTimeout(function() {
var temp = [["Year", "Things", "Stuff"], ["2004", 1000, 400], ["2005", 1170, 460], ["2006", 660, 1120], ["2007", 1030, 540], ["2008", 200, 999]];
//chart.push("data", temp); // does not work
chart.data = temp; // works
//chart.drawChart(); // is not necessary
console.log("Pushed");
}, 1000);