CODEWITHSUNDEEP
javascriptpolymer
umop aplsdn
umop aplsdn

Reputation: 290

Polymer ready vs attached callbacks with Chart.js

I'm working on a Polymer app with Chart JS. Currently I have a custom element for my chart. I used a test dataset to test the element. When I initialize the canvas element for Chart.js inside the ready callback (which is the callback Polymer recommends you to use when the element is "ready" and you need to manipulate the DOM), nothing shows up. However, when I add it to the attached callback, the chart properly initializes. Why doesn't it properly initialize in the ready callback?

cnsmpo-graph.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<script src="../../bower_components/Chart.js/Chart.js"></script>
<script src="../../bower_components/Chart.Scatter.js/Chart.Scatter.js"></script>

<dom-module id="cnsmpo-graph">
  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <paper-material>
      <canvas id="chart" width="400" height="400"></canvas>
    </paper-material>
  </template>

</dom-module>

<script>
(function() {
  Polymer({
    is: 'cnsmpo-graph',

    properties: {
      foo: {
        type: String,
        value: 'bar',
        notify: true
      }
    },

    attached: function () {
      var data = {
        labels: [1, 5, 10, 20, 30, 100, 250],
        datasets: [
          {
            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: [
              { x: 3, y: 10}
            ]
          }
        ]
      };
      var element = this.$.chart.getContext('2d');
      var chart = new Chart(element).Scatter(data, {bezierCurve: false,});
    }
  });
})();
</script>

index.html 

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Polymer Starter Kit" />
  <title>Polymer Starter Kit</title>
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- Chrome for Android theme color -->
  <meta name="theme-color" content="#303F9F">

  <!-- Web Application Manifest -->
  <link rel="manifest" href="manifest.json">

  <!-- Tile color for Win8 -->
  <meta name="msapplication-TileColor" content="#3372DF">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="Polymer Starter Kit">
  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

  <!-- Tile icon for Win8 (144x144) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <!-- endbuild -->

  <link rel="import" href="../styles/app-theme.html">
  <link rel="import" href="cnsmpo-graph/cnsmpo-graph.html">

  <style>
  </style>
</head>

<body unresolved class="fullbleed layout vertical">
  <span id="browser-sync-binding"></span>
  <template is="dom-bind" id="app">
    <cnsmpo-graph></cnsmpo-graph>
  </template>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

</html>

Much of the code in the head of index.html is from the Polymer Starter Kit.

Upvotes: 0

Views: 1180

Answers (1)

Maria
Maria

Reputation: 5604

I noticed that Chart.js computes the size (width and height) of the context element that is passed to it upon initalisation. In the case of the ready callback, the element exists, but has not been added to the document yet. However, the computation done in Chart.js assumes that the element is already in the document. It uses document.defaultView.getComputedStyle(element).getPropertyValue(dimension). Hence, it fails. When you use the attached callback the element has been added to the document and the computation is successful.

Upvotes: 2

Related Questions