demo_ezhc_themes_and_global_options.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require([\"jquery\", \"https://code.highcharts.com/stock/highstock.js\", \"https://d3js.org/d3.v3.min.js\"], function() {\n",
       "    require([\"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js\", \"https://code.highcharts.com/stock/highcharts-more.js\", \"https://code.highcharts.com/modules/drilldown.js\", \"https://code.highcharts.com/modules/exporting.js\", \"https://code.highcharts.com/modules/heatmap.js\", \"https://code.highcharts.com/modules/treemap.js\", \"https://code.highcharts.com/modules/sunburst.js\", \"https://highcharts.github.io/export-csv/export-csv.js\"], function() {\n",
       "        console.log(\"The following js libs loaded:\");\n",
       "        console.log(\"First:\");\n",
       "        console.log(\"jquery\");console.log(\"https://code.highcharts.com/stock/highstock.js\");console.log(\"https://d3js.org/d3.v3.min.js\");\n",
       "        console.log(\"Then:\");\n",
       "        console.log(\"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js\");console.log(\"https://code.highcharts.com/stock/highcharts-more.js\");console.log(\"https://code.highcharts.com/modules/drilldown.js\");console.log(\"https://code.highcharts.com/modules/exporting.js\");console.log(\"https://code.highcharts.com/modules/heatmap.js\");console.log(\"https://code.highcharts.com/modules/treemap.js\");console.log(\"https://code.highcharts.com/modules/sunburst.js\");console.log(\"https://highcharts.github.io/export-csv/export-csv.js\");\n",
       "    });\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%load_ext autoreload\n",
    "%autoreload 2\n",
    "\n",
    "import os\n",
    "import ezhc as hc"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/json": {
       "Software versions": [
        {
         "module": "Python",
         "version": "3.6.3 64bit [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)]"
        },
        {
         "module": "IPython",
         "version": "6.2.1"
        },
        {
         "module": "OS",
         "version": "Darwin 16.7.0 x86_64 i386 64bit"
        },
        {
         "module": "ipython",
         "version": "6.2.1"
        },
        {
         "module": "ezhc",
         "version": "0.7.0"
        }
       ]
      },
      "text/html": [
       "<table><tr><th>Software</th><th>Version</th></tr><tr><td>Python</td><td>3.6.3 64bit [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)]</td></tr><tr><td>IPython</td><td>6.2.1</td></tr><tr><td>OS</td><td>Darwin 16.7.0 x86_64 i386 64bit</td></tr><tr><td>ipython</td><td>6.2.1</td></tr><tr><td>ezhc</td><td>0.7.0</td></tr><tr><td colspan='2'>Tue Jan 02 11:12:23 2018 CET</td></tr></table>"
      ],
      "text/latex": [
       "\\begin{tabular}{|l|l|}\\hline\n",
       "{\\bf Software} & {\\bf Version} \\\\ \\hline\\hline\n",
       "Python & 3.6.3 64bit [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE\\_401/final)] \\\\ \\hline\n",
       "IPython & 6.2.1 \\\\ \\hline\n",
       "OS & Darwin 16.7.0 x86\\_64 i386 64bit \\\\ \\hline\n",
       "ipython & 6.2.1 \\\\ \\hline\n",
       "ezhc & 0.7.0 \\\\ \\hline\n",
       "\\hline \\multicolumn{2}{|l|}{Tue Jan 02 11:12:23 2018 CET} \\\\ \\hline\n",
       "\\end{tabular}\n"
      ],
      "text/plain": [
       "Software versions\n",
       "Python 3.6.3 64bit [GCC 4.2.1 Compatible Clang 4.0.1 (tags/RELEASE_401/final)]\n",
       "IPython 6.2.1\n",
       "OS Darwin 16.7.0 x86_64 i386 64bit\n",
       "ipython 6.2.1\n",
       "ezhc 0.7.0\n",
       "Tue Jan 02 11:12:23 2018 CET"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%version_information ipython, ezhc "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Themes\n",
    "+ Directly available in **ezhc**"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "\n",
       "Theme contains predtermined [Highcharts themes](https://github.com/highcharts/highcharts/tree/master/js/themes) available as properties\n",
       "```json\n",
       "['avocado', 'dark-blue', 'dark-green', 'dark-unica', 'gray', 'grid-light', 'grid', 'sand-signika', 'skies', 'sunset']\n",
       "```"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "th = hc.Theme()\n",
    "th.info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Global Options\n",
    "+ Can be accessed through the `GlobalOptions` class\n",
    "+ See the [Highcharts documentation](https://api.highcharts.com/highcharts/) to see which options are available\n",
    "+ To suppress the output of `inject()` set `verbose=False`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "\n",
       "Highcharts **global options** set in this cell:  \n",
       "```json\n",
       "{\"lang\":{\"decimalPoint\":\".\",\"thousandsSep\":\",\"}}\n",
       "```\n"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "        // the Jupyter notebook loads jquery.min.js  and require.js and at the top of the page\n",
       "        // then to make jquery available inside a require module\n",
       "        // the trick is http://www.manuel-strehl.de/dev/load_jquery_before_requirejs.en.html\n",
       "        define('jquery', [], function() {\n",
       "            return jQuery;\n",
       "        });\n",
       "\n",
       "        require([\"jquery\", \"https://code.highcharts.com/stock/highstock.js\", \"https://d3js.org/d3.v3.min.js\"], function() {\n",
       "            require([\"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js\", \"https://code.highcharts.com/stock/highcharts-more.js\", \"https://code.highcharts.com/modules/drilldown.js\", \"https://code.highcharts.com/modules/exporting.js\", \"https://code.highcharts.com/modules/heatmap.js\", \"https://code.highcharts.com/modules/treemap.js\", \"https://code.highcharts.com/modules/sunburst.js\", \"https://highcharts.github.io/export-csv/export-csv.js\"], function() {\n",
       "                \n",
       "        if (window.HCDefaults == undefined) {\n",
       "            window.HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {});\n",
       "            console.log('Highcharts global default options accessible as HCDefaults');\n",
       "        }\n",
       "        \n",
       "                \n",
       "        var options = {\"lang\":{\"decimalPoint\":\".\",\"thousandsSep\":\",\"}};\n",
       "        \n",
       "options = JSON.stringify(options);\n",
       "\n",
       "options = JSON.parse(options, function (key, value) {\n",
       "\n",
       "\tif (value && (typeof value === \"string\")) {\n",
       "\n",
       "\t\t\t\tvar check1 = (value.replace(/\\s+/g, '').replace(/\\r?\\n|\\r/g, '').substr(0, 8) == \"function\"),\n",
       "\t\t\tcheck2 = (value.replace(/\\s+/g, '').replace(/\\r?\\n|\\r/g, '').substr(0, 9) == \"(function\");\n",
       "\n",
       "\n",
       "\t\tif (check1) {\n",
       "\t\t\tvar startBody = value.indexOf('{') + 1;\n",
       "\t\t\tvar endBody = value.lastIndexOf('}');\n",
       "\t\t\tvar startArgs = value.indexOf('(') + 1;\n",
       "\t\t\tvar endArgs = value.indexOf(')');\n",
       "\n",
       "\t\t\treturn new Function(value.substring(startArgs, endArgs),\n",
       "\t\t\t\tvalue.substring(startBody, endBody));\n",
       "\t\t}\n",
       "\t\tif (check2) {\n",
       "\t\t\treturn eval(value);\n",
       "\t\t}\n",
       "\n",
       "\t}\n",
       "\n",
       "\treturn value;\n",
       "\n",
       "});\n",
       "        window.globalOptions = $.extend(true, {}, options);\n",
       "        console.log(globalOptions);\n",
       "        if (window.globalOptions == undefined) {\n",
       "            window.globalOptions = {};\n",
       "        }\n",
       "\n",
       "        console.log('Highcharts global options accessible as globalOptions');\n",
       "        \n",
       "                Highcharts.setOptions(options);\n",
       "            });\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "hc_global = hc.GlobalOptions({'lang': {'decimalPoint': '.', 'thousandsSep': ','}})\n",
    "hc_global.inject(verbose=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Themes as global options\n",
    "+ As described in the [documentation](https://www.highcharts.com/docs/chart-design-and-style/themes) it can be convenient to separate the styling of charts from the data\n",
    "+ This can be done through the `GlobalOptions` class as show here"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "\n",
       "Highcharts **global options** set in this cell:  \n",
       "```json\n",
       "{\"colors\":[\"#2b908f\",\"#90ee7e\",\"#f45b5b\",\"#7798BF\",\"#aaeeee\",\"#ff0066\",\"#eeaaee\",\"#55BF3B\",\"#DF5353\",\"#7798BF\",\"#aaeeee\"],\"chart\":{\"backgroundColor\":{\"linearGradient\":{\"x1\":0,\"y1\":0,\"x2\":1,\"y2\":1},\"stops\":[[0,\"#2a2a2b\"],[1,\"#3e3e40\"]]},\"style\":{\"fontFamily\":\"'Unica One', sans-serif\"},\"plotBorderColor\":\"#606063\"},\"title\":{\"style\":{\"color\":\"#E0E0E3\",\"textTransform\":\"uppercase\",\"fontSize\":\"20px\"}},\"subtitle\":{\"style\":{\"color\":\"#E0E0E3\",\"textTransform\":\"uppercase\"}},\"xAxis\":{\"gridLineColor\":\"#707073\",\"labels\":{\"style\":{\"color\":\"#E0E0E3\"}},\"lineColor\":\"#707073\",\"minorGridLineColor\":\"#505053\",\"tickColor\":\"#707073\",\"title\":{\"style\":{\"color\":\"#A0A0A3\"}}},\"yAxis\":{\"gridLineColor\":\"#707073\",\"labels\":{\"style\":{\"color\":\"#E0E0E3\"}},\"lineColor\":\"#707073\",\"minorGridLineColor\":\"#505053\",\"tickColor\":\"#707073\",\"tickWidth\":1,\"title\":{\"style\":{\"color\":\"#A0A0A3\"}}},\"tooltip\":{\"backgroundColor\":\"rgba(0, 0, 0, 0.85)\",\"style\":{\"color\":\"#F0F0F0\"}},\"plotOptions\":{\"series\":{\"dataLabels\":{\"color\":\"#B0B0B3\"},\"marker\":{\"lineColor\":\"#333\"}},\"boxplot\":{\"fillColor\":\"#505053\"},\"candlestick\":{\"lineColor\":\"white\"},\"errorbar\":{\"color\":\"white\"}},\"legend\":{\"itemStyle\":{\"color\":\"#E0E0E3\"},\"itemHoverStyle\":{\"color\":\"#FFF\"},\"itemHiddenStyle\":{\"color\":\"#606063\"}},\"credits\":{\"style\":{\"color\":\"#666\"}},\"labels\":{\"style\":{\"color\":\"#707073\"}},\"drilldown\":{\"activeAxisLabelStyle\":{\"color\":\"#F0F0F3\"},\"activeDataLabelStyle\":{\"color\":\"#F0F0F3\"}},\"navigation\":{\"buttonOptions\":{\"symbolStroke\":\"#DDDDDD\",\"theme\":{\"fill\":\"#505053\"}}},\"rangeSelector\":{\"buttonTheme\":{\"fill\":\"#505053\",\"stroke\":\"#000000\",\"style\":{\"color\":\"#CCC\"},\"states\":{\"hover\":{\"fill\":\"#707073\",\"stroke\":\"#000000\",\"style\":{\"color\":\"white\"}},\"select\":{\"fill\":\"#000003\",\"stroke\":\"#000000\",\"style\":{\"color\":\"white\"}}}},\"inputBoxBorderColor\":\"#505053\",\"inputStyle\":{\"backgroundColor\":\"#333\",\"color\":\"silver\"},\"labelStyle\":{\"color\":\"silver\"}},\"navigator\":{\"handles\":{\"backgroundColor\":\"#666\",\"borderColor\":\"#AAA\"},\"outlineColor\":\"#CCC\",\"maskFill\":\"rgba(255,255,255,0.1)\",\"series\":{\"color\":\"#7798BF\",\"lineColor\":\"#A6C7ED\"},\"xAxis\":{\"gridLineColor\":\"#505053\"}},\"scrollbar\":{\"barBackgroundColor\":\"#808083\",\"barBorderColor\":\"#808083\",\"buttonArrowColor\":\"#CCC\",\"buttonBackgroundColor\":\"#606063\",\"buttonBorderColor\":\"#606063\",\"rifleColor\":\"#FFF\",\"trackBackgroundColor\":\"#404043\",\"trackBorderColor\":\"#404043\"},\"legendBackgroundColor\":\"rgba(0, 0, 0, 0.5)\",\"background2\":\"#505053\",\"dataLabelsColor\":\"#B0B0B3\",\"textColor\":\"#C0C0C0\",\"contrastTextColor\":\"#F0F0F3\",\"maskColor\":\"rgba(255,255,255,0.3)\"}\n",
       "```\n"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "        // the Jupyter notebook loads jquery.min.js  and require.js and at the top of the page\n",
       "        // then to make jquery available inside a require module\n",
       "        // the trick is http://www.manuel-strehl.de/dev/load_jquery_before_requirejs.en.html\n",
       "        define('jquery', [], function() {\n",
       "            return jQuery;\n",
       "        });\n",
       "\n",
       "        require([\"jquery\", \"https://code.highcharts.com/stock/highstock.js\", \"https://d3js.org/d3.v3.min.js\"], function() {\n",
       "            require([\"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js\", \"https://code.highcharts.com/stock/highcharts-more.js\", \"https://code.highcharts.com/modules/drilldown.js\", \"https://code.highcharts.com/modules/exporting.js\", \"https://code.highcharts.com/modules/heatmap.js\", \"https://code.highcharts.com/modules/treemap.js\", \"https://code.highcharts.com/modules/sunburst.js\", \"https://highcharts.github.io/export-csv/export-csv.js\"], function() {\n",
       "                \n",
       "        if (window.HCDefaults == undefined) {\n",
       "            window.HCDefaults = $.extend(true, {}, Highcharts.getOptions(), {});\n",
       "            console.log('Highcharts global default options accessible as HCDefaults');\n",
       "        }\n",
       "        \n",
       "                \n",
       "        var options = {\"colors\":[\"#2b908f\",\"#90ee7e\",\"#f45b5b\",\"#7798BF\",\"#aaeeee\",\"#ff0066\",\"#eeaaee\",\"#55BF3B\",\"#DF5353\",\"#7798BF\",\"#aaeeee\"],\"chart\":{\"backgroundColor\":{\"linearGradient\":{\"x1\":0,\"y1\":0,\"x2\":1,\"y2\":1},\"stops\":[[0,\"#2a2a2b\"],[1,\"#3e3e40\"]]},\"style\":{\"fontFamily\":\"'Unica One', sans-serif\"},\"plotBorderColor\":\"#606063\"},\"title\":{\"style\":{\"color\":\"#E0E0E3\",\"textTransform\":\"uppercase\",\"fontSize\":\"20px\"}},\"subtitle\":{\"style\":{\"color\":\"#E0E0E3\",\"textTransform\":\"uppercase\"}},\"xAxis\":{\"gridLineColor\":\"#707073\",\"labels\":{\"style\":{\"color\":\"#E0E0E3\"}},\"lineColor\":\"#707073\",\"minorGridLineColor\":\"#505053\",\"tickColor\":\"#707073\",\"title\":{\"style\":{\"color\":\"#A0A0A3\"}}},\"yAxis\":{\"gridLineColor\":\"#707073\",\"labels\":{\"style\":{\"color\":\"#E0E0E3\"}},\"lineColor\":\"#707073\",\"minorGridLineColor\":\"#505053\",\"tickColor\":\"#707073\",\"tickWidth\":1,\"title\":{\"style\":{\"color\":\"#A0A0A3\"}}},\"tooltip\":{\"backgroundColor\":\"rgba(0, 0, 0, 0.85)\",\"style\":{\"color\":\"#F0F0F0\"}},\"plotOptions\":{\"series\":{\"dataLabels\":{\"color\":\"#B0B0B3\"},\"marker\":{\"lineColor\":\"#333\"}},\"boxplot\":{\"fillColor\":\"#505053\"},\"candlestick\":{\"lineColor\":\"white\"},\"errorbar\":{\"color\":\"white\"}},\"legend\":{\"itemStyle\":{\"color\":\"#E0E0E3\"},\"itemHoverStyle\":{\"color\":\"#FFF\"},\"itemHiddenStyle\":{\"color\":\"#606063\"}},\"credits\":{\"style\":{\"color\":\"#666\"}},\"labels\":{\"style\":{\"color\":\"#707073\"}},\"drilldown\":{\"activeAxisLabelStyle\":{\"color\":\"#F0F0F3\"},\"activeDataLabelStyle\":{\"color\":\"#F0F0F3\"}},\"navigation\":{\"buttonOptions\":{\"symbolStroke\":\"#DDDDDD\",\"theme\":{\"fill\":\"#505053\"}}},\"rangeSelector\":{\"buttonTheme\":{\"fill\":\"#505053\",\"stroke\":\"#000000\",\"style\":{\"color\":\"#CCC\"},\"states\":{\"hover\":{\"fill\":\"#707073\",\"stroke\":\"#000000\",\"style\":{\"color\":\"white\"}},\"select\":{\"fill\":\"#000003\",\"stroke\":\"#000000\",\"style\":{\"color\":\"white\"}}}},\"inputBoxBorderColor\":\"#505053\",\"inputStyle\":{\"backgroundColor\":\"#333\",\"color\":\"silver\"},\"labelStyle\":{\"color\":\"silver\"}},\"navigator\":{\"handles\":{\"backgroundColor\":\"#666\",\"borderColor\":\"#AAA\"},\"outlineColor\":\"#CCC\",\"maskFill\":\"rgba(255,255,255,0.1)\",\"series\":{\"color\":\"#7798BF\",\"lineColor\":\"#A6C7ED\"},\"xAxis\":{\"gridLineColor\":\"#505053\"}},\"scrollbar\":{\"barBackgroundColor\":\"#808083\",\"barBorderColor\":\"#808083\",\"buttonArrowColor\":\"#CCC\",\"buttonBackgroundColor\":\"#606063\",\"buttonBorderColor\":\"#606063\",\"rifleColor\":\"#FFF\",\"trackBackgroundColor\":\"#404043\",\"trackBorderColor\":\"#404043\"},\"legendBackgroundColor\":\"rgba(0, 0, 0, 0.5)\",\"background2\":\"#505053\",\"dataLabelsColor\":\"#B0B0B3\",\"textColor\":\"#C0C0C0\",\"contrastTextColor\":\"#F0F0F3\",\"maskColor\":\"rgba(255,255,255,0.3)\"};\n",
       "        \n",
       "options = JSON.stringify(options);\n",
       "\n",
       "options = JSON.parse(options, function (key, value) {\n",
       "\n",
       "\tif (value && (typeof value === \"string\")) {\n",
       "\n",
       "\t\t\t\tvar check1 = (value.replace(/\\s+/g, '').replace(/\\r?\\n|\\r/g, '').substr(0, 8) == \"function\"),\n",
       "\t\t\tcheck2 = (value.replace(/\\s+/g, '').replace(/\\r?\\n|\\r/g, '').substr(0, 9) == \"(function\");\n",
       "\n",
       "\n",
       "\t\tif (check1) {\n",
       "\t\t\tvar startBody = value.indexOf('{') + 1;\n",
       "\t\t\tvar endBody = value.lastIndexOf('}');\n",
       "\t\t\tvar startArgs = value.indexOf('(') + 1;\n",
       "\t\t\tvar endArgs = value.indexOf(')');\n",
       "\n",
       "\t\t\treturn new Function(value.substring(startArgs, endArgs),\n",
       "\t\t\t\tvalue.substring(startBody, endBody));\n",
       "\t\t}\n",
       "\t\tif (check2) {\n",
       "\t\t\treturn eval(value);\n",
       "\t\t}\n",
       "\n",
       "\t}\n",
       "\n",
       "\treturn value;\n",
       "\n",
       "});\n",
       "        window.globalOptions = $.extend(true, {}, options);\n",
       "        console.log(globalOptions);\n",
       "        if (window.globalOptions == undefined) {\n",
       "            window.globalOptions = {};\n",
       "        }\n",
       "\n",
       "        console.log('Highcharts global options accessible as globalOptions');\n",
       "        \n",
       "                Highcharts.setOptions(options);\n",
       "            });\n",
       "        });\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "hc_global = hc.GlobalOptions(th.themes['dark-unica'])\n",
    "hc_global.inject(verbose=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "scrolled": true
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"36526f8d_3f28_49fa_b4d1_0cd13c418010\"><div id=\"36526f8d_3f28_49fa_b4d1_0cd13c418010container_chart\"></div></div><script>\n",
       "    // the Jupyter notebook loads jquery.min.js  and require.js and at the top of the page\n",
       "    // then to make jquery available inside a require module\n",
       "    // the trick is http://www.manuel-strehl.de/dev/load_jquery_before_requirejs.en.html\n",
       "    define('jquery', [], function() {\n",
       "        return jQuery;\n",
       "    });\n",
       "\n",
       "    require([\"jquery\", \"https://code.highcharts.com/stock/highstock.js\", \"https://d3js.org/d3.v3.min.js\"], function() {\n",
       "        require([\"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js\", \"https://code.highcharts.com/stock/highcharts-more.js\", \"https://code.highcharts.com/modules/drilldown.js\", \"https://code.highcharts.com/modules/exporting.js\", \"https://code.highcharts.com/modules/heatmap.js\", \"https://code.highcharts.com/modules/treemap.js\", \"https://code.highcharts.com/modules/sunburst.js\", \"https://highcharts.github.io/export-csv/export-csv.js\"], function() {\n",
       "            \n",
       "    var options = {\"credits\":{\"enabled\":false},\"exporting\":false,\"chart\":{\"animation\":false,\"width\":\"800\",\"renderTo\":\"36526f8d_3f28_49fa_b4d1_0cd13c418010container_chart\"},\"series\":[{\"name\":\"Installation\",\"data\":[43934.3,52503.1,57177.2,69658.8,97031.9,119931,137133.5,154175.6]},{\"name\":\"Manufacturing\",\"data\":[24916,24064,29742,29851,32490,30282,38121,40434]},{\"name\":\"Sales & Distribution\",\"data\":[11744,17722,16005,19771,20185,24377,32147,39387]},{\"name\":\"Project Development\",\"data\":[null,null,7988,12169,15112,22452,34400,34227]},{\"name\":\"Other\",\"data\":[12908,5948,8105,11248,8989,11816,18274,18111]}],\"plotOptions\":{\"series\":{\"label\":{\"connectorAllowed\":false},\"pointStart\":2010},\"line\":{\"animation\":false},\"column\":{\"animation\":false},\"bar\":{\"animation\":false},\"pie\":{\"animation\":false},\"scatter\":{\"animation\":false},\"bubble\":{\"animation\":false},\"treemap\":{\"animation\":false}},\"title\":{\"text\":\"Solar Employment Growth by Sector, 2010-2016\"},\"subtitle\":{\"text\":\"Source: thesolarfoundation.com\"},\"yAxis\":{\"title\":{\"text\":\"Number of Employees\"}},\"legend\":{\"layout\":\"vertical\",\"align\":\"right\",\"verticalAlign\":\"middle\"}};\n",
       "    \n",
       "options = JSON.stringify(options);\n",
       "\n",
       "options = JSON.parse(options, function (key, value) {\n",
       "\n",
       "\tif (value && (typeof value === \"string\")) {\n",
       "\n",
       "\t\t\t\tvar check1 = (value.replace(/\\s+/g, '').replace(/\\r?\\n|\\r/g, '').substr(0, 8) == \"function\"),\n",
       "\t\t\tcheck2 = (value.replace(/\\s+/g, '').replace(/\\r?\\n|\\r/g, '').substr(0, 9) == \"(function\");\n",
       "\n",
       "\n",
       "\t\tif (check1) {\n",
       "\t\t\tvar startBody = value.indexOf('{') + 1;\n",
       "\t\t\tvar endBody = value.lastIndexOf('}');\n",
       "\t\t\tvar startArgs = value.indexOf('(') + 1;\n",
       "\t\t\tvar endArgs = value.indexOf(')');\n",
       "\n",
       "\t\t\treturn new Function(value.substring(startArgs, endArgs),\n",
       "\t\t\t\tvalue.substring(startBody, endBody));\n",
       "\t\t}\n",
       "\t\tif (check2) {\n",
       "\t\t\treturn eval(value);\n",
       "\t\t}\n",
       "\n",
       "\t}\n",
       "\n",
       "\treturn value;\n",
       "\n",
       "});\n",
       "    \n",
       "\n",
       "    var opt = $.extend(true, {}, options);\n",
       "    if (window.opts==undefined) {\n",
       "        window.opts = {};\n",
       "    }\n",
       "    window.opts['36526f8d_3f28_49fa_b4d1_0cd13c418010'] = opt;\n",
       "\n",
       "    console.log('Highcharts/Highstock options accessible as opts[\"36526f8d_3f28_49fa_b4d1_0cd13c418010\"]');\n",
       "    \n",
       "            \n",
       "            window.chart = new Highcharts.Chart(options);\n",
       "            \n",
       "    console.log('Highcharts/Highstock chart accessible as charts[\"36526f8d_3f28_49fa_b4d1_0cd13c418010\"]');\n",
       "    \n",
       "        });\n",
       "    });\n",
       "    </script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "g = hc.Highcharts()\n",
    "g.title.text = 'Solar Employment Growth by Sector, 2010-2016'\n",
    "g.subtitle.text = 'Source: thesolarfoundation.com'\n",
    "g.yAxis.title.text = 'Number of Employees'\n",
    "g.legend = {'layout': 'vertical', 'align': 'right', 'verticalAlign': 'middle'}\n",
    "g.exporting = False\n",
    "g.chart.width = '800'\n",
    "\n",
    "g.plotOptions.series = {'label': {'connectorAllowed': False}, 'pointStart': 2010}\n",
    "g.series = [{'name': 'Installation', 'data': [43934.3, 52503.1, 57177.2, 69658.8, 97031.9, 119931, 137133.5, 154175.6]},\n",
    "            {'name': 'Manufacturing', 'data': [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]},\n",
    "            {'name': 'Sales & Distribution', 'data': [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]},\n",
    "            {'name': 'Project Development', 'data': [None, None, 7988, 12169, 15112, 22452, 34400, 34227]},\n",
    "            {'name': 'Other', 'data': [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]}\n",
    "           ]\n",
    "g.plot()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "\n",
       "Highcharts **global options** reset to default.  \n"
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "        let ResetOptions = function() {\n",
       "            if (window.HCDefaults){\n",
       "                var defaultOptions = Highcharts.getOptions();\n",
       "                for (var prop in defaultOptions) {\n",
       "                    if (typeof defaultOptions[prop] !== 'function') {\n",
       "                        delete defaultOptions[prop]\n",
       "                    }\n",
       "                    else {\n",
       "                        console.log(prop);\n",
       "                    };\n",
       "                }\n",
       "                Highcharts.setOptions(window.HCDefaults);\n",
       "                console.log('Highcharts global options reset to default ie HCDefaults');\n",
       "            }\n",
       "        }\n",
       "        ResetOptions();\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "hc_global.reset(verbose=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}