I am trying to use a dom repeat template with a custom element wrapping highcharts (https://github.com/avdaredevil/highcharts-chart). It is mostly working except when the data gets changed the charts do not reflect it.
The dom-repeat template:
<template id="scenarioCharts" is="dom-repeat" items="{{chartOptions}}" as="chartOption">
<highcharts-chart highchart-options="{{chartOption}}" />
</template>
The Polymer code to build chartOptions
(which is a property with notify true):
observers: [
'buildChartOptions(scenarios)',
],
buildChartOptions(scenarios) {
var i = 0;
this.set('chartOptions', []);
for (i = 0; i < scenarios.length; i += 1) {
this.push('chartOptions', buildCustomChartOptions(scenarios[i]));
}
},
If I remove the line this.set('chartOptions', []);
the dom-repeat keeps the old ones and adds the new charts. I have also tried a lot of different things with splices
and notifySplices
but have had no luck producing the desired result which is the old charts being replaced by the new ones.
Thanks
I would refer to the same bug mentioned by tony19.
Your code seems to be a good workaround, though I'd probably create a local array, populate it and set it again, like this:
buildChartOptions(scenarios) {
var newArray = [];
for (var i = 0; i < scenarios.length; i += 1) {
newArray.push(buildCustomChartOptions(scenarios[i]));
}
this.set('chartOptions', newArray);
}
Another alternative would be to push your changes to the array and then force the dom-repeat to render, by doing a this.$.scenarioCharts.render();
. You'd need to try it though, I'm not sure it would work:
buildChartOptions(scenarios) {
for (var i = 0; i < scenarios.length; i += 1) {
this.push('chartOptions',buildCustomChartOptions(scenarios[i]));
}
this.$.scenarioCharts.render();
}
Additionally, even though it does not concern your question, I would recomend declaring a function in polymer like this:
buildChartOptions: function(scenarios) { }
instead of
buildChartOptions(scenarions) { }
I sometimes forget and do the same you did, and the result is compatibility issues with Internet Explorer or Firefox... However if you do as suggested, everything will work fine.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With