better images with jqplot and local JS/CSS

biocham_kernel/images.py

-# very much inspired form the example bash_kernel
-# https://raw.githubusercontent.com/takluyver/bash_kernel/
 import base64
 import os
 
+# TODO: add logo-64x64.png
+
 
 def display_data_for_image(filename):
     with open(filename, 'rb') as f:
@@ -13,60 +13,58 @@ def display_data_for_image(filename):
     if image_type == 'svg':
         image_type = 'image/svg+xml'
         image_data = image.decode('utf-8')
-    elif image_type == 'js':
+    elif image_type == 'csv':
         image_type = 'text/html'
         image = image.decode('utf-8')
-        # FIXME use local URLs and use mouse CSS
-        jsurl = 'http://www.gnuplot.info/demo_canvas'
-        jsid = filename[:-3]
+        lines = [line.split(',') for line in image.splitlines()]
+        labels = ', '.join(['"' + label + '"' for label in lines.pop(0)[1:]])
+        series = '[' + ', '.join([
+            '[' +
+            ', '.join(['[' + lines[i][0] + ', ' + lines[i][j] + ']'
+                       for i in range(len(lines))]) +
+            ']' for j in range(1, len(lines[0]))]) + ']'
+        plotid = filename.split('.')[-2]
         image_data = '''
-        <script src="{jsurl}/canvastext.js"></script>
-        <script src="{jsurl}/gnuplot_common.js"></script>
-        <script src="{jsurl}/gnuplot_dashedlines.js"></script>
-        <script src="{jsurl}/gnuplot_mouse.js"></script>
-        <script>'''.format(jsurl=jsurl) + image + '</script>'
-        image_data = image_data + '''
-        <canvas id="{jsid}" width=600 height=400
-            oncontextmenu="return false;"
-            onkeypress=gnuplot.do_hotkey()></canvas>
-        <table id="gnuplot_mousebox" class="mbunder">
-        <tr>
-            <td class="icon" style="padding: 0px;"
-                onclick="gnuplot.toggle_grid();"><img
-                src="{jsurl}/grid.png" id="gnuplot_grid_icon" alt="#"
-                title="toggle grid"></td>
-            <td class="icon" style="padding: 0px;"
-                onclick="gnuplot.unzoom();"><img
-                src="{jsurl}/previouszoom.png" id="gnuplot_unzoom_icon"
-                alt="unzoom" title="unzoom"></td>
-            <td class="icon" style="padding: 0px;"
-                onclick="gnuplot.rezoom();"><img
-                src="{jsurl}/nextzoom.png" id="gnuplot_rezoom_icon"
-                alt="rezoom" title="rezoom"></td>
-            <td class="icon" style="padding: 0px;"><a 
-                href="{jsurl}/canvas_help.html"><img
-                src="{jsurl}/help.png" align=right alt="help"
-                title="help"></a></td>
-        '''.format(jsid=jsid, jsurl=jsurl)
-        for i in range(image.count('End {}_plot_'.format(jsid))):
-            image_data = image_data + '''
-                <td class="icon" style="padding: 0px;"
-                    onclick='gnuplot.toggle_plot("{jsid}_plot_{nb}")'>{nb}</td>
-            '''.format(jsid=jsid, nb=i+1)
-        image_data = image_data + '''
-            <td class="mb0">x</td>
-            <td class="mb1"><span id="{jsid}_x">&nbsp;</span></td>
-            <td class="mb0">y</td>
-            <td class="mb1"><span id="{jsid}_y">&nbsp;</span></td>
-        </table>
-        <script>var cssNode = document.createElement('link');
-            cssNode.type = 'text/css';
-            cssNode.rel = 'stylesheet';
-            cssNode.href = '{jsurl}/gnuplot_mouse.css';
-            document.head.appendChild(cssNode);</script>
-        <script>var gnuplot_canvas = {jsid};
-            {jsid}();</script>
-        '''.format(jsid=jsid, jsurl=jsurl)
+        <div id="{plotid}" style="height: 400px; width: 600px;"></div>
+        <script>
+            function waitForJQplot() {{
+                if (typeof $.jqplot !== 'undefined') {{
+                    $.jqplot.config.enablePlugins = true;
+                    $.jqplot('{plotid}', {data}, {{
+                        seriesDefaults: {{
+                            showMarker: false
+                        }},
+                        legend: {{
+                            show: true,
+                            placement: "outside",
+                            labels: [{labels}],
+                            renderer: $.jqplot.EnhancedLegendRenderer,
+                            rendererOptions: {{
+                                seriesToggle: true,
+                                showLineStyle: true
+                            }}
+                        }},
+                        cursor: {{
+                            show: true,
+                            zoom: true,
+                            tooltipFormatString: "%.2e, %.2e",
+                            cursorLegendFormatString: "%.2e, %.2e"
+                        }},
+                        highlighter: {{
+                            formatString: "%.2e"
+                        }}
+                    }});
+                    $('#{plotid}').contextmenu(function() {{
+                        $('#{plotid}').jqplotSaveImage();
+                        return false;
+                    }});
+                }} else {{ window.setTimeout(waitForJQplot, 250); }}
+            }}
+            $(document).ready(function(){{
+                waitForJQplot();
+            }});
+        </script>
+        '''.format(plotid=plotid, data=series, labels=labels)
     else:
         image_type = 'image/' + image_type
         image_data = base64.b64encode(image).decode('ascii')

biocham_kernel/jquery.jqplot.min.css

+.jqplot-xaxis,.jqplot-xaxis-label{margin-top:10px}.jqplot-x2axis,.jqplot-x2axis-label{margin-bottom:10px}.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em}.jqplot-axis{font-size:.75em}.jqplot-yaxis{margin-right:10px}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis,.jqplot-yMidAxis{margin-left:10px;margin-right:10px}.jqplot-axis-tick,.jqplot-x2axis-tick,.jqplot-xaxis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick,.jqplot-yMidAxis-tick,.jqplot-yaxis-tick{position:absolute;white-space:pre}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom}.jqplot-yaxis-tick{right:0;top:15px;text-align:right}.jqplot-yaxis-tick.jqplot-breakTick{right:-20px;margin-right:0;padding:1px 5px;z-index:2;font-size:1.5em}.jqplot-x2axis-label,.jqplot-xaxis-label,.jqplot-yMidAxis-label,.jqplot-yaxis-label{font-size:11pt;position:absolute}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left}.jqplot-yMidAxis-tick{text-align:center;white-space:nowrap}.jqplot-yaxis-label{margin-right:10px}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;margin-left:10px;position:absolute}.jqplot-meterGauge-tick{font-size:.75em;color:#999}.jqplot-meterGauge-label{font-size:1em;color:#999}table.jqplot-table-legend{margin:12px}table.jqplot-cursor-legend,table.jqplot-table-legend{background-color:rgba(255,255,255,.6);border:1px solid #ccc;position:absolute;font-size:.75em}td.jqplot-table-legend{vertical-align:middle}td.jqplot-seriesToggle:active,td.jqplot-seriesToggle:hover{cursor:pointer}.jqplot-table-legend .jqplot-series-hidden{text-decoration:line-through}div.jqplot-table-legend-swatch-outline{border:1px solid #ccc;padding:1px}div.jqplot-table-legend-swatch{width:0;height:0;border-width:5px 6px;border-style:solid}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em}.jqplot-canvasOverlay-tooltip,.jqplot-cursor-tooltip,.jqplot-highlighter-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,.5);padding:1px}.jqplot-point-label{font-size:.75em;z-index:2}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em}.jqplot-error{text-align:center}.jqplot-error-message{position:relative;top:46%;display:inline-block}div.jqplot-bubble-label{font-size:.8em;padding-left:2px;padding-right:2px;color:rgb(20%,20%,20%)}div.jqplot-bubble-label.jqplot-bubble-label-highlight{background:rgba(90%,90%,90%,.7)}div.jqplot-noData-container{text-align:center;background-color:rgba(96%,96%,96%,.3)}
\ No newline at end of file

biocham_kernel/kernel.js

+define(function() {
+   var onload = function() {
+      $.ajaxSetup({ cache: true });
+      $.getScript("/kernelspecs/biocham/jquery.jqplot.js").done(function() {
+         $.getScript("/kernelspecs/biocham/jqplot.cursor.js");
+         $.getScript("/kernelspecs/biocham/jqplot.highlighter.js");
+         $.getScript("/kernelspecs/biocham/jqplot.enhancedLegendRenderer.js");
+      });
+      var cssNode = document.createElement('link');
+      cssNode.type = 'text/css';
+      cssNode.rel = 'stylesheet';
+      cssNode.href = '/kernelspecs/biocham/jquery.jqplot.min.css';
+      document.head.appendChild(cssNode);
+   }
+
+   return {onload: onload}
+
+})

commandline.pl

@@ -64,9 +64,9 @@ option('', '--version', Arg, Arg) :-
    quit.
 
 option('', '--jupyter', Arg, Arg) :-
-  set_counter(plot_canvas, 0),
   set_counter(graph_svg, 0),
-  set_plot_driver(gnu_plot_canvas),
+  set_counter(plot_csv, 0),
+  set_plot_driver(gnu_plot_csv),
   set_image_viewer_driver(img_tag),
   set_draw_graph_driver(graph_svg).
 

plot.pl

@@ -45,6 +45,13 @@ gnu_plot_canvas :-
   view_image(Filename).
 
 
+gnu_plot_csv :-
+  count(plot_csv, Index),
+  format(atom(Filename), 'plot~d.csv', [Index]),
+  export_table(Filename),
+  view_image(Filename).
+
+
 execute_plot(Options) :-
   process_create(path(gnuplot), Options, []).