Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<script src="http://www.polymer-project.org/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<polymer-element name="chart-element" attributes="type options data color width height">
  <template>
    <canvas id="canvas" width="{{width || 200}}" height="{{height || 200}}"></canvas>
  </template>
  <script>
    Polymer("chart-element", {
      get values(){ 
        return this.data.map(function(data, i){
          return { value : parseFloat(data), color : this.color[i]};
        }, this);
      },
      created : function(){
        this.options = {};{}
      },
      ready: function () {
        this.chart = new Chart(this.$.canvas.getContext('2d'));
        this.type = this.type || 'Pie';
        this.options = this.options || {};
      },
      dataChanged : function () {
        this.chart[this.type](this.values, this.options );
        this.options.animation = false;
      }
      
    });
  </script>
</polymer-element>
<polymer-element name="x-app">
  <template>
    <style>
      ul{
        list-style:none;
        padding:0;
      }
      .indicator{
        display:inline-block;
        border:1em solid;
        border-radius:50%;
      }
      h1:after,h2:after{
        content:':';
      }
    </style>
    <content select="h1"></content>
    <ul>
      <template repeat="{{ i in data | toIndex }}">
        <li>
          <div class="indicator" style="color: {{color[i]}};"></div> 
          <input value="{{data[i]}}" type="range" min="0" max="150" />
          <span>{{data[i]}}</span>
        </li>
      </template>
    </ul>
    <content select="h2"></content>
    <chart-element data="{{data}}" color="{{color}}"></chart-element>
    <chart-element type="Doughnut" data="{{data}}" color="{{color}}"></chart-element>
    <chart-element type="PolarArea" data="{{data}}" color="{{color}}" options="{'scaleOverride' : true, 'scaleSteps' : 5, 'scaleStepWidth' : 30}"></chart-element>
  </template>
  <script>
    Polymer('x-app', {
      ready : function (){
        this.data = [50,30,90,150];
        this.color = ["blue", "green", "yellow", "red"];
      }
    });
    PolymerExpressions.prototype.toIndex = {
      toDOM : function(value){
        if ( value === undefined || value === null ) return;
        return value.map(function(v, i){ return i; });
      }
    }
  </script>
</polymer-element>
<polymer-letters></polymer-letters> 
<h1>Polymer chart-element using chart.js</h1>
<x-app>
  <h1>Controlls</h1>
  <h2>Preview</h2>
</x-app>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kizzlebotpro
0viewers