apachedex: render plotly graph only when displayed, this avoid rendering hidden graphs

apachedex/__init__.py

@@ -272,17 +272,13 @@ def graph(title, data, options={}, height=300):
   count_graph += 1
   div_id = "graph_%i" % count_graph
   append = result.append
-  append('<h2>%s</h2><div id="%s" '
-    'style="width:600px;height:%ipx"></div>' % (title, div_id, height))
-  append('</script><script type="text/javascript">//<![CDATA[')
-  append("""
-TESTER = document.getElementById('%s');
-Plotly.plot( TESTER,""" % div_id)
-  append(json.dumps(data))
-  append(',')
-  append(json.dumps(options))
-  append(',{modeBarButtonsToRemove: ["sendDataToCloud"]});')
-  append('//]]></script>')
+  append('<h2>%s</h2><div id="%s" class="graph" '
+    'style="width:600px;height:%ipx" ' % (title, div_id, height))
+  append(' data-points="')
+  append(escape(json.dumps(data), quote=True))
+  append('" data-options="')
+  append(escape(json.dumps(options), quote=True))
+  append('"></div>"')
   return ''.join(result)
 
 class APDEXStats(object):

apachedex/apachedex.js

@@ -49,21 +49,9 @@ function updateAxisTransform(axis) {
 function renderGraph(container) {
   var container = $(container);
   var previousIndex = null;
-  var tooltip = container.next(".tooltip");
   var options = $.parseJSON(container.attr("data-options"));
-  updateAxisTransform(options.xaxis);
-  updateAxisTransform(options.yaxis);
-  var plot = $.plot(
-    container,
-    $.parseJSON(container.attr("data-points")),
-    options
-  );
-  tooltip.detach();
-  container.append(tooltip);
-  container.bind("plothover", function (event, pos, item) {
-    previousIndex = updateGraphTooltip(event, pos, item, previousIndex,
-      tooltip, plot);
-  });
+  var data = $.parseJSON(container.attr("data-points"));
+  Plotly.plot(container[0], data, options, {modeBarButtonsToRemove: ["sendDataToCloud"]});
 }
 function toggleGraph(node) {
   var container = $(node).parent().find(".container");