dropdowns.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### New to Plotly?\n",
    "Plotly's Python library is free and open source! [Get started](https://plot.ly/python/getting-started/) by downloading the client and [reading the primer](https://plot.ly/python/getting-started/).\n",
    "<br>You can set up Plotly to work in [online](https://plot.ly/python/getting-started/#initialization-for-online-plotting) or [offline](https://plot.ly/python/getting-started/#initialization-for-offline-plotting) mode, or in [jupyter notebooks](https://plot.ly/python/getting-started/#start-plotting-online).\n",
    "<br>We also have a quick-reference [cheatsheet](https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf) (new!) to help you get started!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Version Check\n",
    "Note: Dropdown Menus are available in version <b>1.12.6+</b><br>\n",
    "Run  `pip install plotly --upgrade` to update your Plotly version"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "        <script type=\"text/javascript\">\n",
       "        window.PlotlyConfig = {MathJaxConfig: 'local'};\n",
       "        if (window.MathJax) {MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}\n",
       "        if (typeof require !== 'undefined') {\n",
       "        require.undef(\"plotly\");\n",
       "        requirejs.config({\n",
       "            paths: {\n",
       "                'plotly': ['https://cdn.plot.ly/plotly-latest.min']\n",
       "            }\n",
       "        });\n",
       "        require(['plotly'], function(Plotly) {\n",
       "            window._Plotly = Plotly;\n",
       "        });\n",
       "        }\n",
       "        </script>\n",
       "        "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import plotly\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "import os\n",
    "import plotly.graph_objs as go\n",
    "import plotly.io as pio\n",
    "import plotly.plotly as py\n",
    "import plotly.figure_factory as ff\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "from  plotly.offline import plot\n",
    "import plotly\n",
    "from IPython.display import SVG, display\n",
    "from IPython.display import Image\n",
    "from IPython.display import display, Math, Latex\n",
    "import colorlover as cl\n",
    "from IPython.display import HTML\n",
    "from IPython.display import IFrame\n",
    "from plotly.offline import iplot, init_notebook_mode\n",
    "from IPython.display import YouTubeVideo\n",
    "init_notebook_mode(connected=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Simple Dropdown Menu\n",
    "Dropdown Menus can now be used in Plotly to change the data displayed or style of a plot!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "path = 'Monthes/'\n",
    "\n",
    "files = []\n",
    "filesNoAdd = []\n",
    "# r=root, d=directories, f = files\n",
    "for r, d, f in os.walk(path):\n",
    "    for file in f:\n",
    "        if '.csv' in file:\n",
    "            files.append(os.path.join(r, file))\n",
    "            filesNoAdd.append(file)\n",
    "monthDate = []\n",
    "for f in filesNoAdd:\n",
    "    monthDate.append(f.replace('.csv',''))\n",
    "# print(monthDate)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.read_csv('allMonthes.csv')\n",
    "yV = []\n",
    "for i in range(5):\n",
    "    yV.append(df.values[:,i + 8])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "c:\\program files\\python36\\lib\\site-packages\\plotly\\graph_objs\\_deprecations.py:372: DeprecationWarning:\n",
      "\n",
      "plotly.graph_objs.Line is deprecated.\n",
      "Please replace it with one of the following more specific types\n",
      "  - plotly.graph_objs.scatter.Line\n",
      "  - plotly.graph_objs.layout.shape.Line\n",
      "  - etc.\n",
      "\n",
      "\n",
      "c:\\program files\\python36\\lib\\site-packages\\plotly\\graph_objs\\_deprecations.py:39: DeprecationWarning:\n",
      "\n",
      "plotly.graph_objs.Data is deprecated.\n",
      "Please replace it with a list or tuple of instances of the following types\n",
      "  - plotly.graph_objs.Scatter\n",
      "  - plotly.graph_objs.Bar\n",
      "  - plotly.graph_objs.Area\n",
      "  - plotly.graph_objs.Histogram\n",
      "  - etc.\n",
      "\n",
      "\n"
     ]
    },
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": false
       },
       "data": [
        {
         "line": {
          "color": "#FFD700",
          "width": 3
         },
         "name": "01-2019",
         "type": "scatter",
         "uid": "618ca95b-bf3f-4b8a-bda1-eb97024d3900",
         "y": [
          0,
          6,
          39,
          34,
          0,
          0,
          0,
          0,
          0,
          0,
          3,
          3,
          0,
          8,
          7,
          0,
          1,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          25,
          12,
          5,
          6,
          0,
          5,
          8,
          10,
          2,
          8,
          5,
          11,
          3,
          1,
          1,
          4,
          2,
          0,
          1,
          22,
          0,
          0,
          1,
          1,
          2,
          0,
          25,
          0,
          9,
          3,
          14,
          2,
          5,
          1,
          0,
          0,
          0,
          0,
          8,
          5,
          10,
          0,
          0,
          0,
          0,
          27,
          23,
          0,
          8,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          3,
          6,
          4,
          4,
          0,
          0,
          2,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          2,
          22,
          0,
          0,
          0,
          0,
          4,
          0,
          1,
          0,
          1,
          75,
          0,
          0,
          10,
          28,
          10,
          3,
          0,
          3,
          86,
          36,
          6,
          8,
          7,
          22,
          40,
          0,
          0,
          9,
          0,
          11,
          0,
          5,
          0,
          0,
          0,
          9,
          7,
          4,
          11,
          23,
          2,
          0,
          4,
          12,
          45,
          17,
          9,
          0,
          12,
          4,
          4,
          4,
          6,
          55,
          0,
          0,
          -1,
          0,
          0,
          1,
          3,
          0,
          1,
          4,
          31,
          22,
          31,
          6,
          139,
          55,
          6,
          53,
          11,
          47,
          0,
          4,
          15,
          15,
          30,
          0,
          0,
          54,
          18,
          48,
          38,
          82,
          0,
          0,
          0,
          0,
          0,
          14,
          60,
          20,
          38,
          37,
          60
         ]
        },
        {
         "line": {
          "color": "#C0C0C0",
          "width": 3
         },
         "name": "02-2019",
         "type": "scatter",
         "uid": "327f81a8-dc75-4696-8e27-1d18660f13d1",
         "y": [
          4,
          6,
          82,
          67,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          1,
          10,
          3,
          0,
          0,
          0,
          1,
          2,
          0,
          0,
          1,
          3,
          1,
          5,
          0,
          19,
          4,
          1,
          4,
          1,
          2,
          0,
          0,
          1,
          0,
          0,
          0,
          0,
          0,
          12,
          3,
          0,
          0,
          4,
          0,
          0,
          2,
          5,
          8,
          0,
          0,
          0,
          3,
          2,
          4,
          1,
          3,
          1,
          1,
          5,
          3,
          3,
          11,
          8,
          11,
          0,
          0,
          0,
          0,
          12,
          1,
          4,
          5,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          1,
          2,
          9,
          14,
          11,
          0,
          0,
          7,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          4,
          0,
          0,
          2,
          2,
          1,
          1,
          1,
          0,
          3,
          89,
          4,
          4,
          4,
          29,
          12,
          1,
          0,
          0,
          55,
          27,
          7,
          2,
          2,
          11,
          10,
          3,
          5,
          12,
          34,
          23,
          14,
          0,
          0,
          0,
          0,
          16,
          15,
          16,
          10,
          11,
          3,
          5,
          2,
          1,
          36,
          38,
          10,
          0,
          2,
          4,
          3,
          7,
          6,
          12,
          1,
          1,
          0,
          1,
          0,
          11,
          7,
          3,
          1,
          1,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0
         ]
        },
        {
         "line": {
          "color": "#BA8651",
          "width": 3
         },
         "name": "03-2019",
         "type": "scatter",
         "uid": "759a1c5f-0f59-4c41-94f2-5c758d89160a",
         "y": [
          1,
          4,
          36,
          37,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          4,
          4,
          0,
          0,
          1,
          0,
          1,
          0,
          0,
          1,
          0,
          2,
          1,
          0,
          4,
          3,
          0,
          3,
          1,
          0,
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          8,
          2,
          0,
          0,
          3,
          0,
          0,
          0,
          1,
          7,
          0,
          1,
          0,
          6,
          1,
          5,
          2,
          0,
          0,
          0,
          1,
          2,
          1,
          11,
          2,
          4,
          0,
          0,
          0,
          0,
          12,
          2,
          2,
          5,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          2,
          15,
          3,
          0,
          0,
          2,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          3,
          12,
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          2,
          35,
          1,
          2,
          4,
          15,
          10,
          3,
          0,
          1,
          26,
          10,
          2,
          0,
          1,
          7,
          8,
          1,
          2,
          9,
          9,
          5,
          9,
          1,
          0,
          0,
          0,
          18,
          7,
          5,
          5,
          12,
          5,
          4,
          3,
          3,
          12,
          20,
          3,
          0,
          1,
          2,
          2,
          0,
          13,
          18,
          3,
          5,
          0,
          2,
          1,
          2,
          6,
          2,
          1,
          7,
          12,
          10,
          21,
          37,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0
         ]
        },
        {
         "line": {
          "color": "#000000",
          "width": 4
         },
         "name": "04-2019",
         "type": "scatter",
         "uid": "95fa975e-48f6-4fbb-a2e0-7a5a9b5e738f",
         "y": [
          1,
          14,
          40,
          33,
          0,
          0,
          0,
          0,
          0,
          0,
          1,
          1,
          0,
          11,
          4,
          0,
          0,
          0,
          0,
          3,
          3,
          0,
          3,
          1,
          2,
          3,
          4,
          14,
          10,
          2,
          4,
          5,
          0,
          7,
          0,
          0,
          1,
          2,
          2,
          5,
          0,
          13,
          1,
          1,
          3,
          2,
          0,
          0,
          0,
          3,
          5,
          0,
          14,
          2,
          11,
          1,
          9,
          0,
          6,
          2,
          0,
          4,
          0,
          2,
          19,
          5,
          22,
          0,
          0,
          0,
          0,
          16,
          10,
          7,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          2,
          3,
          11,
          6,
          0,
          0,
          6,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          2,
          26,
          0,
          0,
          0,
          0,
          2,
          1,
          0,
          0,
          4,
          30,
          4,
          1,
          4,
          16,
          8,
          1,
          0,
          4,
          36,
          7,
          4,
          1,
          0,
          2,
          9,
          1,
          0,
          18,
          0,
          9,
          5,
          0,
          0,
          0,
          0,
          24,
          10,
          16,
          9,
          11,
          2,
          4,
          6,
          11,
          14,
          12,
          5,
          0,
          4,
          0,
          0,
          1,
          16,
          14,
          0,
          0,
          1,
          1,
          0,
          6,
          1,
          2,
          0,
          0,
          24,
          25,
          40,
          52,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0
         ]
        }
       ],
       "layout": {
        "title": {
         "text": "2019 sale for each months"
        },
        "updatemenus": [
         {
          "buttons": [
           {
            "args": [
             "visible",
             [
              true,
              true,
              true,
              true
             ]
            ],
            "label": "All",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              true,
              false,
              false,
              false
             ]
            ],
            "label": "01-2019",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              false,
              true,
              false,
              false
             ]
            ],
            "label": "02-2019",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              false,
              false,
              true,
              false
             ]
            ],
            "label": "03-2019",
            "method": "restyle"
           },
           {
            "args": [
             "visible",
             [
              false,
              false,
              false,
              true
             ]
            ],
            "label": "04-2019",
            "method": "restyle"
           }
          ],
          "x": -0.05,
          "y": 1,
          "yanchor": "top"
         }
        ]
       }
      },
      "text/html": [
       "<div>\n",
       "        \n",
       "        \n",
       "            <div id=\"da6e03b9-e2b3-4e74-9692-a387e27cff01\" class=\"plotly-graph-div\" style=\"height:525px; width:100%;\"></div>\n",
       "            <script type=\"text/javascript\">\n",
       "                require([\"plotly\"], function(Plotly) {\n",
       "                    window.PLOTLYENV=window.PLOTLYENV || {};\n",
       "                    window.PLOTLYENV.BASE_URL='https://plot.ly';\n",
       "                    \n",
       "                if (document.getElementById(\"da6e03b9-e2b3-4e74-9692-a387e27cff01\")) {\n",
       "                    Plotly.newPlot(\n",
       "                        'da6e03b9-e2b3-4e74-9692-a387e27cff01',\n",
       "                        [{\"line\": {\"color\": \"#FFD700\", \"width\": 3}, \"name\": \"01-2019\", \"type\": \"scatter\", \"uid\": \"618ca95b-bf3f-4b8a-bda1-eb97024d3900\", \"y\": [0.0, 6.0, 39.0, 34.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 3.0, 3.0, 0.0, 8.0, 7.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 25.0, 12.0, 5.0, 6.0, 0.0, 5.0, 8.0, 10.0, 2.0, 8.0, 5.0, 11.0, 3.0, 1.0, 1.0, 4.0, 2.0, 0.0, 1.0, 22.0, 0.0, 0.0, 1.0, 1.0, 2.0, 0.0, 25.0, 0.0, 9.0, 3.0, 14.0, 2.0, 5.0, 1.0, 0.0, 0.0, 0.0, 0.0, 8.0, 5.0, 10.0, 0.0, 0.0, 0.0, 0.0, 27.0, 23.0, 0.0, 8.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 3.0, 6.0, 4.0, 4.0, 0.0, 0.0, 2.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 2.0, 22.0, 0.0, 0.0, 0.0, 0.0, 4.0, 0.0, 1.0, 0.0, 1.0, 75.0, 0.0, 0.0, 10.0, 28.0, 10.0, 3.0, 0.0, 3.0, 86.0, 36.0, 6.0, 8.0, 7.0, 22.0, 40.0, 0.0, 0.0, 9.0, 0.0, 11.0, 0.0, 5.0, 0.0, 0.0, 0.0, 9.0, 7.0, 4.0, 11.0, 23.0, 2.0, 0.0, 4.0, 12.0, 45.0, 17.0, 9.0, 0.0, 12.0, 4.0, 4.0, 4.0, 6.0, 55.0, 0.0, 0.0, -1.0, 0.0, 0.0, 1.0, 3.0, 0.0, 1.0, 4.0, 31.0, 22.0, 31.0, 6.0, 139.0, 55.0, 6.0, 53.0, 11.0, 47.0, 0.0, 4.0, 15.0, 15.0, 30.0, 0.0, 0.0, 54.0, 18.0, 48.0, 38.0, 82.0, 0.0, 0.0, 0.0, 0.0, 0.0, 14.0, 60.0, 20.0, 38.0, 37.0, 60.0]}, {\"line\": {\"color\": \"#C0C0C0\", \"width\": 3}, \"name\": \"02-2019\", \"type\": \"scatter\", \"uid\": \"327f81a8-dc75-4696-8e27-1d18660f13d1\", \"y\": [4.0, 6.0, 82.0, 67.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 10.0, 3.0, 0.0, 0.0, 0.0, 1.0, 2.0, 0.0, 0.0, 1.0, 3.0, 1.0, 5.0, 0.0, 19.0, 4.0, 1.0, 4.0, 1.0, 2.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 12.0, 3.0, 0.0, 0.0, 4.0, 0.0, 0.0, 2.0, 5.0, 8.0, 0.0, 0.0, 0.0, 3.0, 2.0, 4.0, 1.0, 3.0, 1.0, 1.0, 5.0, 3.0, 3.0, 11.0, 8.0, 11.0, 0.0, 0.0, 0.0, 0.0, 12.0, 1.0, 4.0, 5.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 2.0, 9.0, 14.0, 11.0, 0.0, 0.0, 7.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 4.0, 0.0, 0.0, 2.0, 2.0, 1.0, 1.0, 1.0, 0.0, 3.0, 89.0, 4.0, 4.0, 4.0, 29.0, 12.0, 1.0, 0.0, 0.0, 55.0, 27.0, 7.0, 2.0, 2.0, 11.0, 10.0, 3.0, 5.0, 12.0, 34.0, 23.0, 14.0, 0.0, 0.0, 0.0, 0.0, 16.0, 15.0, 16.0, 10.0, 11.0, 3.0, 5.0, 2.0, 1.0, 36.0, 38.0, 10.0, 0.0, 2.0, 4.0, 3.0, 7.0, 6.0, 12.0, 1.0, 1.0, 0.0, 1.0, 0.0, 11.0, 7.0, 3.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {\"line\": {\"color\": \"#BA8651\", \"width\": 3}, \"name\": \"03-2019\", \"type\": \"scatter\", \"uid\": \"759a1c5f-0f59-4c41-94f2-5c758d89160a\", \"y\": [1.0, 4.0, 36.0, 37.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 4.0, 4.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 2.0, 1.0, 0.0, 4.0, 3.0, 0.0, 3.0, 1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 8.0, 2.0, 0.0, 0.0, 3.0, 0.0, 0.0, 0.0, 1.0, 7.0, 0.0, 1.0, 0.0, 6.0, 1.0, 5.0, 2.0, 0.0, 0.0, 0.0, 1.0, 2.0, 1.0, 11.0, 2.0, 4.0, 0.0, 0.0, 0.0, 0.0, 12.0, 2.0, 2.0, 5.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 2.0, 15.0, 3.0, 0.0, 0.0, 2.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 3.0, 12.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 2.0, 35.0, 1.0, 2.0, 4.0, 15.0, 10.0, 3.0, 0.0, 1.0, 26.0, 10.0, 2.0, 0.0, 1.0, 7.0, 8.0, 1.0, 2.0, 9.0, 9.0, 5.0, 9.0, 1.0, 0.0, 0.0, 0.0, 18.0, 7.0, 5.0, 5.0, 12.0, 5.0, 4.0, 3.0, 3.0, 12.0, 20.0, 3.0, 0.0, 1.0, 2.0, 2.0, 0.0, 13.0, 18.0, 3.0, 5.0, 0.0, 2.0, 1.0, 2.0, 6.0, 2.0, 1.0, 7.0, 12.0, 10.0, 21.0, 37.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}, {\"line\": {\"color\": \"#000000\", \"width\": 4}, \"name\": \"04-2019\", \"type\": \"scatter\", \"uid\": \"95fa975e-48f6-4fbb-a2e0-7a5a9b5e738f\", \"y\": [1.0, 14.0, 40.0, 33.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 11.0, 4.0, 0.0, 0.0, 0.0, 0.0, 3.0, 3.0, 0.0, 3.0, 1.0, 2.0, 3.0, 4.0, 14.0, 10.0, 2.0, 4.0, 5.0, 0.0, 7.0, 0.0, 0.0, 1.0, 2.0, 2.0, 5.0, 0.0, 13.0, 1.0, 1.0, 3.0, 2.0, 0.0, 0.0, 0.0, 3.0, 5.0, 0.0, 14.0, 2.0, 11.0, 1.0, 9.0, 0.0, 6.0, 2.0, 0.0, 4.0, 0.0, 2.0, 19.0, 5.0, 22.0, 0.0, 0.0, 0.0, 0.0, 16.0, 10.0, 7.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 2.0, 3.0, 11.0, 6.0, 0.0, 0.0, 6.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 2.0, 26.0, 0.0, 0.0, 0.0, 0.0, 2.0, 1.0, 0.0, 0.0, 4.0, 30.0, 4.0, 1.0, 4.0, 16.0, 8.0, 1.0, 0.0, 4.0, 36.0, 7.0, 4.0, 1.0, 0.0, 2.0, 9.0, 1.0, 0.0, 18.0, 0.0, 9.0, 5.0, 0.0, 0.0, 0.0, 0.0, 24.0, 10.0, 16.0, 9.0, 11.0, 2.0, 4.0, 6.0, 11.0, 14.0, 12.0, 5.0, 0.0, 4.0, 0.0, 0.0, 1.0, 16.0, 14.0, 0.0, 0.0, 1.0, 1.0, 0.0, 6.0, 1.0, 2.0, 0.0, 0.0, 24.0, 25.0, 40.0, 52.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]}],\n",
       "                        {\"title\": {\"text\": \"2019 sale for each months\"}, \"updatemenus\": [{\"buttons\": [{\"args\": [\"visible\", [true, true, true, true]], \"label\": \"All\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [true, false, false, false]], \"label\": \"01-2019\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [false, true, false, false]], \"label\": \"02-2019\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [false, false, true, false]], \"label\": \"03-2019\", \"method\": \"restyle\"}, {\"args\": [\"visible\", [false, false, false, true]], \"label\": \"04-2019\", \"method\": \"restyle\"}], \"x\": -0.05, \"y\": 1, \"yanchor\": \"top\"}]},\n",
       "                        {\"showLink\": false, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\", \"responsive\": true}\n",
       "                    ).then(function(){\n",
       "                            \n",
       "var gd = document.getElementById('da6e03b9-e2b3-4e74-9692-a387e27cff01');\n",
       "var x = new MutationObserver(function (mutations, observer) {{\n",
       "        var display = window.getComputedStyle(gd).display;\n",
       "        if (!display || display === 'none') {{\n",
       "            console.log([gd, 'removed!']);\n",
       "            Plotly.purge(gd);\n",
       "            observer.disconnect();\n",
       "        }}\n",
       "}});\n",
       "\n",
       "// Listen for the removal of the full notebook cells\n",
       "var notebookContainer = gd.closest('#notebook-container');\n",
       "if (notebookContainer) {{\n",
       "    x.observe(notebookContainer, {childList: true});\n",
       "}}\n",
       "\n",
       "// Listen for the clearing of the current output cell\n",
       "var outputEl = gd.closest('.output');\n",
       "if (outputEl) {{\n",
       "    x.observe(outputEl, {childList: true});\n",
       "}}\n",
       "\n",
       "                        })\n",
       "                };\n",
       "                });\n",
       "            </script>\n",
       "        </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import plotly.plotly as py\n",
    "from plotly.graph_objs import *\n",
    "\n",
    "# countries = ['United States', 'China', 'South Korea', 'Hungary', 'Austraila', 'Canada']\n",
    "gold = yV[0]\n",
    "silver = yV[1]\n",
    "bronze = yV[2]\n",
    "total = yV[3]\n",
    "\n",
    "trace1 = Scatter(\n",
    "#     x=countries,\n",
    "    y=gold,\n",
    "    line=Line(\n",
    "        color='#FFD700',\n",
    "        width=3\n",
    "    ),\n",
    "    name=monthDate[0]\n",
    ")\n",
    "\n",
    "trace2 = Scatter(\n",
    "#     x=countries,\n",
    "    y=silver,\n",
    "    line=Line(\n",
    "        color='#C0C0C0',\n",
    "        width=3\n",
    "    ),\n",
    "    name=monthDate[1]\n",
    ")\n",
    "\n",
    "trace3 = Scatter(\n",
    "#     x=countries,\n",
    "    y=bronze,\n",
    "    line=Line(\n",
    "        color='#BA8651',\n",
    "        width=3\n",
    "    ),\n",
    "    name=monthDate[2]\n",
    ")\n",
    "\n",
    "trace4 = Scatter(\n",
    "#     x=countries,\n",
    "    y=total,\n",
    "    line=Line(\n",
    "        color='#000000',\n",
    "        width=4\n",
    "    ),\n",
    "    name=monthDate[3]\n",
    ")\n",
    "\n",
    "data = Data([trace1, trace2, trace3, trace4])\n",
    "layout = Layout(\n",
    "    title='2019 sale for each months',\n",
    "    updatemenus=list([\n",
    "        dict(\n",
    "            x=-0.05,\n",
    "            y=1,\n",
    "            yanchor='top',\n",
    "            buttons=list([\n",
    "                dict(\n",
    "                    args=['visible', [True, True, True, True]],\n",
    "                    label='All',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [True, False, False, False]],\n",
    "                    label=monthDate[0],\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, True, False, False]],\n",
    "                    label=monthDate[1],\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, False, True, False]],\n",
    "                    label=monthDate[2],\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, False, False, True]],\n",
    "                    label=monthDate[3],\n",
    "                    method='restyle'\n",
    "                )\n",
    "            ]),\n",
    "        )\n",
    "    ]),\n",
    ")\n",
    "fig = Figure(data=data, layout=layout)\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Add Multiple Dropdown Menus"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'temp-plot.html'"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import plotly.plotly as py\n",
    "from plotly.graph_objs import *\n",
    "\n",
    "trace1 = Scatter(\n",
    "#     x = monthDate[:4],\n",
    "    y = yV[0],\n",
    "    line=Line(\n",
    "        color='red',\n",
    "        shape='spline'\n",
    "    ),\n",
    "    name= monthDate[0]\n",
    ")\n",
    "\n",
    "trace2 = Scatter(\n",
    "#     x = monthDate[:4],\n",
    "    y = yV[1],\n",
    "    line=Line(\n",
    "        color='red',\n",
    "        shape='spline'\n",
    "    ),\n",
    "    name=monthDate[1],\n",
    "    visible=False,\n",
    ")\n",
    "\n",
    "trace3 = Scatter(\n",
    "#     x = monthDate[:4],\n",
    "    y = yV[2],\n",
    "    line=Line(\n",
    "        color='red',\n",
    "        shape='spline'\n",
    "    ),\n",
    "    name = monthDate[2],\n",
    "    visible=False,\n",
    ")\n",
    "\n",
    "trace4 = Scatter(\n",
    "#     x = monthDate[:4],\n",
    "    y = yV[3],\n",
    "    line=Line(\n",
    "        color='red',\n",
    "        shape='spline'\n",
    "    ),\n",
    "    name=monthDate[3],\n",
    "    visible=False,\n",
    ")\n",
    "\n",
    "data = Data([trace1, trace2, trace3, trace4])\n",
    "layout = Layout(\n",
    "    updatemenus=list([\n",
    "        dict(\n",
    "            x=-0.05,\n",
    "            y=0.8,\n",
    "            buttons=list([\n",
    "                dict(\n",
    "                    args=['line.color', 'red'],\n",
    "                    label='red',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['line.color', 'blue'],\n",
    "                    label='blue',\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['line.color', 'green'],\n",
    "                    label='green',\n",
    "                    method='restyle'\n",
    "                )\n",
    "            ]),\n",
    "            yanchor='top'\n",
    "        ),\n",
    "        dict(\n",
    "            x=-0.05,\n",
    "            y=1,\n",
    "            buttons=list([\n",
    "                dict(\n",
    "                    args=['visible', [True, False, False, False]],\n",
    "                    label=monthDate[0],\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, True, False, False]],\n",
    "                    label=monthDate[1],\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, False, True, False]],\n",
    "                    label=monthDate[2],\n",
    "                    method='restyle'\n",
    "                ),\n",
    "                dict(\n",
    "                    args=['visible', [False, False, False, True]],\n",
    "                    label=monthDate[3],\n",
    "                    method='restyle'\n",
    "                )\n",
    "            ]),\n",
    "            yanchor='top'\n",
    "        )\n",
    "    ]),\n",
    ")\n",
    "fig = Figure(data=data\n",
    "             \n",
    "             \n",
    "             \n",
    "             , layout=layout)\n",
    "iplot(fig)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Reference\n",
    "Check out https://plot.ly/python/reference/#layout-updatemenus for more information!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "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.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}