I have a set of Polymer paper-toggle-buttons that make elements in a graph (using c3) appear and disappear. I've had some success picking up the event change with the following code:
HTML:
<div class="graph-sets-element">
<core-label horizontal layout>
<paper-toggle-button checked id="graph1"></paper-toggle-button>
<h4>Graph 1</h4>
</core-label>
</div>
<div class="graph-sets-element">
<core-label horizontal layout>
<paper-toggle-button checked id="graph2"></paper-toggle-button>
<h4>Graph 2</h4>
</core-label>
</div>
Javascript:
[].forEach.call(
document.querySelectorAll('paper-toggle-button'),
function(toggle){
toggle.addEventListener('change',function() {
if(this.checked) {
chart.show('graph1');
}
else {
chart.hide('graph1');
}
});
}
);
The problem with my current approach is that any press of a paper-toggle-button does the same thing (hide/show the plotted graph1 line). Is there a way to grab the id of the paper-toggle-button pressed and pass it into chart.show()
Part of the challenge is that these toggle buttons are dynamically created when the user uploads new data into the graph. This means I don't necessarily know their names until the paper-toggle-button is pressed, and can't hard code each one's id.
Aucun commentaire:
Enregistrer un commentaire