{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Devel::IPerl::Plugin::Chart::Plotly demo notebook\n",
    "==========================\n",
    "\n",
    "This notebook is just a demo extracted from the synopsis of [Devel::IPerl::Plugin::Chart::Plotly](https://metacpan.org/pod/Devel::IPerl::Plugin::Chart::Plotly)\n",
    "\n",
    "Installing the plugin\n",
    "------------------\n",
    "\n",
    "First you need to install the plugin, so in your shell:\n",
    "```bash\n",
    "cpanm Devel::IPerl::Plugin::Chart::Plotly\n",
    "```\n",
    "\n",
    "Using the plugin\n",
    "------------------\n",
    "\n",
    "Just load the plugin:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "IPerl->load_plugin('Chart::Plotly');"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Once loaded your `Chart::Plotly::Plot` and `Chart::Plotly::Trace` objects will get displayed automatically"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "//# sourceURL=iperl-devel-plugin-chart-plotly.js\n",
       "            $('#Plotly').each(function(i, e) { $(e).attr('id', 'plotly') });\n",
       "\n",
       "            if (!window.Plotly) {\n",
       "                requirejs.config({\n",
       "                  paths: {\n",
       "                    plotly: ['https://cdn.plot.ly/plotly-latest.min']},\n",
       "                });\n",
       "                window.Plotly = {\n",
       "                  plot : function(div, data, layout) {\n",
       "                    require(['plotly'], function(plotly) {\n",
       "                      window.Plotly=plotly;\n",
       "                      Plotly.plot(div, data, layout);\n",
       "                    });\n",
       "                  }\n",
       "                }\n",
       "            }\n",
       "</script>\n",
       "<div id=\"1a62adfa-3b4c-11e8-a0ab-c664e52612d7\"></div>\n",
       "\n",
       "<script>\n",
       "Plotly.plot(document.getElementById('1a62adfa-3b4c-11e8-a0ab-c664e52612d7'),[{\"x\":[1,2,3,4,5],\"y\":[1,2,3,4,5],\"type\":\"scatter\"}] );\n",
       "</script>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "use Chart::Plotly::Trace::Scatter;\n",
    "my $scatter_trace = Chart::Plotly::Trace::Scatter->new( x => [ 1 .. 5 ], y => [ 1 .. 5 ] );"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Also plot objects"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script>\n",
       "//# sourceURL=iperl-devel-plugin-chart-plotly.js\n",
       "            $('#Plotly').each(function(i, e) { $(e).attr('id', 'plotly') });\n",
       "\n",
       "            if (!window.Plotly) {\n",
       "                requirejs.config({\n",
       "                  paths: {\n",
       "                    plotly: ['https://cdn.plot.ly/plotly-latest.min']},\n",
       "                });\n",
       "                window.Plotly = {\n",
       "                  plot : function(div, data, layout) {\n",
       "                    require(['plotly'], function(plotly) {\n",
       "                      window.Plotly=plotly;\n",
       "                      Plotly.plot(div, data, layout);\n",
       "                    });\n",
       "                  }\n",
       "                }\n",
       "            }\n",
       "</script>\n",
       "<div id=\"1cad02cc-3b4c-11e8-a0ab-b0096d0108df\"></div>\n",
       "\n",
       "<script>\n",
       "Plotly.plot(document.getElementById('1cad02cc-3b4c-11e8-a0ab-b0096d0108df'),[{\"type\":\"box\",\"x\":[1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3],\"y\":[0.0821805792172547,0.806485478111895,0.0472466704088639,0.757669784118541,0.36313603881587,0.54215512285171,0.815206321991536,0.547532523620028,0.511531196239634,0.730444433199679,0.837433650463392,0.297000729792579,0.99875796155354,0.91129723013097,0.580636740265486,0.474324525579767],\"name\":\"box1\"},{\"name\":\"box2\",\"x\":[1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3],\"y\":[0.970445049360524,0.353943440982292,0.420845074138523,0.345593698371822,0.766164635026488,0.796270891865191,0.284695247816227,0.312673856434976,0.365783887504637,0.816166566884803,0.268062821884737,0.543521621886576,0.682022049611792,0.236740261791624,0.361228133149933,0.492830987672598],\"type\":\"box\"}] ,{\"boxmode\":\"group\"});\n",
       "</script>\n"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "use Chart::Plotly::Trace::Box;\n",
    "use Chart::Plotly::Plot;\n",
    " \n",
    "my $x = [ 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3 ];\n",
    "my $box1 = Chart::Plotly::Trace::Box->new( x => $x, y => [ map { rand() } ( 1 .. ( scalar(@$x) ) ) ], name => \"box1\" );\n",
    "my $box2 = Chart::Plotly::Trace::Box->new( x => $x, y => [ map { rand() } ( 1 .. ( scalar(@$x) ) ) ], name => \"box2\" );\n",
    "my $plot = Chart::Plotly::Plot->new( traces => [ $box1, $box2 ], layout => { boxmode => 'group' } );"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "IPerl 0.009",
   "language": "perl",
   "name": "iperl"
  },
  "language_info": {
   "file_extension": ".pl",
   "mimetype": "text/x-perl",
   "name": "perl",
   "version": "5.22.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}