How to append data to a polymer google-chart?

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);

score 1 · Answer 1 · edited May 23 '17 at 11:58

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

edited May 23 '17 at 11:58

Community

1
1

answered Jun 07 '16 at 13:34

Ümit

17,379
7
55
74

I've tried both, unsuccessfully :-( I've updated the question. – yglodt Jun 07 '16 at 14:43
Ok I will try to debug it locally – Ümit Jun 07 '16 at 14:56
I tried replacing rows, without success... see my updated answer (in 1 minute) – yglodt Jun 07 '16 at 15:11

score 0 · Accepted Answer · answered Jun 07 '16 at 15:22

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);

How to append data to a polymer google-chart?

2 Answers2