reporting/dashboard.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# PyctureStream Dashboard\n",
    "\n",
    "**Demo of a reporting Application based on Plotly Dash.**\n",
    "\n",
    "Implemented by Marcus. Focus was mainly to gain some experience with Dash."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import json\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "import plotly.graph_objs as go\n",
    "import pandas as pd\n",
    "import csv\n",
    "import plotly.plotly as py\n",
    "from dash.dependencies import Input, Output\n",
    "from datetime import datetime as dt\n",
    "import datetime"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{'event_type': 'person', 'timestamp': '2018-03-18 18:25:56.092099', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'book', 'timestamp': '2018-03-18 18:25:56.092099', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'book', 'timestamp': '2018-03-18 18:25:56.092099', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'book', 'timestamp': '2018-03-18 18:25:56.092099', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'person', 'timestamp': '2018-03-18 18:26:03.949571', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'chair', 'timestamp': '2018-03-18 18:26:03.949571', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'person', 'timestamp': '2018-03-18 18:26:11.830546', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'person', 'timestamp': '2018-03-18 18:26:15.766710', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'person', 'timestamp': '2018-03-18 18:26:23.652514', 'camera_id': 'holger_cam'}\n",
      "{'event_type': 'person', 'timestamp': '2018-03-18 18:26:31.633683', 'camera_id': 'holger_cam'}\n"
     ]
    }
   ],
   "source": [
    "with open('events.json') as f:\n",
    "    events = json.load(f) \n",
    "\n",
    "for event in events[:10]:  \n",
    "    print(event)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>camera_id</th>\n",
       "      <th>event_type</th>\n",
       "      <th>timestamp</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>book</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>book</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>book</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:03.949571</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>chair</td>\n",
       "      <td>2018-03-18 18:26:03.949571</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:11.830546</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:15.766710</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>8</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:23.652514</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>9</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:31.633683</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "    camera_id event_type                   timestamp\n",
       "0  holger_cam     person  2018-03-18 18:25:56.092099\n",
       "1  holger_cam       book  2018-03-18 18:25:56.092099\n",
       "2  holger_cam       book  2018-03-18 18:25:56.092099\n",
       "3  holger_cam       book  2018-03-18 18:25:56.092099\n",
       "4  holger_cam     person  2018-03-18 18:26:03.949571\n",
       "5  holger_cam      chair  2018-03-18 18:26:03.949571\n",
       "6  holger_cam     person  2018-03-18 18:26:11.830546\n",
       "7  holger_cam     person  2018-03-18 18:26:15.766710\n",
       "8  holger_cam     person  2018-03-18 18:26:23.652514\n",
       "9  holger_cam     person  2018-03-18 18:26:31.633683"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df = pd.DataFrame(events)\n",
    "df.head(10) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "camera_id             object\n",
       "event_type            object\n",
       "timestamp     datetime64[ns]\n",
       "dtype: object"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df['timestamp']=pd.to_datetime(df.timestamp)\n",
    "df.dtypes"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>camera_id</th>\n",
       "      <th>event_type</th>\n",
       "      <th>timestamp</th>\n",
       "      <th>hour</th>\n",
       "      <th>minute</th>\n",
       "      <th>year</th>\n",
       "      <th>month</th>\n",
       "      <th>week</th>\n",
       "      <th>weekday</th>\n",
       "      <th>day</th>\n",
       "      <th>just_date</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "      <td>18</td>\n",
       "      <td>25</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>book</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "      <td>18</td>\n",
       "      <td>25</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>book</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "      <td>18</td>\n",
       "      <td>25</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>book</td>\n",
       "      <td>2018-03-18 18:25:56.092099</td>\n",
       "      <td>18</td>\n",
       "      <td>25</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:03.949571</td>\n",
       "      <td>18</td>\n",
       "      <td>26</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>5</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>chair</td>\n",
       "      <td>2018-03-18 18:26:03.949571</td>\n",
       "      <td>18</td>\n",
       "      <td>26</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>6</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:11.830546</td>\n",
       "      <td>18</td>\n",
       "      <td>26</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>7</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:15.766710</td>\n",
       "      <td>18</td>\n",
       "      <td>26</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>8</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:23.652514</td>\n",
       "      <td>18</td>\n",
       "      <td>26</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>9</th>\n",
       "      <td>holger_cam</td>\n",
       "      <td>person</td>\n",
       "      <td>2018-03-18 18:26:31.633683</td>\n",
       "      <td>18</td>\n",
       "      <td>26</td>\n",
       "      <td>2018</td>\n",
       "      <td>3</td>\n",
       "      <td>11</td>\n",
       "      <td>Sunday</td>\n",
       "      <td>18</td>\n",
       "      <td>2018-03-18</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "    camera_id event_type                  timestamp  hour  minute  year  \\\n",
       "0  holger_cam     person 2018-03-18 18:25:56.092099    18      25  2018   \n",
       "1  holger_cam       book 2018-03-18 18:25:56.092099    18      25  2018   \n",
       "2  holger_cam       book 2018-03-18 18:25:56.092099    18      25  2018   \n",
       "3  holger_cam       book 2018-03-18 18:25:56.092099    18      25  2018   \n",
       "4  holger_cam     person 2018-03-18 18:26:03.949571    18      26  2018   \n",
       "5  holger_cam      chair 2018-03-18 18:26:03.949571    18      26  2018   \n",
       "6  holger_cam     person 2018-03-18 18:26:11.830546    18      26  2018   \n",
       "7  holger_cam     person 2018-03-18 18:26:15.766710    18      26  2018   \n",
       "8  holger_cam     person 2018-03-18 18:26:23.652514    18      26  2018   \n",
       "9  holger_cam     person 2018-03-18 18:26:31.633683    18      26  2018   \n",
       "\n",
       "   month  week weekday  day   just_date  \n",
       "0      3    11  Sunday   18  2018-03-18  \n",
       "1      3    11  Sunday   18  2018-03-18  \n",
       "2      3    11  Sunday   18  2018-03-18  \n",
       "3      3    11  Sunday   18  2018-03-18  \n",
       "4      3    11  Sunday   18  2018-03-18  \n",
       "5      3    11  Sunday   18  2018-03-18  \n",
       "6      3    11  Sunday   18  2018-03-18  \n",
       "7      3    11  Sunday   18  2018-03-18  \n",
       "8      3    11  Sunday   18  2018-03-18  \n",
       "9      3    11  Sunday   18  2018-03-18  "
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df['hour'] = df['timestamp'].dt.hour\n",
    "df['minute'] = df['timestamp'].dt.minute\n",
    "df['year'] = df['timestamp'].dt.year\n",
    "df['month'] = df['timestamp'].dt.month\n",
    "df['week'] = df['timestamp'].dt.week\n",
    "df['weekday'] = df['timestamp'].dt.weekday_name\n",
    "df['day'] = df['timestamp'].dt.day\n",
    "df['just_date'] = df['timestamp'].dt.date\n",
    "df.head(10) "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "book            2563\n",
       "person           871\n",
       "chair            250\n",
       "couch            169\n",
       "potted plant      55\n",
       "teddy bear        45\n",
       "laptop            43\n",
       "dining table      31\n",
       "bottle             8\n",
       "backpack           4\n",
       "cup                1\n",
       "Name: event_type, dtype: int64"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df['event_type'].value_counts()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "camera_id             object\n",
       "event_type            object\n",
       "timestamp     datetime64[ns]\n",
       "hour                   int64\n",
       "minute                 int64\n",
       "year                   int64\n",
       "month                  int64\n",
       "week                   int64\n",
       "weekday               object\n",
       "day                    int64\n",
       "just_date             object\n",
       "dtype: object"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df.dtypes"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      " * Running on http://127.0.0.1:8078/ (Press CTRL+C to quit)\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET / HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET /_dash-component-suites/dash_renderer/react@15.4.2.min.js?v=0.11.3 HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET /_dash-component-suites/dash_renderer/react-dom@15.4.2.min.js?v=0.11.3 HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET /_dash-component-suites/dash_html_components/bundle.js?v=0.9.0 HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET /_dash-component-suites/dash_core_components/plotly-1.33.1.min.js?v=0.19.0 HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET /_dash-component-suites/dash_core_components/bundle.js?v=0.19.0 HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:22] \"GET /_dash-component-suites/dash_renderer/bundle.js?v=0.11.3 HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"GET /_dash-layout HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"GET /_dash-dependencies HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"GET /favicon.ico HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"GET /favicon.ico HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:23] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:33] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "/home/holger/.anaconda3/envs/pycture/lib/python3.6/site-packages/ipykernel_launcher.py:169: SettingWithCopyWarning:\n",
      "\n",
      "\n",
      "A value is trying to be set on a copy of a slice from a DataFrame.\n",
      "Try using .loc[row_indexer,col_indexer] = value instead\n",
      "\n",
      "See the caveats in the documentation: http://pandas.pydata.org/pandas-docs/stable/indexing.html#indexing-view-versus-copy\n",
      "\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:33] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:33] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "/home/holger/.anaconda3/envs/pycture/lib/python3.6/site-packages/ipykernel_launcher.py:166: UserWarning:\n",
      "\n",
      "Boolean Series key will be reindexed to match DataFrame index.\n",
      "\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:42] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "/home/holger/.anaconda3/envs/pycture/lib/python3.6/site-packages/ipykernel_launcher.py:117: UserWarning:\n",
      "\n",
      "Boolean Series key will be reindexed to match DataFrame index.\n",
      "\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:42] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:47] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:47] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:32:57] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:33:02] \"POST /_dash-update-component HTTP/1.1\" 200 -\n",
      "127.0.0.1 - - [04/Apr/2018 10:33:02] \"POST /_dash-update-component HTTP/1.1\" 200 -\n"
     ]
    }
   ],
   "source": [
    "#start = datetime.datetime(2018, 1, 1 )\n",
    "#end = datetime.datetime.now\n",
    "\n",
    "available_camera_indicators = df['camera_id'].unique() \n",
    "av_camera_options=[{'value': i, 'label': i} for i in available_camera_indicators]\n",
    "\n",
    "available_event_indicators = df['event_type'].unique() \n",
    "av_event_options=[{'value': i, 'label': i} for i in available_event_indicators]\n",
    "\n",
    "\n",
    "\n",
    "app = dash.Dash()\n",
    "app.scripts.config.serve_locally=True  \n",
    "\n",
    "app.layout = html.Div(children=[\n",
    "    html.H1(children='Test Report', style= {'margin':'45px 0px 90px 50px'}), \n",
    "    \n",
    "    html.Div([   \n",
    "        html.P('Filter Dataset:', style={'margin':'0px 0px 5px 0px'}),\n",
    "        dcc.Dropdown(\n",
    "            id='camera-dropdown',\n",
    "            options=av_camera_options\n",
    "        ),   \n",
    "\n",
    "        dcc.Dropdown(\n",
    "            id='event-dropdown',\n",
    "            options=av_event_options\n",
    "        ),\n",
    "\n",
    "        dcc.Dropdown(\n",
    "            id='xaxis-dropdown',\n",
    "            options=[\n",
    "                {'label': 'minute', 'value': 'minute'},\n",
    "                {'label': 'weekday', 'value': 'weekday'},\n",
    "                {'label': 'hour', 'value': 'hour'}\n",
    "            ],\n",
    "            value='minute'\n",
    "        ),\n",
    "    ], style={          \n",
    "            'width': '170px',\n",
    "            'position': 'absolute',\n",
    "            'right': '10px',\n",
    "            'top': '10px',\n",
    "            'z-index': 10,\n",
    "            'background-color': '#f7f7f7',\n",
    "            'padding': '10px',\n",
    "            'border-radius': '13px',\n",
    "            'box-shadow': '1px 2px 5px rgba(0,0,0,0.5)'\n",
    "        }),\n",
    "    \n",
    "    html.Div([\n",
    "        html.Div([   \n",
    "            \n",
    "            dcc.Graph(\n",
    "                id='camera-graph-line',\n",
    "                figure={\n",
    "                    'data': [{'x':'df.minute', \n",
    "                             'y':'df.timestamp.count()',\n",
    "                             'text':'df.event_type', \n",
    "                             'type':'line', \n",
    "                             'name': 'IDK', \n",
    "                             'mode':'lines',\n",
    "                             'marker': {'size': 5}\n",
    "                             }]\n",
    "                }\n",
    "            ), \n",
    "        ], style={'flex': '1'}),             \n",
    "        html.Div([\n",
    "            dcc.Graph(\n",
    "                id='camera-graph-histogram',\n",
    "                figure={\n",
    "                    'data': [{'x':'df.minute',  \n",
    "                             'y':'df.timestamp.count()',\n",
    "                             'text':'df.event_type', \n",
    "                             'type':'histogram', \n",
    "                             'name' : 'IDK', \n",
    "                             'mode':'markers', \n",
    "                             'className':'col s12 m6 l6'\n",
    "                            }]\n",
    "                }\n",
    "\n",
    "            ),\n",
    "        ], style={'flex': '1'}),     \n",
    "        \n",
    "        html.Div([\n",
    "            \n",
    "            dcc.Graph(\n",
    "                id='camera-graph-pie',\n",
    "                figure={\n",
    "                    'data': [\n",
    "                            {'values':[    #hab ich die Möglichkeit das zu kontrollieren / Testen? Es kommt keine Fehlermeldung der der Graph ist sofort aktualisiert.\n",
    "                                av_event_options\n",
    "                            ], 'labels':[av_event_options], 'type':'pie'}\n",
    "\n",
    "                    ]\n",
    "                }\n",
    "            ),\n",
    "        ], style={'flex': '1'})     \n",
    "    ], style={'display': 'flex'})   \n",
    "    \n",
    "\n",
    "])\n",
    "    \n",
    "\n",
    "\n",
    "@app.callback(\n",
    "    Output('camera-graph-histogram', 'figure'),\n",
    "    [Input('event-dropdown', 'value'),\n",
    "     Input('camera-dropdown', 'value'),\n",
    "     Input('xaxis-dropdown', 'value')])\n",
    "def update_graph1(selected_dropdown_value1, selected_dropdown_value2, selected_dropdown_value3):\n",
    "    \n",
    "    if selected_dropdown_value1 != None:\n",
    "        df_histogramm = df[df.event_type == selected_dropdown_value1]\n",
    "    else:df_histogramm = df\n",
    "    if selected_dropdown_value2 != None:\n",
    "        df_hisogramm_second_update = df_histogramm[df.camera_id == selected_dropdown_value2]\n",
    "    else: df_hisogramm_second_update = df_histogramm\n",
    "    return{\n",
    "        'data':[go.Scatter(\n",
    "            x=df_hisogramm_second_update[selected_dropdown_value3],\n",
    "            y=df_hisogramm_second_update['timestamp'].count(),  \n",
    "            text=df_hisogramm_second_update['event_type'],\n",
    "            name= 'IDK',\n",
    "            type='histogram',\n",
    "            mode='markers')\n",
    "        ],\n",
    "            'layout': {\n",
    "                'title' : 'Reporting cameras'\n",
    "            }\n",
    "    }\n",
    "    \n",
    "@app.callback(\n",
    "    Output('camera-graph-pie', 'figure'),\n",
    "    [Input('camera-dropdown', 'value')])\n",
    "def update_graph2(selected_dropdown_value2):\n",
    "    if selected_dropdown_value2 != None:\n",
    "        df_graph_pie = df[df.camera_id == selected_dropdown_value2]\n",
    "    else: df_graph_pie=df\n",
    "    df_event_types = df_graph_pie.groupby('event_type').count()\n",
    "    \n",
    "    return{\n",
    "        'data':[go.Pie(\n",
    "            values=df_event_types.iloc[:,0],      \n",
    "            labels=df_event_types.index.values,   \n",
    "            text=df_graph_pie['event_type'],\n",
    "            name= 'IDK',\n",
    "            hole= .4,\n",
    "            type='pie')\n",
    "        ],\n",
    "            'layout': {\n",
    "                'title' : 'Reporting cameras-Pie'\n",
    "            }\n",
    "    } \n",
    "\n",
    "\n",
    "@app.callback(\n",
    "    Output('camera-graph-line', 'figure'),\n",
    "    [Input('event-dropdown', 'value'),\n",
    "     Input('camera-dropdown', 'value')])\n",
    "def update_graph3(selected_dropdown_value1, selected_dropdown_value2):  \n",
    "    if selected_dropdown_value1 != None:\n",
    "        df_graph_line = df[df.event_type == selected_dropdown_value1]\n",
    "    else:df_graph_line = df\n",
    "    if selected_dropdown_value2 != None:\n",
    "        df_graph_line_second_update = df_graph_line[df.camera_id == selected_dropdown_value2]\n",
    "    else: df_graph_line_second_update = df_graph_line\n",
    "        \n",
    "    df_graph_line_second_update['datetime'] = pd.to_datetime(df_graph_line_second_update['timestamp'], format='%d%b%Y %H:%M:%S.%f')\n",
    "\n",
    "    df_graph_line_second_update = df_graph_line_second_update.set_index('datetime')\n",
    "\n",
    "    df_resampled = df_graph_line_second_update.resample('15Min').count()   \n",
    "    \n",
    "\n",
    "    return{\n",
    "        'data':[go.Scatter(\n",
    "            x=df_resampled.index,          \n",
    "            y=df_resampled['timestamp'],   \n",
    "            text=df_graph_line_second_update['event_type'],\n",
    "            name= 'IDK',\n",
    "            type='line',\n",
    "            mode='lines+markers')\n",
    "        ],\n",
    "            'layout': {\n",
    "                'title' : 'Reporting cameras line'\n",
    "            }\n",
    "    }\n",
    "\n",
    "\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    app.run_server(debug=False, port=8078)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}