Javascript functions in options.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "### Javascript functions in options\n",
    "\n",
    "For some options, Highcharts allows you to specify a javascript function to dynamically change the behavior of the option (See an [example](http://www.highcharts.com/docs/chart-concepts/tooltip#formatter)). However, when you specify such a function using for example a dictionary in Python, they will not be recognized due to the fact they get converted to JSON making javascript think they are just strings.\n",
    "\n",
    "Lets take a look at this behavior. We want to use a function to display the number of our chart as the tooltip. So we create an options dictionary containing this function: "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "options = {\n",
    "    'tooltip': {        \n",
    "        'formatter': 'function() { return this.point.y; }'\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When **Charts** sees this dictionary, it will convert it to json resulting in the following:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{\"tooltip\": {\"formatter\": \"function() { return this.point.y; }\"}}\n"
     ]
    }
   ],
   "source": [
    "import json\n",
    "json_options = json.dumps(options)\n",
    "print json_options"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When you try to plot this, the function will not be recognized and no tooltip will be shown:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Server running in the folder /Users/arnoutaertgeerts/Projects/python-highcharts at 127.0.0.1:54507\n"
     ]
    },
    {
     "data": {
      "text/html": [
       "<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}\n",
       "small{font-weight:400;display:block;font-size:14px}\n",
       "code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}\n",
       ".icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}\n",
       "@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}\n",
       ".icon.-facebook:before{content:\"\\e001\"}\n",
       ".icon.-linkedin:before{content:\"\\e002\"}\n",
       ".icon.-pinterest:before{content:\"\\e003\"}\n",
       ".icon.-twitter:before{content:\"\\e004\"}\n",
       ".social-icons h4{display:inline-block;margin:20px 10px 0 0}\n",
       ".social-icons .icon{display:inline-block;margin:0 5px}\n",
       "body.modal-open{overflow:hidden}\n",
       ".jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css\"/>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css\"/>\n",
       "\n",
       "<div class=\"container-fluid\">\n",
       "    <div class=\"row\">\n",
       "        <div class=\"col-sm-10\">\n",
       "            <input type=\"text\" id=\"variable-selector\">\n",
       "        </div>\n",
       "        <div class=\"col-sm-2\">\n",
       "            <button class=\"btn btn-default pull-right\" type=\"submit\" id=\"settings-button\">Settings</button>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div class=\"collapse col-xs-12\" id=\"settings-collapse\">\n",
       "            <div class=\"panel panel-default\" style=\"margin-top: 20px\">\n",
       "                <div class=\"panel-heading\"><h3 class=\"panel-title\">Adjust chart settings</h3></div>\n",
       "                <div class=\"panel-body\">\n",
       "                    <div class=\"row\">\n",
       "                        <div id=\"jsoneditor\" class=\"col-md-12\" style=\"height: 350px\"></div>\n",
       "                    </div>\n",
       "                    <div class=\"row\" style=\"margin-top: 10px\">\n",
       "                        <div class=\"col-sm-4\">\n",
       "                            <button type=\"button\" class=\"btn btn-primary\" id=\"save-settings\">\n",
       "                                Apply changes\n",
       "                            </button>\n",
       "                        </div>\n",
       "                        <div class=\"col-sm-8 text-right \">\n",
       "                            <form class=\"form-inline\">\n",
       "                                <div class=\"form-group\">\n",
       "                                    <div class=\"input-group\">\n",
       "                                        <input type=\"text\" class=\"form-control\" id=\"options-input\"\n",
       "                                               placeholder=\"settings\" style=\"text-align: right\">\n",
       "                                        <div class=\"input-group-addon\"><strong>.json</strong></div>\n",
       "                                    </div>\n",
       "                                </div>\n",
       "                                <button type=\"submit\" class=\"btn btn-primary\" id=\"options-button\">Save</button>\n",
       "                            </form>\n",
       "\n",
       "                        </div>\n",
       "                    </div>\n",
       "                </div>\n",
       "            </div>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div id=\"chart-container\" style=\"min-width: 310px;\"></div>\n",
       "    </div>\n",
       "</div>\n",
       "\n",
       "\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js\"></script>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//findIndex polyfill\n",
       "if (!Array.prototype.findIndex) {\n",
       "    Array.prototype.findIndex = function(predicate) {\n",
       "        if (this == null) {\n",
       "            throw new TypeError('Array.prototype.findIndex called on null or undefined');\n",
       "        }\n",
       "        if (typeof predicate !== 'function') {\n",
       "            throw new TypeError('predicate must be a function');\n",
       "        }\n",
       "        var list = Object(this);\n",
       "        var length = list.length >>> 0;\n",
       "        var thisArg = arguments[1];\n",
       "        var value;\n",
       "\n",
       "        for (var i = 0; i < length; i++) {\n",
       "            value = list[i];\n",
       "            if (predicate.call(thisArg, value, i, list)) {\n",
       "                return i;\n",
       "            }\n",
       "        }\n",
       "        return -1;\n",
       "    };\n",
       "}\n",
       "\n",
       "if (!Array.prototype.filter) {\n",
       "    Array.prototype.filter = function(fun/*, thisArg*/) {\n",
       "        'use strict';\n",
       "\n",
       "        if (this === void 0 || this === null) {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var t = Object(this);\n",
       "        var len = t.length >>> 0;\n",
       "        if (typeof fun !== 'function') {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var res = [];\n",
       "        var thisArg = arguments.length >= 2 ? arguments[1] : void 0;\n",
       "        for (var i = 0; i < len; i++) {\n",
       "            if (i in t) {\n",
       "                var val = t[i];\n",
       "\n",
       "                // NOTE: Technically this should Object.defineProperty at\n",
       "                //       the next index, as push can be affected by\n",
       "                //       properties on Object.prototype and Array.prototype.\n",
       "                //       But that method's new, and collisions should be\n",
       "                //       rare, so use the more-compatible alternative.\n",
       "                if (fun.call(thisArg, val, i, t)) {\n",
       "                    res.push(val);\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return res;\n",
       "    };\n",
       "}\n",
       "\n",
       "function guid() {\n",
       "    function s4() {\n",
       "        return Math.floor((1 + Math.random()) * 0x10000)\n",
       "            .toString(16)\n",
       "            .substring(1);\n",
       "    }\n",
       "    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "        s4() + '-' + s4() + s4() + s4();\n",
       "}\n",
       "\n",
       "Array.prototype.equals = function (array) {\n",
       "    // if the other array is a false value, return\n",
       "    if (!array)\n",
       "        return false;\n",
       "\n",
       "    // compare lengths - can save a lot of time\n",
       "    if (this.length != array.length)\n",
       "        return false;\n",
       "\n",
       "    for (var i = 0, l = this.length; i < l; i++) {\n",
       "        // Check if we have nested arrays\n",
       "        if (this[i] instanceof Array && array[i] instanceof Array) {\n",
       "            // recurse into the nested arrays\n",
       "            if (!this[i].equals(array[i]))\n",
       "                return false;\n",
       "        }\n",
       "        else if (this[i] != array[i]) {\n",
       "            // Warning - two different object instances will never be equal: {x:20} != {x:20}\n",
       "            return false;\n",
       "        }\n",
       "    }\n",
       "    return true;\n",
       "};\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "\n",
       "\n",
       "requirejs.config({\n",
       "    \"paths\": {\n",
       "        \"highstock\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock\",\n",
       "        \"export\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting\",\n",
       "        \"more\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more\",\n",
       "        \"jsoneditor\": \"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min\",\n",
       "        \"selectize\": \"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min\",\n",
       "        \"jquery\": \"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min\"\n",
       "    },\n",
       "    \"shim\": {\n",
       "        \"export\": [\"highstock\"],\n",
       "        \"more\": [\"highstock\"]\n",
       "    }\n",
       "});\n",
       "\n",
       "//Define jquery here to use the pre-loaded version\n",
       "define('jquery', [], function() {\n",
       "    return jQuery;\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//Count the number of charts on the page\n",
       "if (window.counter == undefined) {\n",
       "    window.counter = 0;\n",
       "} else {\n",
       "    window.counter++;\n",
       "}\n",
       "\n",
       "requirejs([\n",
       "    'jquery',\n",
       "    'selectize',\n",
       "    'jsoneditor',\n",
       "    'highstock',\n",
       "    'export',\n",
       "    'more'\n",
       "], function ($, selectize, JSONEditor) {\n",
       "\n",
       "    function guid() {\n",
       "        function s4() {\n",
       "            return Math.floor((1 + Math.random()) * 0x10000)\n",
       "                .toString(16)\n",
       "                .substring(1);\n",
       "        }\n",
       "\n",
       "        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "            s4() + '-' + s4() + s4() + s4();\n",
       "    }\n",
       "\n",
       "    var id = guid();\n",
       "    plot(id);\n",
       "\n",
       "    function plot(id) {\n",
       "        var series = [\n",
       "            {data: [1, 2, 4, 9], name: \"temperature 1\", display: true, color: '#2b908f'},\n",
       "            {data: [9, 4, 2, 1], name: \"temperature 2\", display: true},\n",
       "            {data: [0, 3, 5, 6], name: \"temperature 3\", display: false}\n",
       "        ];\n",
       "        var series = [{\"data\": [[1, 2, 3], [2, 3, 4], [3, 4, 5]], \"display\": true}]\n",
       "        var options = {};\n",
       "        var options = {\"scale\": 2, \"chart\": {\"type\": \"line\"}, \"tooltip\": {\"formatter\": \"function() { return this.point.y; }\"}, \"height\": 400, \"width\": \"auto\", \"type\": \"line\"}\n",
       "        var useHighStock = false;\n",
       "        var useHighStock = false\n",
       "        var save = 'app/chart.svg';\n",
       "        var save = false\n",
       "        var url = 'http://127.0.0.1:65079';\n",
       "        var url = \"http://127.0.0.1:54507/\"\n",
       "        var settingsFile = 'settings';\n",
       "        var settingsFile = \"settings\"\n",
       "        var scale = options.scale;\n",
       "\n",
       "        //Create different containers for the charts\n",
       "        var chartContainer = document.getElementById(\"chart-container\");\n",
       "        chartContainer.id = \"chart-container\" + id;\n",
       "        chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "        if (options.width != 'auto') {\n",
       "            chartContainer.style.width = options.width.toString() + 'px';\n",
       "        }\n",
       "\n",
       "        var selector = $(\"#variable-selector\");\n",
       "        selector.attr('id', \"variable-selector\" + id);\n",
       "\n",
       "        var settings = $(\"#settings-collapse\");\n",
       "        settings.attr('id', \"settings-collapse\" + id);\n",
       "\n",
       "        var button = $(\"#settings-button\");\n",
       "        button.attr('id', \"settings-button\" + id);\n",
       "\n",
       "        var saveButton = $(\"#save-settings\");\n",
       "        saveButton.attr('id', \"save-settings\" + id);\n",
       "\n",
       "        var optionsInput = $(\"#options-input\");\n",
       "        optionsInput.attr('id', \"options-input\" + id);\n",
       "        optionsInput.val(settingsFile);\n",
       "\n",
       "        var optionsButton = $(\"#options-button\");\n",
       "        optionsButton.attr('id', \"options-button\" + id);\n",
       "\n",
       "        // create the editor\n",
       "        var editorContainer = document.getElementById(\"jsoneditor\");\n",
       "        editorContainer.id = \"jsoneditor\" + id;\n",
       "        var editor = new JSONEditor(editorContainer);\n",
       "\n",
       "        button.on('click', showSettings);\n",
       "        saveButton.on('click', applyOptions);\n",
       "        optionsButton.on('click', saveOptions);\n",
       "\n",
       "        function applyOptions() {\n",
       "            var newOptions = editor.get();\n",
       "            setOptions(newOptions);\n",
       "            settings.collapse('hide');\n",
       "        }\n",
       "\n",
       "        function saveOptions(event) {\n",
       "            event.preventDefault();\n",
       "\n",
       "            applyOptions();\n",
       "\n",
       "            var options = chart.options;\n",
       "            delete options.exporting;\n",
       "\n",
       "            var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';\n",
       "\n",
       "            options['settingsFile'] = name;\n",
       "\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    options: options,\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        function showSettings() {\n",
       "            settings.collapse('toggle');\n",
       "        }\n",
       "\n",
       "        //Choose a chart type\n",
       "        var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;\n",
       "\n",
       "        //Default highchart colors\n",
       "        var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',\n",
       "            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];\n",
       "\n",
       "        series.map(function (serie, index) {\n",
       "            if (!serie.color) {\n",
       "                serie['color'] = colors[index % 10];\n",
       "            }\n",
       "\n",
       "            return serie;\n",
       "        });\n",
       "\n",
       "        //Get all the keys\n",
       "        var keys = [];\n",
       "        var initialKeys = [];\n",
       "        $.each(series, function (index, serie) {\n",
       "            keys.push({\n",
       "                display: serie.display,\n",
       "                value: serie.name,\n",
       "                text: serie.name\n",
       "            });\n",
       "\n",
       "            if (serie.display) {\n",
       "                initialKeys.push(serie.name)\n",
       "            }\n",
       "        });\n",
       "\n",
       "        selector.selectize({\n",
       "            plugins: ['remove_button', 'restore_on_backspace'],\n",
       "            delimiter: ',',\n",
       "            options: keys,\n",
       "            items: initialKeys,\n",
       "            onItemAdd: function (key) {\n",
       "                console.log('series added');\n",
       "                addSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            },\n",
       "            onItemRemove: function (key) {\n",
       "                console.log('series removed');\n",
       "                deleteSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            }\n",
       "        });\n",
       "\n",
       "        //Set initial chart options\n",
       "        var chartOptions;\n",
       "        if (typeof options.chart === \"undefined\") {\n",
       "            chartOptions = {renderTo: chartContainer.id};\n",
       "        } else {\n",
       "            chartOptions = $.extend(options[\"chart\"], {renderTo: chartContainer.id});\n",
       "        }\n",
       "\n",
       "        //Initial rendered series\n",
       "        var renderedSeries = [];\n",
       "        options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});\n",
       "        var chart = new ChartType(options);\n",
       "\n",
       "        $.each(initialKeys, function (index, key) {\n",
       "            addSeries(key);\n",
       "        });\n",
       "\n",
       "        newChart(chart.options, renderedSeries);\n",
       "        editor.set(chart.options);\n",
       "\n",
       "        if (save) {\n",
       "            saveSVG(url, save)\n",
       "        }\n",
       "\n",
       "        function setOptions(options) {\n",
       "            //Prevent export from breaking\n",
       "            delete options.exporting;\n",
       "            options['exporting'] = {scale: options.scale};\n",
       "\n",
       "            chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "            if (options.width != 'auto') {\n",
       "                chartContainer.style.width = options.width.toString() + 'px';\n",
       "            }\n",
       "\n",
       "            newChart(options, renderedSeries);\n",
       "\n",
       "        }\n",
       "\n",
       "        function findSeries(series, key) {\n",
       "            return series.findIndex(function (obj) {\n",
       "                return obj.name == key;\n",
       "            })\n",
       "        }\n",
       "\n",
       "        function newChart(options, series) {\n",
       "            //Disable animation\n",
       "            var newOptions = $.extend(options, {series: series});\n",
       "            newOptions.plotOptions['series'] = {animation: false};\n",
       "\n",
       "            //Get zoom\n",
       "            var xExtremes = chart.xAxis[0].getExtremes();\n",
       "\n",
       "            //Re-plot the chart\n",
       "            chart.destroy();\n",
       "            chart = new ChartType(newOptions);\n",
       "\n",
       "            //Reset the zoom\n",
       "            chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);\n",
       "\n",
       "            //Re-draw chart\n",
       "            chart.redraw();\n",
       "        }\n",
       "\n",
       "        function addSeries(key) {\n",
       "            var index = findSeries(series, key);\n",
       "            var newSeries = series[index];\n",
       "            renderedSeries.push(newSeries)\n",
       "        }\n",
       "\n",
       "        function deleteSeries(key) {\n",
       "            var index = findSeries(renderedSeries, key);\n",
       "            renderedSeries.splice(index, 1)\n",
       "        }\n",
       "\n",
       "        function saveSVG(url, name) {\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    svg: chart.getSVG(),\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        console.log('loaded!', Date());\n",
       "    }\n",
       "\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import charts\n",
    "series = [{\n",
    "    'data': [[1, 2, 3], [2, 3, 4], [3, 4, 5]]\n",
    "}]\n",
    "\n",
    "charts.plot(series, options=options, show='inline', type='line')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As you can see, the function is formatted as a string and their is no way for javascript to know it actually is a function... To achieve the right behavior, you have to let **Charts** know you don't want the javascript function to be surrounded by double quotes. You can do this by adding `\"@#\"` before the function keyword and after the final closing bracket `}`.\n",
    "\n",
    "Let's try this:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "options = {\n",
    "    \"tooltip\": {\n",
    "        \"formatter\": \"@#function() { return this.series.name + '<br/>' + this.point.y }@#\"\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#555;font-family:sans-serif}\n",
       "small{font-weight:400;display:block;font-size:14px}\n",
       "code{background-color:#d3d3d3;border-radius:3px;font-family:monospace;padding:0 .5em}\n",
       ".icon.-facebook:before,.icon.-linkedin:before,.icon.-pinterest:before,.icon.-twitter:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Post-Creator-Icons;font-style:normal;font-variant:normal;font-weight:400;line-height:1;speak:none;text-transform:none}\n",
       "@font-face{font-family:Post-Creator-Icons;src:url(fonts/Post-Creator-Icons.eot);src:url(fonts/Post-Creator-Icons.eot?#iefix) format('embedded-opentype'),url(fonts/Post-Creator-Icons.woff) format('woff'),url(fonts/Post-Creator-Icons.ttf) format('truetype'),url(fonts/Post-Creator-Icons.svg#Post-Creator-Icons) format('svg');font-weight:400;font-style:normal}\n",
       ".icon.-facebook:before{content:\"\\e001\"}\n",
       ".icon.-linkedin:before{content:\"\\e002\"}\n",
       ".icon.-pinterest:before{content:\"\\e003\"}\n",
       ".icon.-twitter:before{content:\"\\e004\"}\n",
       ".social-icons h4{display:inline-block;margin:20px 10px 0 0}\n",
       ".social-icons .icon{display:inline-block;margin:0 5px}\n",
       "body.modal-open{overflow:hidden}\n",
       ".jsoneditor table,.jsoneditor td,.jsoneditor td.tree,.jsoneditor tr{border:none;margin:0}</style>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.default.min.css\"/>\n",
       "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min.css\"/>\n",
       "\n",
       "<div class=\"container-fluid\">\n",
       "    <div class=\"row\">\n",
       "        <div class=\"col-sm-10\">\n",
       "            <input type=\"text\" id=\"variable-selector\">\n",
       "        </div>\n",
       "        <div class=\"col-sm-2\">\n",
       "            <button class=\"btn btn-default pull-right\" type=\"submit\" id=\"settings-button\">Settings</button>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div class=\"collapse col-xs-12\" id=\"settings-collapse\">\n",
       "            <div class=\"panel panel-default\" style=\"margin-top: 20px\">\n",
       "                <div class=\"panel-heading\"><h3 class=\"panel-title\">Adjust chart settings</h3></div>\n",
       "                <div class=\"panel-body\">\n",
       "                    <div class=\"row\">\n",
       "                        <div id=\"jsoneditor\" class=\"col-md-12\" style=\"height: 350px\"></div>\n",
       "                    </div>\n",
       "                    <div class=\"row\" style=\"margin-top: 10px\">\n",
       "                        <div class=\"col-sm-4\">\n",
       "                            <button type=\"button\" class=\"btn btn-primary\" id=\"save-settings\">\n",
       "                                Apply changes\n",
       "                            </button>\n",
       "                        </div>\n",
       "                        <div class=\"col-sm-8 text-right \">\n",
       "                            <form class=\"form-inline\">\n",
       "                                <div class=\"form-group\">\n",
       "                                    <div class=\"input-group\">\n",
       "                                        <input type=\"text\" class=\"form-control\" id=\"options-input\"\n",
       "                                               placeholder=\"settings\" style=\"text-align: right\">\n",
       "                                        <div class=\"input-group-addon\"><strong>.json</strong></div>\n",
       "                                    </div>\n",
       "                                </div>\n",
       "                                <button type=\"submit\" class=\"btn btn-primary\" id=\"options-button\">Save</button>\n",
       "                            </form>\n",
       "\n",
       "                        </div>\n",
       "                    </div>\n",
       "                </div>\n",
       "            </div>\n",
       "        </div>\n",
       "    </div>\n",
       "\n",
       "    <div class=\"row\">\n",
       "        <div id=\"chart-container\" style=\"min-width: 310px;\"></div>\n",
       "    </div>\n",
       "</div>\n",
       "\n",
       "\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>\n",
       "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.18/require.min.js\"></script>\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//findIndex polyfill\n",
       "if (!Array.prototype.findIndex) {\n",
       "    Array.prototype.findIndex = function(predicate) {\n",
       "        if (this == null) {\n",
       "            throw new TypeError('Array.prototype.findIndex called on null or undefined');\n",
       "        }\n",
       "        if (typeof predicate !== 'function') {\n",
       "            throw new TypeError('predicate must be a function');\n",
       "        }\n",
       "        var list = Object(this);\n",
       "        var length = list.length >>> 0;\n",
       "        var thisArg = arguments[1];\n",
       "        var value;\n",
       "\n",
       "        for (var i = 0; i < length; i++) {\n",
       "            value = list[i];\n",
       "            if (predicate.call(thisArg, value, i, list)) {\n",
       "                return i;\n",
       "            }\n",
       "        }\n",
       "        return -1;\n",
       "    };\n",
       "}\n",
       "\n",
       "if (!Array.prototype.filter) {\n",
       "    Array.prototype.filter = function(fun/*, thisArg*/) {\n",
       "        'use strict';\n",
       "\n",
       "        if (this === void 0 || this === null) {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var t = Object(this);\n",
       "        var len = t.length >>> 0;\n",
       "        if (typeof fun !== 'function') {\n",
       "            throw new TypeError();\n",
       "        }\n",
       "\n",
       "        var res = [];\n",
       "        var thisArg = arguments.length >= 2 ? arguments[1] : void 0;\n",
       "        for (var i = 0; i < len; i++) {\n",
       "            if (i in t) {\n",
       "                var val = t[i];\n",
       "\n",
       "                // NOTE: Technically this should Object.defineProperty at\n",
       "                //       the next index, as push can be affected by\n",
       "                //       properties on Object.prototype and Array.prototype.\n",
       "                //       But that method's new, and collisions should be\n",
       "                //       rare, so use the more-compatible alternative.\n",
       "                if (fun.call(thisArg, val, i, t)) {\n",
       "                    res.push(val);\n",
       "                }\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return res;\n",
       "    };\n",
       "}\n",
       "\n",
       "function guid() {\n",
       "    function s4() {\n",
       "        return Math.floor((1 + Math.random()) * 0x10000)\n",
       "            .toString(16)\n",
       "            .substring(1);\n",
       "    }\n",
       "    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "        s4() + '-' + s4() + s4() + s4();\n",
       "}\n",
       "\n",
       "Array.prototype.equals = function (array) {\n",
       "    // if the other array is a false value, return\n",
       "    if (!array)\n",
       "        return false;\n",
       "\n",
       "    // compare lengths - can save a lot of time\n",
       "    if (this.length != array.length)\n",
       "        return false;\n",
       "\n",
       "    for (var i = 0, l = this.length; i < l; i++) {\n",
       "        // Check if we have nested arrays\n",
       "        if (this[i] instanceof Array && array[i] instanceof Array) {\n",
       "            // recurse into the nested arrays\n",
       "            if (!this[i].equals(array[i]))\n",
       "                return false;\n",
       "        }\n",
       "        else if (this[i] != array[i]) {\n",
       "            // Warning - two different object instances will never be equal: {x:20} != {x:20}\n",
       "            return false;\n",
       "        }\n",
       "    }\n",
       "    return true;\n",
       "};\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "\n",
       "\n",
       "requirejs.config({\n",
       "    \"paths\": {\n",
       "        \"highstock\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/highstock\",\n",
       "        \"export\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.5/modules/exporting\",\n",
       "        \"more\": \"https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highcharts-more\",\n",
       "        \"jsoneditor\": \"https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/4.2.0/jsoneditor.min\",\n",
       "        \"selectize\": \"https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min\",\n",
       "        \"jquery\": \"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min\"\n",
       "    },\n",
       "    \"shim\": {\n",
       "        \"export\": [\"highstock\"],\n",
       "        \"more\": [\"highstock\"]\n",
       "    }\n",
       "});\n",
       "\n",
       "//Define jquery here to use the pre-loaded version\n",
       "define('jquery', [], function() {\n",
       "    return jQuery;\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "<script>(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){\n",
       "//Count the number of charts on the page\n",
       "if (window.counter == undefined) {\n",
       "    window.counter = 0;\n",
       "} else {\n",
       "    window.counter++;\n",
       "}\n",
       "\n",
       "requirejs([\n",
       "    'jquery',\n",
       "    'selectize',\n",
       "    'jsoneditor',\n",
       "    'highstock',\n",
       "    'export',\n",
       "    'more'\n",
       "], function ($, selectize, JSONEditor) {\n",
       "\n",
       "    function guid() {\n",
       "        function s4() {\n",
       "            return Math.floor((1 + Math.random()) * 0x10000)\n",
       "                .toString(16)\n",
       "                .substring(1);\n",
       "        }\n",
       "\n",
       "        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +\n",
       "            s4() + '-' + s4() + s4() + s4();\n",
       "    }\n",
       "\n",
       "    var id = guid();\n",
       "    plot(id);\n",
       "\n",
       "    function plot(id) {\n",
       "        var series = [\n",
       "            {data: [1, 2, 4, 9], name: \"temperature 1\", display: true, color: '#2b908f'},\n",
       "            {data: [9, 4, 2, 1], name: \"temperature 2\", display: true},\n",
       "            {data: [0, 3, 5, 6], name: \"temperature 3\", display: false}\n",
       "        ];\n",
       "        var series = [{\"data\": [[1, 2, 3], [2, 3, 4], [3, 4, 5]], \"display\": true}]\n",
       "        var options = {};\n",
       "        var options = {\"scale\": 2, \"chart\": {\"type\": \"line\"}, \"tooltip\": {\"formatter\": function() { return this.series.name + '<br/>' + this.point.y }}, \"height\": 400, \"width\": \"auto\", \"type\": \"line\"}\n",
       "        var useHighStock = false;\n",
       "        var useHighStock = false\n",
       "        var save = 'app/chart.svg';\n",
       "        var save = false\n",
       "        var url = 'http://127.0.0.1:65079';\n",
       "        var url = \"http://127.0.0.1:54507/\"\n",
       "        var settingsFile = 'settings';\n",
       "        var settingsFile = \"settings\"\n",
       "        var scale = options.scale;\n",
       "\n",
       "        //Create different containers for the charts\n",
       "        var chartContainer = document.getElementById(\"chart-container\");\n",
       "        chartContainer.id = \"chart-container\" + id;\n",
       "        chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "        if (options.width != 'auto') {\n",
       "            chartContainer.style.width = options.width.toString() + 'px';\n",
       "        }\n",
       "\n",
       "        var selector = $(\"#variable-selector\");\n",
       "        selector.attr('id', \"variable-selector\" + id);\n",
       "\n",
       "        var settings = $(\"#settings-collapse\");\n",
       "        settings.attr('id', \"settings-collapse\" + id);\n",
       "\n",
       "        var button = $(\"#settings-button\");\n",
       "        button.attr('id', \"settings-button\" + id);\n",
       "\n",
       "        var saveButton = $(\"#save-settings\");\n",
       "        saveButton.attr('id', \"save-settings\" + id);\n",
       "\n",
       "        var optionsInput = $(\"#options-input\");\n",
       "        optionsInput.attr('id', \"options-input\" + id);\n",
       "        optionsInput.val(settingsFile);\n",
       "\n",
       "        var optionsButton = $(\"#options-button\");\n",
       "        optionsButton.attr('id', \"options-button\" + id);\n",
       "\n",
       "        // create the editor\n",
       "        var editorContainer = document.getElementById(\"jsoneditor\");\n",
       "        editorContainer.id = \"jsoneditor\" + id;\n",
       "        var editor = new JSONEditor(editorContainer);\n",
       "\n",
       "        button.on('click', showSettings);\n",
       "        saveButton.on('click', applyOptions);\n",
       "        optionsButton.on('click', saveOptions);\n",
       "\n",
       "        function applyOptions() {\n",
       "            var newOptions = editor.get();\n",
       "            setOptions(newOptions);\n",
       "            settings.collapse('hide');\n",
       "        }\n",
       "\n",
       "        function saveOptions(event) {\n",
       "            event.preventDefault();\n",
       "\n",
       "            applyOptions();\n",
       "\n",
       "            var options = chart.options;\n",
       "            delete options.exporting;\n",
       "\n",
       "            var name = optionsInput.val() ? optionsInput.val() + '.json' : 'settings.json';\n",
       "\n",
       "            options['settingsFile'] = name;\n",
       "\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    options: options,\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        function showSettings() {\n",
       "            settings.collapse('toggle');\n",
       "        }\n",
       "\n",
       "        //Choose a chart type\n",
       "        var ChartType = useHighStock ? Highcharts.StockChart : Highcharts.Chart;\n",
       "\n",
       "        //Default highchart colors\n",
       "        var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',\n",
       "            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];\n",
       "\n",
       "        series.map(function (serie, index) {\n",
       "            if (!serie.color) {\n",
       "                serie['color'] = colors[index % 10];\n",
       "            }\n",
       "\n",
       "            return serie;\n",
       "        });\n",
       "\n",
       "        //Get all the keys\n",
       "        var keys = [];\n",
       "        var initialKeys = [];\n",
       "        $.each(series, function (index, serie) {\n",
       "            keys.push({\n",
       "                display: serie.display,\n",
       "                value: serie.name,\n",
       "                text: serie.name\n",
       "            });\n",
       "\n",
       "            if (serie.display) {\n",
       "                initialKeys.push(serie.name)\n",
       "            }\n",
       "        });\n",
       "\n",
       "        selector.selectize({\n",
       "            plugins: ['remove_button', 'restore_on_backspace'],\n",
       "            delimiter: ',',\n",
       "            options: keys,\n",
       "            items: initialKeys,\n",
       "            onItemAdd: function (key) {\n",
       "                console.log('series added');\n",
       "                addSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            },\n",
       "            onItemRemove: function (key) {\n",
       "                console.log('series removed');\n",
       "                deleteSeries(key);\n",
       "                newChart(chart.options, renderedSeries);\n",
       "            }\n",
       "        });\n",
       "\n",
       "        //Set initial chart options\n",
       "        var chartOptions;\n",
       "        if (typeof options.chart === \"undefined\") {\n",
       "            chartOptions = {renderTo: chartContainer.id};\n",
       "        } else {\n",
       "            chartOptions = $.extend(options[\"chart\"], {renderTo: chartContainer.id});\n",
       "        }\n",
       "\n",
       "        //Initial rendered series\n",
       "        var renderedSeries = [];\n",
       "        options = $.extend(options, {chart: chartOptions}, {series: renderedSeries});\n",
       "        var chart = new ChartType(options);\n",
       "\n",
       "        $.each(initialKeys, function (index, key) {\n",
       "            addSeries(key);\n",
       "        });\n",
       "\n",
       "        newChart(chart.options, renderedSeries);\n",
       "        editor.set(chart.options);\n",
       "\n",
       "        if (save) {\n",
       "            saveSVG(url, save)\n",
       "        }\n",
       "\n",
       "        function setOptions(options) {\n",
       "            //Prevent export from breaking\n",
       "            delete options.exporting;\n",
       "            options['exporting'] = {scale: options.scale};\n",
       "\n",
       "            chartContainer.style.height = options.height.toString() + 'px';\n",
       "\n",
       "            if (options.width != 'auto') {\n",
       "                chartContainer.style.width = options.width.toString() + 'px';\n",
       "            }\n",
       "\n",
       "            newChart(options, renderedSeries);\n",
       "\n",
       "        }\n",
       "\n",
       "        function findSeries(series, key) {\n",
       "            return series.findIndex(function (obj) {\n",
       "                return obj.name == key;\n",
       "            })\n",
       "        }\n",
       "\n",
       "        function newChart(options, series) {\n",
       "            //Disable animation\n",
       "            var newOptions = $.extend(options, {series: series});\n",
       "            newOptions.plotOptions['series'] = {animation: false};\n",
       "\n",
       "            //Get zoom\n",
       "            var xExtremes = chart.xAxis[0].getExtremes();\n",
       "\n",
       "            //Re-plot the chart\n",
       "            chart.destroy();\n",
       "            chart = new ChartType(newOptions);\n",
       "\n",
       "            //Reset the zoom\n",
       "            chart.xAxis[0].setExtremes(xExtremes.min, xExtremes.max, false, false);\n",
       "\n",
       "            //Re-draw chart\n",
       "            chart.redraw();\n",
       "        }\n",
       "\n",
       "        function addSeries(key) {\n",
       "            var index = findSeries(series, key);\n",
       "            var newSeries = series[index];\n",
       "            renderedSeries.push(newSeries)\n",
       "        }\n",
       "\n",
       "        function deleteSeries(key) {\n",
       "            var index = findSeries(renderedSeries, key);\n",
       "            renderedSeries.splice(index, 1)\n",
       "        }\n",
       "\n",
       "        function saveSVG(url, name) {\n",
       "            $.ajax({\n",
       "                type: \"POST\",\n",
       "                url: url,\n",
       "                data: JSON.stringify({\n",
       "                    svg: chart.getSVG(),\n",
       "                    name: name\n",
       "                })\n",
       "            });\n",
       "        }\n",
       "\n",
       "        console.log('loaded!', Date());\n",
       "    }\n",
       "\n",
       "});\n",
       "\n",
       "},{}]},{},[1]);\n",
       "</script>\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "charts.plot(series, options=options, show='inline', type='line')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By using the `\"@#\"` character sequence, you can let **Charts** know you don't want the function to be stringified and it will remove the quotes after the JSON is parsed!"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}