{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "    require.config({\n",
       "                 baseUrl : \"https://cdn.rawgit.com/napjon/krisk/master/krisk/static\",\n",
       "                 paths: {\n",
       "                      echarts: \"https://cdnjs.cloudflare.com/ajax/libs/echarts/3.2.1/echarts.min\"\n",
       "                  }\n",
       "    });\n",
       "    "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import pandas as pd\n",
    "import krisk.plot as kk\n",
    "# Use this when you want to nbconvert the notebook (used by nbviewer)\n",
    "from krisk import init_notebook; init_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Before we added talk about each of these features. There's something in common, the way the element position themselves, this are position (`x_pos`,`y_pos`), `align`, and `orientation`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Position"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Everytime we add toolbox, title, or legend, we almost always want to reposition those elements. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "When default to auto for both x-axes and y-axes,\n",
    "\n",
    "* The title will position at top-left corner.\n",
    "* The legend will position at top-center.\n",
    "* The toolbox will position at top-left corner."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As we can see from this criteria,  there's definitely collision for title and toolbox, and legend if the title is longer."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Take a look at this example,"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "df = pd.read_csv('../krisk/tests/data/gapminderDataFiveYear.txt',sep='\\t')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#5156887a-9bf1-4b28-a050-fc4844b2be69').attr('id','5156887a-9bf1-4b28-a050-fc4844b2be69'+'_old');\n",
       "element.append('<div id=\"5156887a-9bf1-4b28-a050-fc4844b2be69\" style=\"width: 800px;height:400px;\"></div>');\n",
       "require(['echarts', 'dark', 'vintage', 'roma', 'shine', 'infographic', 'macarons'],\n",
       "function(echarts){\n",
       "    \n",
       "    function parseFunction(str){\n",
       "        return eval('(' + str + ')');\n",
       "    }\n",
       "    \n",
       "    var myChart = echarts.init(document.getElementById(\"5156887a-9bf1-4b28-a050-fc4844b2be69\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"name\": \"Africa\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                4570010,\n",
       "                5093033,\n",
       "                5702247,\n",
       "                6447875,\n",
       "                7305376,\n",
       "                8328097,\n",
       "                9602857,\n",
       "                11054502,\n",
       "                12674645,\n",
       "                14304480,\n",
       "                16033152,\n",
       "                17875763\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Americas\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13806098,\n",
       "                15478157,\n",
       "                17330810,\n",
       "                19229865,\n",
       "                21175368,\n",
       "                23122708,\n",
       "                25211637,\n",
       "                27310159,\n",
       "                29570964,\n",
       "                31876016,\n",
       "                33990910,\n",
       "                35954847\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Asia\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                42283556,\n",
       "                47356988,\n",
       "                51404763,\n",
       "                57747361,\n",
       "                65180977,\n",
       "                72257987,\n",
       "                79095018,\n",
       "                87006690,\n",
       "                94948248,\n",
       "                102523803,\n",
       "                109145521,\n",
       "                115513752\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Europe\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13937362,\n",
       "                14596345,\n",
       "                15345172,\n",
       "                16039299,\n",
       "                16687835,\n",
       "                17238818,\n",
       "                17708897,\n",
       "                18103139,\n",
       "                18604760,\n",
       "                18964805,\n",
       "                19274129,\n",
       "                19536618\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Oceania\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                5343003,\n",
       "                5970988,\n",
       "                6641759,\n",
       "                7300207,\n",
       "                8053050,\n",
       "                8619500,\n",
       "                9197425,\n",
       "                9787208,\n",
       "                10459826,\n",
       "                11120715,\n",
       "                11727414,\n",
       "                12274974\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Download as Image\",\n",
       "                \"type\": \"png\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Reset\"\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": false,\n",
       "                \"title\": \"Zoom\"\n",
       "            }\n",
       "        },\n",
       "        \"align\": \"auto\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"yAxis\": {},\n",
       "    \"legend\": {\n",
       "        \"data\": [\n",
       "            \"Africa\",\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Europe\",\n",
       "            \"Oceania\"\n",
       "        ]\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"text\": \"GapMinder Average Population Across Continent\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            1952,\n",
       "            1957,\n",
       "            1962,\n",
       "            1967,\n",
       "            1972,\n",
       "            1977,\n",
       "            1982,\n",
       "            1987,\n",
       "            1992,\n",
       "            1997,\n",
       "            2002,\n",
       "            2007\n",
       "        ]\n",
       "    },\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    }\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n"
      ],
      "text/plain": [
       "<krisk.chart.Chart at 0x106858cc0>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p = kk.bar(df,'year',y='pop',how='mean',c='continent')\n",
    "p.set_size(width=800)\n",
    "p.set_title('GapMinder Average Population Across Continent')\n",
    "p.set_toolbox(save_format='png',restore=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As we can see, we have to reposition the coordinate accordingly, specifically for the title since it collide with both toolbox and legend."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#16c6943e-43a5-4410-9c71-7a44ade43b48').attr('id','16c6943e-43a5-4410-9c71-7a44ade43b48'+'_old');\n",
       "element.append('<div id=\"16c6943e-43a5-4410-9c71-7a44ade43b48\" style=\"width: 800px;height:400px;\"></div>');\n",
       "require(['echarts', 'dark', 'vintage', 'roma', 'shine', 'infographic', 'macarons'],\n",
       "function(echarts){\n",
       "    \n",
       "    function parseFunction(str){\n",
       "        return eval('(' + str + ')');\n",
       "    }\n",
       "    \n",
       "    var myChart = echarts.init(document.getElementById(\"16c6943e-43a5-4410-9c71-7a44ade43b48\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"name\": \"Africa\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                4570010,\n",
       "                5093033,\n",
       "                5702247,\n",
       "                6447875,\n",
       "                7305376,\n",
       "                8328097,\n",
       "                9602857,\n",
       "                11054502,\n",
       "                12674645,\n",
       "                14304480,\n",
       "                16033152,\n",
       "                17875763\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Americas\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13806098,\n",
       "                15478157,\n",
       "                17330810,\n",
       "                19229865,\n",
       "                21175368,\n",
       "                23122708,\n",
       "                25211637,\n",
       "                27310159,\n",
       "                29570964,\n",
       "                31876016,\n",
       "                33990910,\n",
       "                35954847\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Asia\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                42283556,\n",
       "                47356988,\n",
       "                51404763,\n",
       "                57747361,\n",
       "                65180977,\n",
       "                72257987,\n",
       "                79095018,\n",
       "                87006690,\n",
       "                94948248,\n",
       "                102523803,\n",
       "                109145521,\n",
       "                115513752\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Europe\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13937362,\n",
       "                14596345,\n",
       "                15345172,\n",
       "                16039299,\n",
       "                16687835,\n",
       "                17238818,\n",
       "                17708897,\n",
       "                18103139,\n",
       "                18604760,\n",
       "                18964805,\n",
       "                19274129,\n",
       "                19536618\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Oceania\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                5343003,\n",
       "                5970988,\n",
       "                6641759,\n",
       "                7300207,\n",
       "                8053050,\n",
       "                8619500,\n",
       "                9197425,\n",
       "                9787208,\n",
       "                10459826,\n",
       "                11120715,\n",
       "                11727414,\n",
       "                12274974\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Download as Image\",\n",
       "                \"type\": \"png\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Reset\"\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": false,\n",
       "                \"title\": \"Zoom\"\n",
       "            }\n",
       "        },\n",
       "        \"align\": \"auto\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"yAxis\": {},\n",
       "    \"legend\": {\n",
       "        \"data\": [\n",
       "            \"Africa\",\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Europe\",\n",
       "            \"Oceania\"\n",
       "        ]\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"top\": \"7%\",\n",
       "        \"text\": \"GapMinder Average Population Across Continent\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            1952,\n",
       "            1957,\n",
       "            1962,\n",
       "            1967,\n",
       "            1972,\n",
       "            1977,\n",
       "            1982,\n",
       "            1987,\n",
       "            1992,\n",
       "            1997,\n",
       "            2002,\n",
       "            2007\n",
       "        ]\n",
       "    },\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    }\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n"
      ],
      "text/plain": [
       "<krisk.chart.Chart at 0x1068580b8>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p.set_title('GapMinder Average Population Across Continent',y_pos='-7%')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Notice that the coordinate for x_pos and y_pos has negative element. The way krisk started the position is from bottom-left corner, and based on percentage of the pixel. If on the negative element, then it will be the other way around, with x position started at the right, and y position started at the top.\n",
    "\n",
    "\n",
    "Beside coordinate number, krisk support `auto`, `center`, `left`-`right` (x position), and `top`-`bottom` (y position)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Orientation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can set orientation for legend and toolbox. Below we see the legend oriented vertically and reposition nicely in the chart."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#cc166926-f8d3-42fc-aa58-888075c77f0c').attr('id','cc166926-f8d3-42fc-aa58-888075c77f0c'+'_old');\n",
       "element.append('<div id=\"cc166926-f8d3-42fc-aa58-888075c77f0c\" style=\"width: 800px;height:400px;\"></div>');\n",
       "require(['echarts', 'dark', 'vintage', 'roma', 'shine', 'infographic', 'macarons'],\n",
       "function(echarts){\n",
       "    \n",
       "    function parseFunction(str){\n",
       "        return eval('(' + str + ')');\n",
       "    }\n",
       "    \n",
       "    var myChart = echarts.init(document.getElementById(\"cc166926-f8d3-42fc-aa58-888075c77f0c\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"name\": \"Africa\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                4570010,\n",
       "                5093033,\n",
       "                5702247,\n",
       "                6447875,\n",
       "                7305376,\n",
       "                8328097,\n",
       "                9602857,\n",
       "                11054502,\n",
       "                12674645,\n",
       "                14304480,\n",
       "                16033152,\n",
       "                17875763\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Americas\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13806098,\n",
       "                15478157,\n",
       "                17330810,\n",
       "                19229865,\n",
       "                21175368,\n",
       "                23122708,\n",
       "                25211637,\n",
       "                27310159,\n",
       "                29570964,\n",
       "                31876016,\n",
       "                33990910,\n",
       "                35954847\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Asia\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                42283556,\n",
       "                47356988,\n",
       "                51404763,\n",
       "                57747361,\n",
       "                65180977,\n",
       "                72257987,\n",
       "                79095018,\n",
       "                87006690,\n",
       "                94948248,\n",
       "                102523803,\n",
       "                109145521,\n",
       "                115513752\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Europe\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13937362,\n",
       "                14596345,\n",
       "                15345172,\n",
       "                16039299,\n",
       "                16687835,\n",
       "                17238818,\n",
       "                17708897,\n",
       "                18103139,\n",
       "                18604760,\n",
       "                18964805,\n",
       "                19274129,\n",
       "                19536618\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Oceania\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                5343003,\n",
       "                5970988,\n",
       "                6641759,\n",
       "                7300207,\n",
       "                8053050,\n",
       "                8619500,\n",
       "                9197425,\n",
       "                9787208,\n",
       "                10459826,\n",
       "                11120715,\n",
       "                11727414,\n",
       "                12274974\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Download as Image\",\n",
       "                \"type\": \"png\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Reset\"\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": false,\n",
       "                \"title\": \"Zoom\"\n",
       "            }\n",
       "        },\n",
       "        \"align\": \"auto\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"yAxis\": {},\n",
       "    \"legend\": {\n",
       "        \"top\": \"16%\",\n",
       "        \"data\": [\n",
       "            \"Africa\",\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Europe\",\n",
       "            \"Oceania\"\n",
       "        ],\n",
       "        \"align\": \"auto\",\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"12%\"\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"top\": \"7%\",\n",
       "        \"text\": \"GapMinder Average Population Across Continent\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            1952,\n",
       "            1957,\n",
       "            1962,\n",
       "            1967,\n",
       "            1972,\n",
       "            1977,\n",
       "            1982,\n",
       "            1987,\n",
       "            1992,\n",
       "            1997,\n",
       "            2002,\n",
       "            2007\n",
       "        ]\n",
       "    },\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    }\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n"
      ],
      "text/plain": [
       "<krisk.chart.Chart at 0x106858390>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p.set_legend(orient='vertical',x_pos='12%',y_pos='-16%')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Legend and Title"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For legend and title we have discussed all the optional arguments there is. We can see docstring for `set_title` and `set_legend` below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Help on method set_title in module krisk.chart:\n",
      "\n",
      "set_title(title, x_pos='auto', y_pos='auto') method of krisk.chart.Chart instance\n",
      "    Set title for the plot.\n",
      "    \n",
      "    The coordinate is started at bottom left corner. If x_pos and y_pos started\n",
      "    at negative values, then it's converted to the upper right corner (left->right, bottom->top)\n",
      "    \n",
      "    Parameters\n",
      "    ----------\n",
      "    title: str\n",
      "        Title of the chart.\n",
      "    x_pos: str, {'auto', left', 'center', 'right', 'i%'}, default to 'auto'\n",
      "    y_pos: str, {'auto', top', 'center', 'bottom', 'i%'}, default to 'auto'\n",
      "\n"
     ]
    }
   ],
   "source": [
    "help(p.set_title)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Help on method set_legend in module krisk.chart:\n",
      "\n",
      "set_legend(align='auto', orient='horizontal', x_pos='auto', y_pos='auto') method of krisk.chart.Chart instance\n",
      "    Set legend style.\n",
      "    \n",
      "    The coordinate is started at bottom left corner. If x_pos and y_pos started\n",
      "    at negative values, then it's converted to the upper right corner (left->right, bottom->top)\n",
      "    \n",
      "    Parameters\n",
      "    ----------\n",
      "    align: str, {'auto','left','right'}, default to 'auto'\n",
      "    orient: str, {'horizontal','vertical'} default to 'horizontal'\n",
      "    x_pos: str, {'auto', left', 'center', 'right', 'i%'}, default to 'auto'\n",
      "    y_pos: str, {'auto', top', 'center', 'bottom', 'i%'}, default to 'auto'\n",
      "    \n",
      "    Returns\n",
      "    -------\n",
      "    Chart Object\n",
      "\n"
     ]
    }
   ],
   "source": [
    "help(p.set_legend)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Toolbox"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Beside align, position, and orientation, Toolbox has different set of options that we can interact with the chart. First the easiest, `restore`,`save_format`, and panning."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Restore, Save, and Zoom"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#de51a035-9a63-4069-aa06-7b34c21cf19d').attr('id','de51a035-9a63-4069-aa06-7b34c21cf19d'+'_old');\n",
       "element.append('<div id=\"de51a035-9a63-4069-aa06-7b34c21cf19d\" style=\"width: 800px;height:400px;\"></div>');\n",
       "require(['echarts', 'dark', 'vintage', 'roma', 'shine', 'infographic', 'macarons'],\n",
       "function(echarts){\n",
       "    \n",
       "    function parseFunction(str){\n",
       "        return eval('(' + str + ')');\n",
       "    }\n",
       "    \n",
       "    var myChart = echarts.init(document.getElementById(\"de51a035-9a63-4069-aa06-7b34c21cf19d\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"name\": \"Africa\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                4570010,\n",
       "                5093033,\n",
       "                5702247,\n",
       "                6447875,\n",
       "                7305376,\n",
       "                8328097,\n",
       "                9602857,\n",
       "                11054502,\n",
       "                12674645,\n",
       "                14304480,\n",
       "                16033152,\n",
       "                17875763\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Americas\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13806098,\n",
       "                15478157,\n",
       "                17330810,\n",
       "                19229865,\n",
       "                21175368,\n",
       "                23122708,\n",
       "                25211637,\n",
       "                27310159,\n",
       "                29570964,\n",
       "                31876016,\n",
       "                33990910,\n",
       "                35954847\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Asia\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                42283556,\n",
       "                47356988,\n",
       "                51404763,\n",
       "                57747361,\n",
       "                65180977,\n",
       "                72257987,\n",
       "                79095018,\n",
       "                87006690,\n",
       "                94948248,\n",
       "                102523803,\n",
       "                109145521,\n",
       "                115513752\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Europe\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13937362,\n",
       "                14596345,\n",
       "                15345172,\n",
       "                16039299,\n",
       "                16687835,\n",
       "                17238818,\n",
       "                17708897,\n",
       "                18103139,\n",
       "                18604760,\n",
       "                18964805,\n",
       "                19274129,\n",
       "                19536618\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Oceania\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                5343003,\n",
       "                5970988,\n",
       "                6641759,\n",
       "                7300207,\n",
       "                8053050,\n",
       "                8619500,\n",
       "                9197425,\n",
       "                9787208,\n",
       "                10459826,\n",
       "                11120715,\n",
       "                11727414,\n",
       "                12274974\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"feature\": {\n",
       "            \"saveAsImage\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Download as Image\",\n",
       "                \"type\": \"png\"\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Reset\"\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Zoom\"\n",
       "            }\n",
       "        },\n",
       "        \"align\": \"auto\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"yAxis\": {},\n",
       "    \"legend\": {\n",
       "        \"top\": \"16%\",\n",
       "        \"data\": [\n",
       "            \"Africa\",\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Europe\",\n",
       "            \"Oceania\"\n",
       "        ],\n",
       "        \"align\": \"auto\",\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"12%\"\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"top\": \"7%\",\n",
       "        \"text\": \"GapMinder Average Population Across Continent\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            1952,\n",
       "            1957,\n",
       "            1962,\n",
       "            1967,\n",
       "            1972,\n",
       "            1977,\n",
       "            1982,\n",
       "            1987,\n",
       "            1992,\n",
       "            1997,\n",
       "            2002,\n",
       "            2007\n",
       "        ]\n",
       "    },\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    }\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n"
      ],
      "text/plain": [
       "<krisk.chart.Chart at 0x106858cf8>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p.set_toolbox(restore=True, save_format='png', data_zoom=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `restore` option will return your plot to original form. This is intended after you edit the plot, you may want to reset it back. The save_format is nice feature that you can use to download as image after editing the plots."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Data View"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#cab7e27d-a392-457b-8ee7-09d52f96ed8c').attr('id','cab7e27d-a392-457b-8ee7-09d52f96ed8c'+'_old');\n",
       "element.append('<div id=\"cab7e27d-a392-457b-8ee7-09d52f96ed8c\" style=\"width: 800px;height:400px;\"></div>');\n",
       "require(['echarts', 'dark', 'vintage', 'roma', 'shine', 'infographic', 'macarons'],\n",
       "function(echarts){\n",
       "    \n",
       "    function parseFunction(str){\n",
       "        return eval('(' + str + ')');\n",
       "    }\n",
       "    \n",
       "    var myChart = echarts.init(document.getElementById(\"cab7e27d-a392-457b-8ee7-09d52f96ed8c\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"name\": \"Africa\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                4570010,\n",
       "                5093033,\n",
       "                5702247,\n",
       "                6447875,\n",
       "                7305376,\n",
       "                8328097,\n",
       "                9602857,\n",
       "                11054502,\n",
       "                12674645,\n",
       "                14304480,\n",
       "                16033152,\n",
       "                17875763\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Americas\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13806098,\n",
       "                15478157,\n",
       "                17330810,\n",
       "                19229865,\n",
       "                21175368,\n",
       "                23122708,\n",
       "                25211637,\n",
       "                27310159,\n",
       "                29570964,\n",
       "                31876016,\n",
       "                33990910,\n",
       "                35954847\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Asia\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                42283556,\n",
       "                47356988,\n",
       "                51404763,\n",
       "                57747361,\n",
       "                65180977,\n",
       "                72257987,\n",
       "                79095018,\n",
       "                87006690,\n",
       "                94948248,\n",
       "                102523803,\n",
       "                109145521,\n",
       "                115513752\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Europe\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13937362,\n",
       "                14596345,\n",
       "                15345172,\n",
       "                16039299,\n",
       "                16687835,\n",
       "                17238818,\n",
       "                17708897,\n",
       "                18103139,\n",
       "                18604760,\n",
       "                18964805,\n",
       "                19274129,\n",
       "                19536618\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Oceania\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                5343003,\n",
       "                5970988,\n",
       "                6641759,\n",
       "                7300207,\n",
       "                8053050,\n",
       "                8619500,\n",
       "                9197425,\n",
       "                9787208,\n",
       "                10459826,\n",
       "                11120715,\n",
       "                11727414,\n",
       "                12274974\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"bottom\": \"auto\",\n",
       "        \"feature\": {\n",
       "            \"dataView\": {\n",
       "                \"show\": true,\n",
       "                \"readOnly\": false,\n",
       "                \"title\": \"Table View\",\n",
       "                \"lang\": [\n",
       "                    \"Table View\",\n",
       "                    \"Back\",\n",
       "                    \"Modify\"\n",
       "                ]\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Reset\"\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": false,\n",
       "                \"title\": \"Zoom\"\n",
       "            }\n",
       "        },\n",
       "        \"align\": \"auto\",\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"yAxis\": {},\n",
       "    \"legend\": {\n",
       "        \"top\": \"16%\",\n",
       "        \"orient\": \"vertical\",\n",
       "        \"align\": \"auto\",\n",
       "        \"data\": [\n",
       "            \"Africa\",\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Europe\",\n",
       "            \"Oceania\"\n",
       "        ],\n",
       "        \"left\": \"12%\"\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"top\": \"7%\",\n",
       "        \"text\": \"GapMinder Average Population Across Continent\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            1952,\n",
       "            1957,\n",
       "            1962,\n",
       "            1967,\n",
       "            1972,\n",
       "            1977,\n",
       "            1982,\n",
       "            1987,\n",
       "            1992,\n",
       "            1997,\n",
       "            2002,\n",
       "            2007\n",
       "        ]\n",
       "    },\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    }\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n"
      ],
      "text/plain": [
       "<krisk.chart.Chart at 0x106858630>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p.set_toolbox(data_view=False, restore=True)\n",
    "p.set_size(width=800)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `data_view` is another convenience function to let readers see table data that construct the plot. If True, it's set to read_only. Set it to False will let readers modify the data, hence changing the plot."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Magic Type"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#de5a7cd8-7b69-4645-a044-c1f27610e3ce').attr('id','de5a7cd8-7b69-4645-a044-c1f27610e3ce'+'_old');\n",
       "element.append('<div id=\"de5a7cd8-7b69-4645-a044-c1f27610e3ce\" style=\"width: 800px;height:400px;\"></div>');\n",
       "require(['echarts', 'dark', 'vintage', 'roma', 'shine', 'infographic', 'macarons'],\n",
       "function(echarts){\n",
       "    \n",
       "    function parseFunction(str){\n",
       "        return eval('(' + str + ')');\n",
       "    }\n",
       "    \n",
       "    var myChart = echarts.init(document.getElementById(\"de5a7cd8-7b69-4645-a044-c1f27610e3ce\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"name\": \"Africa\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                4570010,\n",
       "                5093033,\n",
       "                5702247,\n",
       "                6447875,\n",
       "                7305376,\n",
       "                8328097,\n",
       "                9602857,\n",
       "                11054502,\n",
       "                12674645,\n",
       "                14304480,\n",
       "                16033152,\n",
       "                17875763\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Americas\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13806098,\n",
       "                15478157,\n",
       "                17330810,\n",
       "                19229865,\n",
       "                21175368,\n",
       "                23122708,\n",
       "                25211637,\n",
       "                27310159,\n",
       "                29570964,\n",
       "                31876016,\n",
       "                33990910,\n",
       "                35954847\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Asia\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                42283556,\n",
       "                47356988,\n",
       "                51404763,\n",
       "                57747361,\n",
       "                65180977,\n",
       "                72257987,\n",
       "                79095018,\n",
       "                87006690,\n",
       "                94948248,\n",
       "                102523803,\n",
       "                109145521,\n",
       "                115513752\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Europe\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                13937362,\n",
       "                14596345,\n",
       "                15345172,\n",
       "                16039299,\n",
       "                16687835,\n",
       "                17238818,\n",
       "                17708897,\n",
       "                18103139,\n",
       "                18604760,\n",
       "                18964805,\n",
       "                19274129,\n",
       "                19536618\n",
       "            ]\n",
       "        },\n",
       "        {\n",
       "            \"name\": \"Oceania\",\n",
       "            \"type\": \"bar\",\n",
       "            \"data\": [\n",
       "                5343003,\n",
       "                5970988,\n",
       "                6641759,\n",
       "                7300207,\n",
       "                8053050,\n",
       "                8619500,\n",
       "                9197425,\n",
       "                9787208,\n",
       "                10459826,\n",
       "                11120715,\n",
       "                11727414,\n",
       "                12274974\n",
       "            ]\n",
       "        }\n",
       "    ],\n",
       "    \"toolbox\": {\n",
       "        \"orient\": \"horizontal\",\n",
       "        \"feature\": {\n",
       "            \"magicType\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Chart Options\",\n",
       "                \"type\": [\n",
       "                    \"line\",\n",
       "                    \"bar\"\n",
       "                ]\n",
       "            },\n",
       "            \"restore\": {\n",
       "                \"show\": true,\n",
       "                \"title\": \"Reset\"\n",
       "            },\n",
       "            \"dataZoom\": {\n",
       "                \"show\": false,\n",
       "                \"title\": \"Zoom\"\n",
       "            }\n",
       "        },\n",
       "        \"align\": \"auto\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"yAxis\": {},\n",
       "    \"legend\": {\n",
       "        \"top\": \"16%\",\n",
       "        \"data\": [\n",
       "            \"Africa\",\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Europe\",\n",
       "            \"Oceania\"\n",
       "        ],\n",
       "        \"align\": \"auto\",\n",
       "        \"orient\": \"vertical\",\n",
       "        \"left\": \"12%\"\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"top\": \"7%\",\n",
       "        \"text\": \"GapMinder Average Population Across Continent\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"left\": \"auto\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            1952,\n",
       "            1957,\n",
       "            1962,\n",
       "            1967,\n",
       "            1972,\n",
       "            1977,\n",
       "            1982,\n",
       "            1987,\n",
       "            1992,\n",
       "            1997,\n",
       "            2002,\n",
       "            2007\n",
       "        ]\n",
       "    },\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    }\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n"
      ],
      "text/plain": [
       "<krisk.chart.Chart at 0x1068586a0>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "p.set_toolbox(magic_type=['line','bar'],restore=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "`magic_type` let your plot changed as you explore different options to visualize your data. Here the exact same plot is used, but using `line` to change the visualization."
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python [default]",
   "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}