Python / Dash:如何按日期对Dash分组案例进行散点图?

时间:2018-07-01 19:44:05

标签: python plotly-dash

我有我的应用程序(final_test.py)和演示数据集(final_test.csv),我想要做的就是能够从数据集中绘制散点图或条形图(每天的案例数)。

这是我在final_test.py上的代码:

#### Importing DASH COMPONENTS ##############################################################################
#coding: utf-8

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

from plotly import graph_objs as go # or
#import plotly.graph_objs as go
import ipywidgets as widgets
from scipy import special

import datetime #To allow displaying today's Date in upper right corner

import json
import pandas as pd
import os
from flask import Flask
import numpy as np



#### Preparing FLASK App ####################################################################################
server = Flask('my app')

#### SCATTER PLOT  ########################################################################################## 

dfb=pd.read_csv('final_test.csv', encoding="latin-1", infer_datetime_format=True, parse_dates=['date'], sep=",")

trace1=go.Bar(                              #Trace Enrollment

    x=pd.to_datetime(dfb['date']), # IT WORKS ALMOST DONE!
    #x=dfb['date'], # IT WORKS ALMOST DONE
    #x=pd.to_datetime(dfb.date, format='%m-%d-%y'), #IT WORKS NO EFFECT
    y=dfb.set_index('date').resample('D')["enrolled"].sum(), #IT WORKS ALMOST DONE!

    #mode='lines + markers',
    name='Enrollment',
)

trace2=go.Bar(                              #Trace empty enrollment
    x=pd.to_datetime(dfb['date']),
    y=dfb[dfb['enrolled'].isnull()].sum(),  # IT WORKS ALMOST DONE!
    name='Not Answered',
    #xaxis='Performance'
)

trace3=go.Bar(                              #Trace Rejection to Enrollment
    x=pd.to_datetime(dfb['date']),
    y=dfb[dfb['enrolled'] == 2].sum(),
    name='Rejected Participation',
    #xaxis='Performance'
)

#############################################################################################################

app = dash.Dash()

# Describe the layout, or the UI, of the app
app.layout = html.Div([

    html.Div([  # page 1

        html.A(['Print PDF'],
               className="button no-print",
               style={'position': "absolute", 'top': '-40', 'right': '0'}),

        html.Div([  # subpage 1

            # Row 1 (Header)

            html.Div([

                html.Div([
                    html.H5(
                        'An Example of DashBoard in Dash from Plotly'),
                    html.H6('Summary',
                            style={'color': '#7F90AC'}),
                ], className="nine columns padded"),

                html.Div([
                    html.H1(
                        #[html.Span('03', style={'opacity': '0.5'}), html.Span('17')]),
                        datetime.datetime.now().strftime('%Y-%m-%d'), style={'opacity': '1','color': 'white', 'fontSize': 12}),
                    html.H1(datetime.datetime.now().strftime('%H:%M:%S'), style={'font-family': 'Times New Roman','opacity': '0.5','color': 'white', 'fontSize': 12}),
                    html.H6('Daily Updates')
                ], className="three columns gs-header gs-accent-header padded", style={'float': 'right'}),

            ], className="row gs-header gs-text-header"),

            html.Br([]),

            # Row 2

            html.Div([

                html.Div([
                    html.H6('Resume',
                            className="gs-header gs-text-header padded"),



                ], className="four columns"),



                html.Div([

               html.Div(children=[

    html.H6(["Performance"],
                            className="gs-header gs-table-header padded"),                  
        dcc.Graph(
            id='example-graph',
            figure={
                'data': [trace1, trace2, trace3],
                'layout':
                go.Layout(
                title='', width="508", height="300", legend=dict(x=0, y=7),
                margin={'l': 20, 'b': 40, 't': 10, 'r': 65},

                font=dict(
            family='sans-serif',
            size=8,
            color='#000'
        ), 

        plot_bgcolor='#D9E0EC',



                xaxis=dict(


        title='',
        tickangle=45,
        ticklen=5,
        #zeroline=False,
        gridwidth=2,
        showticklabels=True,
        nticks=6,
    ),
    yaxis=dict(
        title='',
        ticklen=5,
        gridwidth=4,
    ),

                )#, barmode='stack')
        })
]),


     ], className="eight columns"),
 ], className="row "),



        ], className="subpage"),

    ], className="page"),



])

if 'DYNO' in os.environ:
    app.scripts.append_script({
        'external_url': 'https://cdn.rawgit.com/chriddyp/ca0d8f02a1659981a0ea7f013a378bbd/raw/e79f3f789517deec58f41251f7dbb6bee72c44ab/plotly_ga.js'
    })

external_css = ["https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
                "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
                "//fonts.googleapis.com/css?family=Raleway:400,300,600",
                "https://cdn.rawgit.com/plotly/dash-app-stylesheets/5047eb29e4afe01b45b27b1d2f7deda2a942311a/goldman-sachs-report.css",
                "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"]

for css in external_css:
    app.css.append_css({"external_url": css})

external_js = ["https://code.jquery.com/jquery-3.2.1.min.js",
               "https://cdn.rawgit.com/plotly/dash-app-stylesheets/a3401de132a6d0b652ba11548736b1d1e80aa10d/dash-goldman-sachs-report-js.js"]

for js in external_js:
    app.scripts.append_script({"external_url": js})


if __name__ == '__main__':
    app.server.run()

这是我在final_test.csv上的数据集: 我将在“注释/答案”部分中添加内容,因为我无权在此处添加更多代码。

问题:如何使用这些数据集和Dash应用程序绘制散点图或条形图? 谢谢

1 个答案:

答案 0 :(得分:0)

这是我来自final_test.py的数据:

date    enrolled
6/29/2018   1
6/29/2018   1
6/29/2018   
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/20/2018   1
6/20/2018   1
6/22/2018   1
6/19/2018   1
6/19/2018   1
6/27/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   
6/28/2018   1
6/28/2018   1
6/20/2018   1
6/20/2018   1
6/19/2018   1
6/19/2018   1
6/26/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/19/2018   1
6/19/2018   1
6/19/2018   1
6/22/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/19/2018   1
6/19/2018   1
6/19/2018   1
6/19/2018   1
6/19/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/19/2018   1
6/26/2018   1
6/26/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   
6/26/2018   1
6/27/2018   
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/29/2018   1
6/26/2018   
6/27/2018   1
6/28/2018   
6/28/2018   1
6/19/2018   1
6/19/2018   1
6/19/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/20/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/20/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/20/2018   1
6/21/2018   1
6/21/2018   1
6/21/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/26/2018   1
6/26/2018   1
6/22/2018   1
6/22/2018   1
6/22/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/27/2018   1
6/27/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/19/2018   1
6/19/2018   1
6/19/2018   1
6/20/2018   1
6/20/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/27/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/26/2018   1
6/27/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/27/2018   1
6/27/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/28/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1
6/29/2018   1