chart-line.html

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

<!--
A line chart is a way of plotting data points on a line.

Often, it is used to show trend data, and the comparison of two data sets.

##### Example

    <chart-line></chart-line>

@element chart-line
@blurb A line chart is a way of plotting data points on a line.
@status alpha
@homepage http://robdodson.github.io/chart-elements
-->

<polymer-element name="chart-line" 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).Line(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>