{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can use krisk for Declarative Visualization. You don't have to use `krisk.plot` package, and directly use `Chart` class to make any charts that are supported by ECharts."
   ]
  },
  {
   "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": [
    "# Use this when you want to nbconvert the notebook (used by nbviewer)\n",
    "from krisk import init_notebook; init_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from krisk import Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#9e9dc869-da07-484d-b76f-c90c03d73d94').attr('id','9e9dc869-da07-484d-b76f-c90c03d73d94'+'_old');\n",
       "element.append('<div id=\"9e9dc869-da07-484d-b76f-c90c03d73d94\" style=\"width: 600px;height:400px;\"></div>');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(\"9e9dc869-da07-484d-b76f-c90c03d73d94\"),\"\");\n",
       "    \n",
       "    var option = {\n",
       "    \"legend\": {\n",
       "        \"data\": []\n",
       "    },\n",
       "    \"series\": [],\n",
       "    \"yAxis\": {},\n",
       "    \"title\": {\n",
       "        \"text\": \"\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": []\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",
       "\n",
       "\n"
      ],
      "text/plain": [
       "<krisk.chart.core.Chart at 0x104c136a0>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "chart = Chart()\n",
    "chart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here you see that there is a blank figure for chart that you want to use. You can inspect the characteristic of the chart by using its `option` member."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'legend': {'data': []},\n",
       " 'series': [],\n",
       " 'title': {'text': ''},\n",
       " 'tooltip': {'axisPointer': {'type': ''}},\n",
       " 'xAxis': {'data': []},\n",
       " 'yAxis': {}}"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "chart.option"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As soon as Chart objects are build, the chart option will be using this minimum Python dictionary. This template will translate to JSON object that represent [ECharts option](http://echarts.baidu.com/option.html)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Eventhough there is no visualization in the plot, you can still tweak other type of customization. Here is an example if you want to add a title and a theme to the figure."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#ddb3080c-eece-494a-93a9-8d3c7c2edf23').attr('id','ddb3080c-eece-494a-93a9-8d3c7c2edf23'+'_old');\n",
       "element.append('<div id=\"ddb3080c-eece-494a-93a9-8d3c7c2edf23\" style=\"width: 600px;height:400px;\"></div>');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(\"ddb3080c-eece-494a-93a9-8d3c7c2edf23\"),\"vintage\");\n",
       "    \n",
       "    var option = {\n",
       "    \"tooltip\": {\n",
       "        \"axisPointer\": {\n",
       "            \"type\": \"\"\n",
       "        }\n",
       "    },\n",
       "    \"legend\": {\n",
       "        \"data\": []\n",
       "    },\n",
       "    \"title\": {\n",
       "        \"left\": \"center\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"text\": \"This is a blank visualization\"\n",
       "    },\n",
       "    \"series\": [],\n",
       "    \"xAxis\": {\n",
       "        \"data\": []\n",
       "    },\n",
       "    \"yAxis\": {}\n",
       "};\n",
       "    option['tooltip']['formatter'] = parseFunction(option['tooltip']['formatter']);\n",
       "    myChart.setOption(option);\n",
       "    \n",
       "    \n",
       "    \n",
       "});\n",
       "\n",
       "\n"
      ],
      "text/plain": [
       "<krisk.chart.core.Chart at 0x104c13908>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "chart.set_title('This is a blank visualization', x_pos='center')\n",
    "chart.set_theme('vintage')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There is no plot visualization since there is no data, but we can still customization like theme and title. This also benefit you for saving the figure later to be used as a basis for other plots.\n",
    "\n",
    "With minimal effort, you can insert all type of charts. Here below we change x-axis name for each of the bar. The value of every bar is what we want to insert as a `series` data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "$('#9e9dc869-da07-484d-b76f-c90c03d73d94').attr('id','9e9dc869-da07-484d-b76f-c90c03d73d94'+'_old');\n",
       "element.append('<div id=\"9e9dc869-da07-484d-b76f-c90c03d73d94\" style=\"width: 600px;height:400px;\"></div>');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(\"9e9dc869-da07-484d-b76f-c90c03d73d94\"),\"vintage\");\n",
       "    \n",
       "    var option = {\n",
       "    \"legend\": {\n",
       "        \"data\": []\n",
       "    },\n",
       "    \"series\": [\n",
       "        {\n",
       "            \"data\": [\n",
       "                10,\n",
       "                3,\n",
       "                7,\n",
       "                4,\n",
       "                5\n",
       "            ],\n",
       "            \"name\": \"continent\",\n",
       "            \"type\": \"bar\"\n",
       "        }\n",
       "    ],\n",
       "    \"yAxis\": {},\n",
       "    \"title\": {\n",
       "        \"left\": \"center\",\n",
       "        \"bottom\": \"auto\",\n",
       "        \"text\": \"This is a blank visualization\"\n",
       "    },\n",
       "    \"xAxis\": {\n",
       "        \"data\": [\n",
       "            \"Americas\",\n",
       "            \"Asia\",\n",
       "            \"Africa\",\n",
       "            \"Oceania\",\n",
       "            \"Europe\"\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",
       "\n",
       "\n"
      ],
      "text/plain": [
       "<krisk.chart.core.Chart at 0x104c136a0>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "chart.option['series'] = [{'data': [10, 3, 7, 4, 5], 'name': 'continent', 'type': 'bar'}]\n",
    "chart.option['xAxis'] =  {'data': ['Americas', 'Asia', 'Africa', 'Oceania', 'Europe']}\n",
    "chart"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There is so much more you can do with declarative visualization, as krisk only acts as a thin wrapper on top of ECharts when used without `krisk.plot`. For all complex customization that you can do with the [ECharts](http://echarts.baidu.com/examples.html) option, you can head over to http://echarts.baidu.com/option.html"
   ]
  }
 ],
 "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
}