chart-radar.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="chart-js-import.html">

<!--
A radar chart is a way of showing multiple data points and the variation between them.

They are often useful for comparing the points of two or more different data sets.

##### Example

    <chart-radar></chart-radar>

@element chart-radar
@blurb A radar chart is a way of showing multiple data points and the variation between them.
@status alpha
@homepage http://robdodson.github.io/chart-elements
-->
<polymer-element name="chart-radar" attributes="width height labels values colors">
  <template>
    <canvas id="canvas" width="{{width}}" height="{{height}}"></canvas>
  </template>
  <script>
    Polymer({
      ready: function () {
        this.datasets = [];
        this.values.forEach(function (val, i) {
          this.datasets.push({
            fillColor:    "rgba(" + this.colors[i] + ",0.5)",
            strokeColor:  "rgba(" + this.colors[i] + ",1)",
            pointColor:   "rgba(" + this.colors[i] + ",1)",
            pointStrokeColor: "#fff",
            data: this.values[i]
          });
        }, this);

        this.data = { labels: this.labels, datasets: this.datasets };

        console.log(this.data);

        this.ctx = this.$.canvas.getContext('2d');
        this.chart = new Chart(this.ctx).Radar(this.data);
      },
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
      values: [
        [65,59,90,81,56,55,40],
        [28,48,40,19,96,27,100]
      ],
      colors: [
        "253,180,92",
        "247,70,74",
        "70,191,189",
        "148,159,177",
        "77,83,96"
      ]
    });
  </script>
</polymer-element>