From a35100dde71f2971a4935f67b7837fd6cb1de263 Mon Sep 17 00:00:00 2001
From: Geza Kovacs <gkovacs@stanford.edu>
Date: Thu, 23 Jun 2016 16:45:42 -0700
Subject: [PATCH] added chart-horizontal-bar for horizontal bar charts

---
 chart-elements.html       |  1 +
 chart-horizontal-bar.html | 76 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 chart-horizontal-bar.html

diff --git a/chart-elements.html b/chart-elements.html
index cec458a..9b88fb9 100644
--- a/chart-elements.html
+++ b/chart-elements.html
@@ -1,5 +1,6 @@
 <link rel="import" href="chart-bar.html">
 <link rel="import" href="chart-doughnut.html">
+<link rel="import" href="chart-horizontal-bar.html">
 <link rel="import" href="chart-line.html">
 <link rel="import" href="chart-pie.html">
 <link rel="import" href="chart-polar-area.html">
diff --git a/chart-horizontal-bar.html b/chart-horizontal-bar.html
new file mode 100644
index 0000000..392284c
--- /dev/null
+++ b/chart-horizontal-bar.html
@@ -0,0 +1,76 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="chart-js-import.html">
+<link rel="import" href="chart-property-behavior.html">
+<link rel="import" href="context-behavior.html">
+<link rel="import" href="resize-behavior.html">
+
+<!--
+A bar chart is a way of showing data as bars.
+
+It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
+
+##### Example
+
+    <chart-horizontal-bar data="[[data]]"></chart-horizontal-bar>
+
+    ...
+
+    this.data = {
+      labels: ["January", "February", "March", "April", "May", "June", "July"],
+      datasets: [
+        {
+          label: "My First dataset",
+          backgroundColor: "rgba(220,220,220,0.2)",
+          borderColor: "rgba(220,220,220,1)",
+          borderWidth: 1,
+          data: [65, 59, 80, 81, 56, 55, 40]
+        },
+        {
+          label: "My Second dataset",
+          backgroundColor: "rgba(151,187,205,0.2)",
+          borderColor: "rgba(151,187,205,1)",
+          borderWidth: 1,
+          data: [28, 48, 40, 19, 86, 27, 90]
+        }
+      ]
+    };
+
+@group Chart Elements
+@element chart-bar
+@demo demo/chart-bar.html
+-->
+
+<link rel="import" href="chart-styles.html">
+<dom-module id="chart-horizontal-bar">
+
+  <template>
+
+    <style include="chart-styles"></style>
+
+    <div>
+      <canvas id="canvas"></canvas>
+    </div>
+
+  </template>
+
+  <script>
+    Polymer({
+
+      is: 'chart-horizontal-bar',
+
+      behaviors: [
+        Polymer.IronResizableBehavior,
+        ChartBehaviors.ChartPropertyBehavior,
+        ChartBehaviors.ContextBehavior,
+        ChartBehaviors.ResizeBehavior
+      ],
+
+      ready: function() {
+        this._setType('horizontalBar');
+      }
+
+    });
+  </script>
+
+</dom-module>