Merge pull request #114 from sinkap/eplot_resize_fix

plotter: EventPlot: Namespace the resize event listeners
diff --git a/trappy/plotter/AttrConf.py b/trappy/plotter/AttrConf.py
index c374957..64e3b8e 100644
--- a/trappy/plotter/AttrConf.py
+++ b/trappy/plotter/AttrConf.py
@@ -105,8 +105,6 @@
     "drawstyle"]
 """kwargs that will be forwarded to matplotlib API calls
 """
-HTML_WIDTH =  900
-"""Default width for HTML based plots"""
 HTML_HEIGHT = 400
 """Default height for HTML based plots"""
 DEFAULT_SYNC_ZOOM = False
diff --git a/trappy/plotter/ILinePlotGen.py b/trappy/plotter/ILinePlotGen.py
index bd2d09b..9e06d04 100644
--- a/trappy/plotter/ILinePlotGen.py
+++ b/trappy/plotter/ILinePlotGen.py
@@ -53,7 +53,6 @@
     def _add_graph_cell(self, fig_name):
         """Add a HTML table cell to hold the plot"""
 
-        width = int(self._attr["width"] / self._cols)
         div_js = """
             <script>
             var ilp_req = require.config( {
@@ -80,21 +79,15 @@
             </script>
         """
 
-        cell = '<td style="border-style: hidden;"><div class="ilineplot" id="{0}" style="width: \
-{1}px; height: {2}px;">{3}</div></td>'.format(fig_name,
-                                           width,
-                                           self._attr["height"], div_js)
+        cell = '<td style="border-style: hidden;"><div class="ilineplot" id="{}">{}</div></td>'.format(fig_name, div_js)
 
         self._html.append(cell)
 
     def _add_legend_cell(self, fig_name):
         """Add HTML table cell for the legend"""
 
-        width = int(self._attr["width"] / self._cols)
         legend_div_name = fig_name + "_legend"
-        cell = '<td style="border-style: hidden;"><div style="text-align:right; \
-width: {0}px; height: auto;"; id="{1}"></div></td>'.format(width,
-                                                           legend_div_name)
+        cell = '<td style="border-style: hidden;"><div style="text-align:right" id="{}"></div></td>'.format(legend_div_name)
 
         self._html.append(cell)
 
@@ -124,9 +117,7 @@
     def _init_html(self):
         """Initialize HTML code for the plots"""
 
-        width = self._attr["width"]
-        table = '<table style="width: {0}px; border-style: hidden;">'.format(
-            width)
+        table = '<table style="border-style: hidden;">'
         self._html.append(table)
 
         for _ in range(self._rows):
@@ -168,7 +159,6 @@
         if self.num_plots % self._cols != 0:
             self._rows += 1
 
-        self._attr["width"] = AttrConf.HTML_WIDTH
         self._attr["height"] = AttrConf.HTML_HEIGHT
         self._init_html()
 
@@ -207,6 +197,8 @@
         fig_params["title"] = title
         fig_params["step_plot"] = self._attr["step_plot"]
         fig_params["fill_graph"] = self._attr["fill"]
+        fig_params["per_line"] = self._attr["per_line"]
+        fig_params["height"] = self._attr["height"]
 
         self._check_add_scatter(fig_params)
 
diff --git a/trappy/plotter/js/ILinePlot.js b/trappy/plotter/js/ILinePlot.js
index 6014a69..78d8131 100644
--- a/trappy/plotter/js/ILinePlot.js
+++ b/trappy/plotter/js/ILinePlot.js
@@ -184,7 +184,19 @@
             strokeWidth: t_info.strokeWidth,
             pointSize: t_info.pointSize,
             dateWindow: t_info.dateWindow
+        });
 
+        var width = $("#" + t_info.name)
+            .closest(".output_subarea").width() / t_info.per_line
+
+        graph.resize(width, t_info.height);
+
+        $(window).on("resize." + t_info.name, function() {
+
+            var width = $("#" + t_info.name)
+                .closest(".output_subarea").width() / t_info.per_line
+
+            graph.resize(width, t_info.height);
         });
 
         graphs[t_info.name] =