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