Display-Fluxtream-time-series-chart.ipynb

{
 "metadata": {
  "name": "",
  "signature": "sha256:264729427d9cf398452a8d819977aaa3c680ccf523862600b9b8df5ad4e78b24"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# iframe_with_source wraps HTML+javascript into an iframe, to avoid DOM and javascript conflicts\n",
      "\n",
      "from IPython.display import HTML\n",
      "import json\n",
      "\n",
      "def iframe_with_source(source, height='200px'):\n",
      "    name = 'iframe-%d' % get_ipython().execution_count\n",
      "    source = json.dumps(source).replace('</script', '</scr\"+\"ipt')\n",
      "    template = \"\"\"\n",
      "<iframe id=\"%s\" style=\"width:100%%; height:%s\"></iframe>\n",
      "<script>\n",
      "document.getElementById('%s').srcdoc = %s;\n",
      "</script>\n",
      "\"\"\"\n",
      "    # Fill in the %s slots with id, width, height, and the HTML source\n",
      "    return HTML(template % (name, height, name, source))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "src = \"\"\"\n",
      "<html>\n",
      "<head>\n",
      "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\n",
      "<script src=\"http://api.cmucreatelab.org/timeline-chart-0.1/grapher2.nocache.js\"></script>\n",
      "<style type=\"text/css\">\n",
      "body {\n",
      "   font-family: \"Gill Sans Light\", Verdana, Arial, sans-serif !important;\n",
      "   font-size: 10pt !important;\n",
      "}\n",
      "\n",
      "</style>\n",
      "<script>\n",
      "var series = [];\n",
      "var dateAxis;\n",
      "\n",
      "window.grapherLoad = function() {\n",
      "    dateAxis = new DateAxis(\"dateAxis\", \"horizontal\", {min: 1398916800, max: 1401595200});\n",
      "\n",
      "    series[0] = {}\n",
      "    series[0].axis = new NumberAxis('series0axis', \"vertical\", {min: -0.01, max: 0.05});\n",
      "\n",
      "    var datasource = function(level, offset, successCallback, failureCallback) {\n",
      "      $.ajax({\n",
      "        url:'http://fluxtream-api-proxy.cmucreatelab.org/api/bodytrack/tiles/1968/ACHD_Liberty.H2S_PPM/'+level+'.'+offset+'.json', \n",
      "        success:function(data){successCallback(JSON.stringify(data))},\n",
      "        failure:failureCallback,\n",
      "        headers: {Authorization: 'Basic ' + btoa('achd:achdmirror')}\n",
      "      });\n",
      "    }\n",
      "    var plot = new DataSeriesPlot(datasource, dateAxis, series[0].axis, {});\n",
      "    plot.setStyle(\n",
      "          {\n",
      "             \"styles\" : [\n",
      "                {\n",
      "                   \"type\" : \"line\",\n",
      "                   \"lineWidth\" : 1,\n",
      "                   \"show\" : true,\n",
      "                   \"color\" : \"#0000ff\"\n",
      "                },\n",
      "                {\n",
      "                   \"type\" : \"lollipop\",\n",
      "                   \"lineWidth\" : 1,\n",
      "                   \"radius\" : 0,\n",
      "                   \"fill\" : false,\n",
      "                   \"show\" : true,\n",
      "                   \"color\" : \"#0000ff\"\n",
      "                }\n",
      "             ],\n",
      "             highlight : {\n",
      "                \"lineWidth\" : 1,\n",
      "                \"styles\" : [\n",
      "                   {\n",
      "                      \"type\" : \"lollipop\",\n",
      "                      \"color\" : \"#ff0000\",\n",
      "                      \"radius\" : 1,\n",
      "                      \"lineWidth\" : 1,\n",
      "                      \"fill\" : false\n",
      "                   },\n",
      "                   {\n",
      "                      \"show\" : true,\n",
      "                      \"type\" : \"value\",\n",
      "                      \"fillColor\" : \"#ff0000\",\n",
      "                      \"marginWidth\" : 10,\n",
      "                      \"font\" : \"7pt Helvetica,Arial,Verdana,sans-serif\",\n",
      "                      \"verticalOffset\" : 7,\n",
      "                      \"numberFormat\" : \"###,##0.0##\"\n",
      "                   }\n",
      "                ]\n",
      "             }\n",
      "          }\n",
      "    );\n",
      "    series[0].pc = new PlotContainer(\"series0\", false, [plot]);\n",
      "\n",
      "\n",
      "    series[1] = {}\n",
      "    series[1].axis = new NumberAxis('series1axis', \"vertical\", {min: -0.01, max: 0.05});\n",
      "\n",
      "    var datasource = function(level, offset, successCallback, failureCallback) {\n",
      "      $.ajax({\n",
      "        url:'http://fluxtream-api-proxy.cmucreatelab.org/api/bodytrack/tiles/1968/ACHD_Avalon.H2S_PPM/'+level+'.'+offset+'.json', \n",
      "        success:function(data){successCallback(JSON.stringify(data))},\n",
      "        failure:failureCallback,\n",
      "        headers: {Authorization: 'Basic ' + btoa('achd:achdmirror')}\n",
      "      });\n",
      "    }\n",
      "    var plot = new DataSeriesPlot(datasource, dateAxis, series[1].axis, {});\n",
      "    plot.setStyle(\n",
      "          {\n",
      "             \"styles\" : [\n",
      "                {\n",
      "                   \"type\" : \"line\",\n",
      "                   \"lineWidth\" : 1,\n",
      "                   \"show\" : true,\n",
      "                   \"color\" : \"#0000ff\"\n",
      "                },\n",
      "                {\n",
      "                   \"type\" : \"lollipop\",\n",
      "                   \"lineWidth\" : 1,\n",
      "                   \"radius\" : 0,\n",
      "                   \"fill\" : false,\n",
      "                   \"show\" : true,\n",
      "                   \"color\" : \"#0000ff\"\n",
      "                }\n",
      "             ],\n",
      "             highlight : {\n",
      "                \"lineWidth\" : 1,\n",
      "                \"styles\" : [\n",
      "                   {\n",
      "                      \"type\" : \"lollipop\",\n",
      "                      \"color\" : \"#ff0000\",\n",
      "                      \"radius\" : 1,\n",
      "                      \"lineWidth\" : 1,\n",
      "                      \"fill\" : false\n",
      "                   },\n",
      "                   {\n",
      "                      \"show\" : true,\n",
      "                      \"type\" : \"value\",\n",
      "                      \"fillColor\" : \"#ff0000\",\n",
      "                      \"marginWidth\" : 10,\n",
      "                      \"font\" : \"7pt Helvetica,Arial,Verdana,sans-serif\",\n",
      "                      \"verticalOffset\" : 7,\n",
      "                      \"numberFormat\" : \"###,##0.0##\"\n",
      "                   }\n",
      "                ]\n",
      "             }\n",
      "          }\n",
      "    );\n",
      "    series[1].pc = new PlotContainer(\"series1\", false, [plot]);\n",
      "\n",
      "\n",
      "\n",
      "\n",
      "    $(window).resize(setSizes);\n",
      "    setSizes();\n",
      "};\n",
      "\n",
      "function setSizes() {\n",
      "   dateAxis.setSize($('#dateAxis').width(), $(\"#dateAxis\").height(), SequenceNumber.getNext());\n",
      "   for (var i = 0; i < 2; i++) {\n",
      "     series[i].axis.setSize($('#series'+i+'axis').width(), $('#series'+i+'axis').height(), SequenceNumber.getNext());\n",
      "     series[i].pc.setSize($('#series'+i).width(), $('#series'+i).height(), SequenceNumber.getNext());\n",
      "   }\n",
      "}\n",
      "\n",
      "function displayValue(val) {\n",
      "   $(\"#valueLabel\").html(val ? val['dateString'] + \" \" + val['valueString'] : \"\");\n",
      "}\n",
      "\n",
      "</script>\n",
      "</head>\n",
      "<body>\n",
      "<div style=\"width:100%; height:39px\">\n",
      "<div id=\"dateAxis\" style=\"position: fixed; left:100px; right:30px; height:37px; border:1px solid black\"></div>\n",
      "</div>\n",
      "<div style=\"width:100%; height:75px; margin-top:-1px\">\n",
      "<div id=\"series0title\" style=\"position: fixed; left:0px; width:99px; height:73px; border:1px solid black\"></div>\n",
      "<div id=\"series0\" style=\"position: fixed; left:100px; right:30px; height:73px; border:1px solid black\"></div>\n",
      "<div id=\"series0axis\" style=\"position: fixed; right:0px; width:29px; height:73px; border:1px solid black\"></div>\n",
      "</div>\n",
      "<div style=\"width:100%; height:75px; margin-top:-1px\">\n",
      "<div id=\"series1title\" style=\"position: fixed; left:0px; width:99px; height:73px; border:1px solid black\"></div>\n",
      "<div id=\"series1\" style=\"position: fixed; left:100px; right:30px; height:73px; border:1px solid black\"></div>\n",
      "<div id=\"series1axis\" style=\"position: fixed; right:0px; width:29px; height:73px; border:1px solid black\"></div>\n",
      "</div>\n",
      "<canvas id=\"narrow\" style=\"width:100%; height:73px\"></canvas>\n",
      "</body>\n",
      "</html>\n",
      "\"\"\"\n",
      "\n",
      "iframe_with_source(src)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<iframe id=\"iframe-10\" style=\"width:100%; height:200px\"></iframe>\n",
        "<script>\n",
        "document.getElementById('iframe-10').srcdoc = \"\\n<html>\\n<head>\\n<script src=\\\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\\\"></scr\"+\"ipt>\\n<script src=\\\"http://api.cmucreatelab.org/timeline-chart-0.1/grapher2.nocache.js\\\"></scr\"+\"ipt>\\n<style type=\\\"text/css\\\">\\nbody {\\n   font-family: \\\"Gill Sans Light\\\", Verdana, Arial, sans-serif !important;\\n   font-size: 10pt !important;\\n}\\n\\n</style>\\n<script>\\nvar series = [];\\nvar dateAxis;\\n\\nwindow.grapherLoad = function() {\\n    dateAxis = new DateAxis(\\\"dateAxis\\\", \\\"horizontal\\\", {min: 1398916800, max: 1401595200});\\n\\n    series[0] = {}\\n    series[0].axis = new NumberAxis('series0axis', \\\"vertical\\\", {min: -0.01, max: 0.05});\\n\\n    var datasource = function(level, offset, successCallback, failureCallback) {\\n      $.ajax({\\n        url:'http://fluxtream-api-proxy.cmucreatelab.org/api/bodytrack/tiles/1968/ACHD_Liberty.H2S_PPM/'+level+'.'+offset+'.json', \\n        success:function(data){successCallback(JSON.stringify(data))},\\n        failure:failureCallback,\\n        headers: {Authorization: 'Basic ' + btoa('achd:achdmirror')}\\n      });\\n    }\\n    var plot = new DataSeriesPlot(datasource, dateAxis, series[0].axis, {});\\n    plot.setStyle(\\n          {\\n             \\\"styles\\\" : [\\n                {\\n                   \\\"type\\\" : \\\"line\\\",\\n                   \\\"lineWidth\\\" : 1,\\n                   \\\"show\\\" : true,\\n                   \\\"color\\\" : \\\"#0000ff\\\"\\n                },\\n                {\\n                   \\\"type\\\" : \\\"lollipop\\\",\\n                   \\\"lineWidth\\\" : 1,\\n                   \\\"radius\\\" : 0,\\n                   \\\"fill\\\" : false,\\n                   \\\"show\\\" : true,\\n                   \\\"color\\\" : \\\"#0000ff\\\"\\n                }\\n             ],\\n             highlight : {\\n                \\\"lineWidth\\\" : 1,\\n                \\\"styles\\\" : [\\n                   {\\n                      \\\"type\\\" : \\\"lollipop\\\",\\n                      \\\"color\\\" : \\\"#ff0000\\\",\\n                      \\\"radius\\\" : 1,\\n                      \\\"lineWidth\\\" : 1,\\n                      \\\"fill\\\" : false\\n                   },\\n                   {\\n                      \\\"show\\\" : true,\\n                      \\\"type\\\" : \\\"value\\\",\\n                      \\\"fillColor\\\" : \\\"#ff0000\\\",\\n                      \\\"marginWidth\\\" : 10,\\n                      \\\"font\\\" : \\\"7pt Helvetica,Arial,Verdana,sans-serif\\\",\\n                      \\\"verticalOffset\\\" : 7,\\n                      \\\"numberFormat\\\" : \\\"###,##0.0##\\\"\\n                   }\\n                ]\\n             }\\n          }\\n    );\\n    series[0].pc = new PlotContainer(\\\"series0\\\", false, [plot]);\\n\\n\\n    series[1] = {}\\n    series[1].axis = new NumberAxis('series1axis', \\\"vertical\\\", {min: -0.01, max: 0.05});\\n\\n    var datasource = function(level, offset, successCallback, failureCallback) {\\n      $.ajax({\\n        url:'http://fluxtream-api-proxy.cmucreatelab.org/api/bodytrack/tiles/1968/ACHD_Avalon.H2S_PPM/'+level+'.'+offset+'.json', \\n        success:function(data){successCallback(JSON.stringify(data))},\\n        failure:failureCallback,\\n        headers: {Authorization: 'Basic ' + btoa('achd:achdmirror')}\\n      });\\n    }\\n    var plot = new DataSeriesPlot(datasource, dateAxis, series[1].axis, {});\\n    plot.setStyle(\\n          {\\n             \\\"styles\\\" : [\\n                {\\n                   \\\"type\\\" : \\\"line\\\",\\n                   \\\"lineWidth\\\" : 1,\\n                   \\\"show\\\" : true,\\n                   \\\"color\\\" : \\\"#0000ff\\\"\\n                },\\n                {\\n                   \\\"type\\\" : \\\"lollipop\\\",\\n                   \\\"lineWidth\\\" : 1,\\n                   \\\"radius\\\" : 0,\\n                   \\\"fill\\\" : false,\\n                   \\\"show\\\" : true,\\n                   \\\"color\\\" : \\\"#0000ff\\\"\\n                }\\n             ],\\n             highlight : {\\n                \\\"lineWidth\\\" : 1,\\n                \\\"styles\\\" : [\\n                   {\\n                      \\\"type\\\" : \\\"lollipop\\\",\\n                      \\\"color\\\" : \\\"#ff0000\\\",\\n                      \\\"radius\\\" : 1,\\n                      \\\"lineWidth\\\" : 1,\\n                      \\\"fill\\\" : false\\n                   },\\n                   {\\n                      \\\"show\\\" : true,\\n                      \\\"type\\\" : \\\"value\\\",\\n                      \\\"fillColor\\\" : \\\"#ff0000\\\",\\n                      \\\"marginWidth\\\" : 10,\\n                      \\\"font\\\" : \\\"7pt Helvetica,Arial,Verdana,sans-serif\\\",\\n                      \\\"verticalOffset\\\" : 7,\\n                      \\\"numberFormat\\\" : \\\"###,##0.0##\\\"\\n                   }\\n                ]\\n             }\\n          }\\n    );\\n    series[1].pc = new PlotContainer(\\\"series1\\\", false, [plot]);\\n\\n\\n\\n\\n    $(window).resize(setSizes);\\n    setSizes();\\n};\\n\\nfunction setSizes() {\\n   dateAxis.setSize($('#dateAxis').width(), $(\\\"#dateAxis\\\").height(), SequenceNumber.getNext());\\n   for (var i = 0; i < 2; i++) {\\n     series[i].axis.setSize($('#series'+i+'axis').width(), $('#series'+i+'axis').height(), SequenceNumber.getNext());\\n     series[i].pc.setSize($('#series'+i).width(), $('#series'+i).height(), SequenceNumber.getNext());\\n   }\\n}\\n\\nfunction displayValue(val) {\\n   $(\\\"#valueLabel\\\").html(val ? val['dateString'] + \\\" \\\" + val['valueString'] : \\\"\\\");\\n}\\n\\n</scr\"+\"ipt>\\n</head>\\n<body>\\n<div style=\\\"width:100%; height:39px\\\">\\n<div id=\\\"dateAxis\\\" style=\\\"position: fixed; left:100px; right:30px; height:37px; border:1px solid black\\\"></div>\\n</div>\\n<div style=\\\"width:100%; height:75px; margin-top:-1px\\\">\\n<div id=\\\"series0title\\\" style=\\\"position: fixed; left:0px; width:99px; height:73px; border:1px solid black\\\"></div>\\n<div id=\\\"series0\\\" style=\\\"position: fixed; left:100px; right:30px; height:73px; border:1px solid black\\\"></div>\\n<div id=\\\"series0axis\\\" style=\\\"position: fixed; right:0px; width:29px; height:73px; border:1px solid black\\\"></div>\\n</div>\\n<div style=\\\"width:100%; height:75px; margin-top:-1px\\\">\\n<div id=\\\"series1title\\\" style=\\\"position: fixed; left:0px; width:99px; height:73px; border:1px solid black\\\"></div>\\n<div id=\\\"series1\\\" style=\\\"position: fixed; left:100px; right:30px; height:73px; border:1px solid black\\\"></div>\\n<div id=\\\"series1axis\\\" style=\\\"position: fixed; right:0px; width:29px; height:73px; border:1px solid black\\\"></div>\\n</div>\\n<canvas id=\\\"narrow\\\" style=\\\"width:100%; height:73px\\\"></canvas>\\n</body>\\n</html>\\n\";\n",
        "</script>\n"
       ],
       "metadata": {},
       "output_type": "pyout",
       "prompt_number": 10,
       "text": [
        "<IPython.core.display.HTML at 0x1064272d0>"
       ]
      }
     ],
     "prompt_number": 10
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}