trading-peter / chart-elements

Chart.js as Polymer Elements
https://robdodson.github.io/chart-elements
267 stars 70 forks source link

How to use elements inside of a Polymer element? #26

Closed alexpaluzzi closed 8 years ago

alexpaluzzi commented 8 years ago

I see the demo is just showing the auto-binded template, which is great. But I'm trying to use chart-line inside of another custom element.

...
<chart-line id="chart" class="rectangular-chart" data="{{data}}"></chart-line>
...
(function() {
    'use strict';

    Polymer({
      is: 'my-element',

      properties: {
        data: {
          type: Object,
          notify: true,
          value: function() {
            return {};
          }
        }
      },

      _go: function() {
        this.data = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
            label: 'My First dataset',
            fillColor: 'rgba(220,220,220,0.2)',
            strokeColor: 'rgba(220,220,220,1)',
            pointColor: 'rgba(220,220,220,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(220,220,220,1)',
            data: [65, 59, 80, 81, 56, 55, 40]
          }, {
            label: 'My Second dataset',
            fillColor: 'rgba(151,187,205,0.2)',
            strokeColor: 'rgba(151,187,205,1)',
            pointColor: 'rgba(151,187,205,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(151,187,205,1)',
            data: [28, 48, 40, 19, 86, 27, 90]
          }]
        };
      }
    });
  })();

I couldn't populate the initial data (even in the created or attached callbacks), so I had to create a method to call manually with a button press. This does spawn the grid, but I'm getting an error on page load:

Uncaught TypeError: Cannot read property 'draw' of undefined : Chart.js:2781
  Chart.Type.extend.draw @ Chart.js:2781
  helpers.animationLoop.animationFrame @ Chart.js:697

Am I doing something stupid?

robdodson commented 8 years ago

This works for me: https://gist.github.com/06ceba6c97c2c43e34bd

Are you sure you're on the latest version?

robdodson commented 8 years ago

Follow up question: Are you using the element with iron-pages?

alexpaluzzi commented 8 years ago

Hey Rob.

I'll be able to check shortly and confirm, but I believe so. This little project was based on PSK so I'm 99% I was using iron-pages.

As far as version.. Was using whatever latest with bower was giving me at the time. I'll double check that as well.

robdodson commented 8 years ago

Fixed by 0e8722766a84e3e871af89f8acd73ce623b513a2