callbacks.ipynb

{
 "metadata": {
  "name": "callbacks"
 },
 "nbformat": 3,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "source": [
      "*this cell loads the flot jQuery plugin, used for plotting*",
      "<script type=\"text/javascript\">",
      "    // load flot",
      "    $.getScript(\"http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js\", function(){});",
      "</script>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 1,
     "source": [
      "Interactive JavaScript plots with kernel callbacks"
     ]
    },
    {
     "cell_type": "markdown",
     "source": [
      "This is an example of a plotting widget, entirely in javascript, ",
      "which can make callbacks to the Kernel to update data.",
      "",
      "In this case, there is a user-defined function (`update_plot`) that",
      "generates the new data for the plot.  The widget has sliders, which",
      "trigger calls to this function when they change.  There is a javascript",
      "callback hooked up, which updates a plot area with the new data when it arrives."
     ]
    },
    {
     "cell_type": "markdown",
     "source": [
      "You must run this one code cell to define the function before it is available to the widget."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      "import json",
      "from IPython.core.display import JSON, display",
      "from scipy.special import jn",
      "from numpy import linspace",
      "",
      "def update_plot(n, xmax=10, npoints=200):",
      "    x = linspace(0, xmax, npoints)",
      "    lines = []",
      "    for i in range(1,n+1):",
      "        lines.append(zip(x,jn(x,i)))",
      "    display(JSON(json.dumps(lines)))"
     ],
     "language": "python",
     "outputs": [],
     "prompt_number": 314
    },
    {
     "cell_type": "markdown",
     "source": [
      "**Bessel Functions**",
      "",
      "<div id=\"theplot\" style=\"width:600px;height:300px;\"></div>",
      "",
      "<span id=\"n_label\"></span><div id=\"n_slider\"></div>",
      "",
      "<span id=\"xmax_label\"></span><div id=\"xmax_slider\"></div>",
      "",
      "<span id=\"npoints_label\"></span><div id=\"npoints_slider\"></div>",
      "",
      "<script type=\"text/javascript\">",
      "    var kernel = IPython.notebook.kernel;",
      "",
      "    update_plot = function(msg_type, content){",
      "        // callback for updating the plot with the output of the request",
      "        if (msg_type !== 'display_data')",
      "            return;",
      "        var lines = content['data']['application/json'];",
      "        if (lines != undefined){",
      "            lines = JSON.parse(lines);",
      "            $.plot($(\"#theplot\"), lines);",
      "        } else {",
      "            console.log(\"no lines?!\");",
      "            console.log(data);",
      "        }",
      "    };",
      "    ",
      "    request_update = function(){",
      "        // execute update on the kernel",
      "        var n = $('div#n_slider').slider(\"value\");",
      "        $('span#n_label').text(\"n = \" + n);",
      "        ",
      "        var xmax = $('div#xmax_slider').slider(\"value\");",
      "        $('span#xmax_label').text(\"xmax = \" + xmax);",
      "        ",
      "        var npoints = $('div#npoints_slider').slider(\"value\");",
      "        $('span#npoints_label').text(\"npoints = \" + npoints);",
      "        ",
      "        var args = n + \", xmax=\" + xmax + \", npoints=\" + npoints;",
      "        kernel.execute(\"update_plot(\" + args + \")\", {'output': update_plot});",
      "    };",
      "                     ",
      "    $('div#n_slider').slider({",
      "        min : 1,",
      "        max : 20,",
      "        value : 4,",
      "        slide : request_update,",
      "        change: request_update",
      "    });",
      "    $('div#xmax_slider').slider({",
      "        min : 1,",
      "        max : 32,",
      "        step : 0.2,",
      "        value : 10,",
      "        slide : request_update,",
      "        change: request_update",
      "    });",
      "    $('div#npoints_slider').slider({",
      "        min : 2,",
      "        max : 200,",
      "        step : 1,",
      "        value : 100,",
      "        slide : request_update,",
      "        change: request_update",
      "    });",
      "    request_update();",
      "</script>",
      ""
     ]
    },
    {
     "cell_type": "code",
     "collapsed": true,
     "input": [
      ""
     ],
     "language": "python",
     "outputs": []
    }
   ]
  }
 ]
}

I don't think this one is still working..