Added support for exporting and loading widget data from json

holoviews/plotting/bokeh/bokehwidgets.js

@@ -14,9 +14,19 @@ BokehScrubberWidget.prototype = Object.create(ScrubberWidget.prototype);
 // Define methods to override on widgets
 var BokehMethods = {
 	init_slider : function(init_val){
-		$.each(this.frames, $.proxy(function(index, frame) {
-			this.frames[index] = JSON.parse(frame);
-		}, this));
+		if(this.load_json) {
+			var data_url = this.json_path + '/' + this.id + '.json';
+			$.getJSON(data_url, $.proxy(function(json_data) {
+				this.frames = json_data;
+				$.each(this.frames, $.proxy(function(index, frame) {
+					this.frames[index] = JSON.parse(frame);
+				}, this));
+			}, this));
+		} else {
+			$.each(this.frames, $.proxy(function(index, frame) {
+				this.frames[index] = JSON.parse(frame);
+			}, this));
+		}
 	},
 	update : function(current){
 		if (current === undefined) {

holoviews/plotting/bokeh/widgets.py

@@ -1,4 +1,4 @@
-import json
+import os, json
 import param
 
 from ..widgets import NdWidget, SelectionWidget, ScrubberWidget
@@ -18,7 +18,13 @@ def _get_data(self):
         return dict(data, init_frame=init_frame)
 
     def encode_frames(self, frames):
-        frames = json.dumps(frames).replace('</', r'<\/')
+        if self.export_json:
+            path = os.path.join(self.json_path, '%s.json' % self.id)
+            with open(path, 'wb') as f:
+                json.dump(frames, f)
+            frames = {}
+        else:
+            frames = json.dumps(frames).replace('</', r'<\/')
         return frames
 
     def _plot_figure(self, idx, fig_format='json'):

holoviews/plotting/mpl/mplwidgets.js

@@ -28,16 +28,14 @@ var MPLMethods = {
 	populate_cache : function(idx){
 		var cache_id = this.img_id+"_"+idx;
 		if(this.load_json) {
-			var data_url = "{{ server }}/" + this.fig_id + "/" + idx;
-			if(this.mode == 'mpld3') {
-				$.getJSON(data_url, (function(cache_id) {
-					return function(data) {
-						mpld3.draw_figure(cache_id, data);
-					};
-				}(cache_id)));
-			} else {
-				this.cache[idx].load(data_url);
-			}
+			var data_url = this.json_path + '/' + this.id + '.json';
+			$.getJSON(data_url, $.proxy(function(json_data) {
+				if(this.mode == 'mpld3') {
+					mpld3.draw_figure(cache_id, json_data[idx]);
+				} else {
+					this.cache[idx].html(json_data[idx]);
+				}
+			}, this));
 		} else {
 			if(this.mode == 'mpld3') {
 				mpld3.draw_figure(cache_id, this.frames[idx]);

holoviews/plotting/mpl/widgets.py

@@ -1,4 +1,4 @@
-import uuid, json, warnings
+import os, uuid, json, warnings
 import param
 
 from ..widgets import NdWidget, SelectionWidget, ScrubberWidget
@@ -94,14 +94,21 @@ def get_frames(self):
             self.manager.display_js()
             frames = {0: self.comm.html}
         elif self.embed:
-            frames = super(MPLWidget, self).get_frames()
+            return super(MPLWidget, self).get_frames()
         else:
             frames = {0: self._plot_figure(0)}
         return self.encode_frames(frames)
 
 
     def encode_frames(self, frames):
-        if self.renderer.mode == 'mpld3':
+        if self.export_json:
+            path = os.path.join(self.json_path, '%s.json' % self.id)
+            if not os.path.isdir(self.json_path):
+                os.mkdir(self.json_path)
+            with open(path, 'wb') as f:
+                json.dump(frames, f)
+            return {}
+        elif self.renderer.mode == 'mpld3':
             import mpld3
             encoder = dict(cls=mpld3._display.NumpyEncoder)
             frames = {idx: frame for idx, frame in frames.items()}

holoviews/plotting/widgets/__init__.py

@@ -47,11 +47,6 @@ class NdWidget(param.Parameterized):
          If export_json is True the json files will be written to this
          directory.""")
 
-    server_url = param.String(default='', doc="""If export_json is
-         True the slider widget will expect to be served the plot data
-         from this URL. Data should be served from:
-         server_url/fig_{id}/{frame}.""")
-
     ##############################
     # Javascript include options #
     ##############################
@@ -110,9 +105,8 @@ def _get_data(self):
         mode = repr(self.renderer.mode)
         dynamic = repr(self.plot.dynamic) if self.plot.dynamic else 'false'
         return dict(CDN=CDN, frames=self.get_frames(), delay=delay,
-                    server=self.server_url, cached=cached,
-                    load_json=load_json, mode=mode, id=self.id,
-                    Nframes=len(self.plot), widget_name=name,
+                    cached=cached, load_json=load_json, mode=mode, id=self.id,
+                    Nframes=len(self.plot), widget_name=name, json_path=self.json_path,
                     widget_template=template, dynamic=dynamic)
 
 
@@ -133,12 +127,6 @@ def get_frames(self):
     def encode_frames(self, frames):
         if isinstance(frames, dict):
             frames = {idx: frame for idx, frame in frames.items()}
-        if self.export_json:
-            if not os.path.isdir(self.json_path):
-                os.mkdir(self.json_path)
-            with open(self.json_path+'/fig_%s.json' % self.id, 'wb') as f:
-                json.dump(frames, f)
-            frames = {}
         return frames
 
 

holoviews/plotting/widgets/jsscrubber.jinja

@@ -32,7 +32,7 @@
 
         function create_widget() {
             setTimeout(function() {
-                anim{{ id }} = new {{ widget_name }}(frame_data, {{ Nframes }}, "{{ id }}", {{ delay }}, {{ load_json }}, {{ mode }}, {{ cached }}, {{ dynamic }});
+                anim{{ id }} = new {{ widget_name }}(frame_data, {{ Nframes }}, "{{ id }}", {{ delay }}, {{ load_json }}, {{ mode }}, {{ cached }}, "{{ json_path }}", {{ dynamic }});
             }, 0);
         }
 

holoviews/plotting/widgets/jsslider.jinja

@@ -197,7 +197,7 @@
             setTimeout(function() {
                 anim{{ id }} = new {{ widget_name }}(frame_data, "{{ id }}", widget_ids,
                         keyMap, dim_vals, notFound, {{ load_json }}, {{ mode }},
-                        {{ cached }}, "", {{ dynamic }});
+                        {{ cached }}, "{{ json_path}}", {{ dynamic }});
             }, 0);
         }
 

holoviews/plotting/widgets/widgets.js

@@ -12,8 +12,13 @@ HoloViewsWidget.prototype.init_slider = function(init_val){
 
 HoloViewsWidget.prototype.populate_cache = function(idx){
     if(this.load_json) {
-        var data_url = this.server + this.fig_id + "/" + idx;
-        this.cache[idx].load(data_url);
+		var data_url = "./" + this.id + '.json';
+		$.getJSON(data_url, $.proxy(function(json_data) {
+			this.frames = json_data;
+			$.each(this.frames, $.proxy(function(index, frame) {
+				this.cache[index].html(frame);
+			}, this));
+		}, this));
     } else {
         this.cache[idx].html(this.frames[idx]);
         if (this.embed) {
@@ -78,12 +83,11 @@ HoloViewsWidget.prototype.update = function(current){
 }
 
 
-function SelectionWidget(frames, id, slider_ids, keyMap, dim_vals, notFound, load_json, mode, cached, server, dynamic){
+function SelectionWidget(frames, id, slider_ids, keyMap, dim_vals, notFound, load_json, mode, cached, json_path, dynamic){
     this.frames = frames;
     this.fig_id = "fig_" + id;
     this.img_id = "_anim_img" + id;
     this.id = id;
-    this.server = server;
     this.slider_ids = slider_ids;
     this.keyMap = keyMap
     this.current_frame = 0;
@@ -94,6 +98,7 @@ function SelectionWidget(frames, id, slider_ids, keyMap, dim_vals, notFound, loa
     this.cached = cached;
     this.dynamic = dynamic;
     this.cache = {};
+	this.json_path = json_path;
     this.init_slider(this.current_vals[0]);
 }
 
@@ -130,7 +135,7 @@ SelectionWidget.prototype.set_frame = function(dim_val, dim_idx){
 
 
 /* Define the ScrubberWidget class */
-function ScrubberWidget(frames, num_frames, id, interval, load_json, mode, cached, dynamic){
+function ScrubberWidget(frames, num_frames, id, interval, load_json, mode, cached, json_path, dynamic){
     this.img_id = "_anim_img" + id;
     this.slider_id = "_anim_slider" + id;
     this.loop_select_id = "_anim_loop_select" + id;
@@ -147,6 +152,7 @@ function ScrubberWidget(frames, num_frames, id, interval, load_json, mode, cache
     this.frames = frames;
     this.cache = {};
     this.length = num_frames;
+	this.json_path = json_path;
     document.getElementById(this.slider_id).max = this.length - 1;
     this.init_slider(0);
 }