The Scenario:
I'm currently using Polymer's "firebase-collection" element to bind data to a google chart. The user can select what items they want shown in the google chart, and upon clicking a button, the data will be updated by firebase with what was selected by the user, and built into a google chart.
The Problem:
The problem that I am having is that my "buildChartData" method is called before firebase updates my data property. I would like to have it called after the data comes back from firebase, but the only thing that I can find are "on-change" events. As such, my "buildChartData" method is being called every time the data updates, which could be well over a hundred times for a single chart.
The Code:
<dom-module id="chart-example">
<template>
<style>
...
</style>
<firebase-collection id="fbColl"
location="{{ref}}"
data="{{dataPoints}}"
on-data-change="buildChartData" <!-- This is calling every time data updates-->
></firebase-collection>
<template is="dom-repeat" items="{{dataPoints}}">
<p>{{item.STABBR}}</p>
</template>
<google-chart id="exampleChart"
type="{{chartType}}"
options="{}"
data="{{chartData}}" >
</google-chart>
<paper-button raised on-tap="buildChart">
Build Chart
<iron-icon icon="arrow-forward">
</iron-icon>
</paper-button>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'chart-example',
properties: {
baseRef: {
type: String,
value: '',
notify: true
},
ref: {
type: String,
value: '',
notify: true
},
chartType: {
type: String,
Value: 'pie', // for testing purposes
notify: true
},
chartData: {
type: Object,
notify: true
},
firebaseNode: {
type: String,
value: 'rates',
notify: true
}
},
buildRef: function(baseRef) {
return baseRef + this.firebaseNode
},
buildChartData: function(e) {
console.log(e)
console.log(this.dataPoints)
},
buildChart: function() {
this.ref = this.buildRef(this.baseRef)
console.log(this.dataPoints)
},
});
})();
</script>
</dom-module>
