polymer, using attribute data binding in the constructor functions

Question

I'm trying to use a polymer custom element to format and display charts rendered by charts.js - i'm trying to get the custom element <chart-element> to pass it's instanced attribute chartID to the constructor function to properly create the chart - for the life of me i cant get the getContext() method/function to run on anything using the passed attributes

this is the instanced custom element declaration:

<chart-element chartID="figure1"></chart-element>

and here is my custom element:

<polymer-element name="chart-element" attributes="chartID">
  <template>
    <style>...</style>
    <div class="content">
        <canvas id="{{chartID}}" class="pieChart"></canvas>
    </div>
  </template>
  <script>
    Polymer('chart-element', {
        ready: function () {

            var dataFigure1 = [...];

            alert(this.chartID);
            alert(this.$.chartID);
            alert(this.chartID.getContext('2d');

            var canvasElement = this.chartID.getContext("2d");
            alert("canvasElement: "+canvasElement);

            new Chart(canvasElement).Pie(dataFigure1);
        }
   });
  </script>
</polymer-element>

i've tried a million different combinations of the last line to render the chart, but i can't seem to find one that works

alert(this.chartID); resolves fine to "figure1" but new Chart(this.chartID.getContext('2d')).Pie(dataFigure1); throws an "undefined is not a function" error

alert(this.$.chartID); resolves to "undefined"

alert(this.chartID.getContext('2d'); doesn't resolve at all, or isn't alertable, not surprising

new Chart(this.$.figure1.getContext('2d')).Pie(dataFigure1); works fine, but i'm trying to not hard code this line...

Answer 1

alert(this.chartID) displays the content of the chartID property of your element. This property contains the string "figure1", since this is passed in as the attribute chartID="figure1".

this.chartID.getContext('2d') tries to call the function getContext() on this string. Since strings don't contain this function, you get an "undefined is not a function" error.

this.$.chartID is undefined, because the object that is returned by the $ function contains properties which keys are the ids of the elements in the element's template. So you can write this.$.figure1 but not this.$.chartID (this only works if you'd written <canvas id="chartID">)

Long story short, what you could do is writing this.$[this.chartID]. This accesses the element which id is this.chartID which in turn is "figure1".

But the question is: why would you want to do this at all. Since the shadow DOM isolates all the DOM in your element from the outside, it doesn't cause any problems if you simply write <canvas id="chart">. Even if you instantiate many chart-elements, these same ids don't interfere with each other.

Additional note: There is a Chart.js Polymer element in the Polymer-Labs GitHub repository and Rob Dodson has also written some Chart.js Polymer elements.