From fa68419f776a724e65bfebabfed404fb17f64a0d Mon Sep 17 00:00:00 2001
From: Tom Matheussen <tommatheussen5@hotmail.com>
Date: Wed, 1 Feb 2017 09:23:04 +0100
Subject: [PATCH] Multiple weather card graphs (#181)

* Set different id for each weather card

* Style fixes

* Changed id interpolation

* Use same function both for generating and finding chart id

* Fix line too long
---
 src/cards/ha-weather-card.html | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index eabf8d7b9a..eaac032fcc 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -21,7 +21,7 @@
     <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-        <div id='chart_area'></div>
+        <div id$='[[computeChartId(stateObj)]]'></div>
         <ha-attributes state-obj='[[stateObj]]' extra-filters='forecast'></ha-attributes>
       </div>
     </ha-card>
@@ -50,6 +50,10 @@
       return stateObj.attributes.friendly_name;
     },
 
+    computeChartId: function (stateObj) {
+      return 'chart_area_' + stateObj.id;
+    },
+
     getDataArray: function () {
       var dataArray = [];
       var data = this.stateObj.attributes.forecast;
@@ -79,7 +83,8 @@
       }
 
       if (!this.chartEngine) {
-        this.chartEngine = new window.google.visualization.LineChart(document.getElementById('chart_area'));
+        this.chartEngine = new window.google.visualization.LineChart(
+          document.getElementById(this.computeChartId(this.stateObj)));
       }
 
       this.drawChart();