0

I am newbee to python Dash. I need help regarding how to use Dash Core Components clickData to update the graph.

I have made a map and upon clicking its marker, it should display the graph of particular Network operator. However, whenever I click the graph, it displays that string indices must be integers for line

    app=dash.Dash()

    def data_sort():
            Stats1='C:/Users/muzamal.pervez/Desktop/Python Scripts/Second Project/IBRoamers.csv'
            LOC1='C:/Users/muzamal.pervez/Desktop/Python Scripts/Second Project/mcc-mnc-table.csv'

            DF1=pd.read_csv(Stats1)
            Table=pd.read_csv(LOC1,encoding = "ISO-8859-1")

            DF2=DF1.groupby(['Start Time', 'MCC', 'MNC']).sum()
            DF2=DF2.reset_index()
            DF2.insert(loc=1, column='NE Name', value='NWD')
            DF=pd.concat([DF1,DF2])
            #DF['Start Time']=pd.to_datetime(DF['Start Time'])
            DF=DF.sort_values(by=['Start Time','MCC', 'MNC'], ascending=False)
            DF=DF.reset_index(drop=True)

            DF['2G_Attach_SR(%)']=(DF['Gb mode attach accept times per PLMN (times)']/DF['Gb mode attach request times per PLMN (times)'])*100
            DF['3G_Attach_SR(%)']=(DF['Iu mode attach accept times per PLMN (times)']/DF['Iu mode attach request times per PLMN (times)'])*100
            DF['LTE_Combined_Attach_SR(%)']=(DF['S1 Mode Combined Attach Success Times for EPS and non-EPS Services per PLMN (times)']/DF['S1 Mode Combined Attach Request Times per PLMN (times)'])*100
            DF['2G_PDP_SR(%)']=((DF['Gb mode MS init PDP context act request times per PLMN (times)']-DF['Gb mode MS init PDP context act fail times per PLMN (times)'])/DF['Gb mode MS init PDP context act request times per PLMN (times)'])*100
            DF['3G_PDP_SR(%)']=(DF['Iu mode MS init PDP context act success times per PLMN (times)']/DF['Iu mode MS init PDP context act request times per PLMN (times)'])*100
            DF['LTE_PDN_Connect_SR(%)']=(DF['S1 Mode PDN Connect Success Times per PLMN (times)']/DF['S1 Mode PDN Connect Request Times per PLMN (times)'])*100
            DF['2G_Att_Fail(times)']=DF['Gb mode attach request times per PLMN (times)']-DF['Gb mode attach accept times per PLMN (times)']
            DF['2G_PDP_Fail(times)']=DF['Gb mode MS init PDP context act fail times per PLMN (times)']
            DF['3G_Att_Fail(times)']=DF['Iu mode attach request times per PLMN (times)']-DF['Iu mode attach accept times per PLMN (times)']
            DF['3G_PDP_Fail(times)']=DF['Iu mode MS init PDP context act request times per PLMN (times)']-DF['Iu mode MS init PDP context act success times per PLMN (times)']
            DF['LTE_Att_Fail(times)']=DF['S1 Mode Combined Attach Request Times per PLMN (times)']-DF['S1 Mode Combined Attach Success Times for EPS and non-EPS Services per PLMN (times)']
            DF['LTE_PDP_Fail(times)']=DF['S1 Mode PDN Connect Request Times per PLMN (times)']-DF['S1 Mode PDN Connect Success Times per PLMN (times)']
            DF['Total_Att_Fail(times)']=DF['2G_Att_Fail(times)']+DF['3G_Att_Fail(times)']+DF['LTE_Att_Fail(times)']
            DF['Total_PDP_Fail(times)']=DF['2G_PDP_Fail(times)']+DF['3G_PDP_Fail(times)']+DF['LTE_PDP_Fail(times)']
            DF['Attached Users(2G,3G,LTE)']=DF['Iu mode attached Average user number per PLMN (number)']+DF['Gb mode attached Average user number per PLMN (number)']+DF['Gb mode attached Average user number per PLMN (number)']
            DF['MCCMNC']=(DF['MCC'].str[-3:]) + (DF['MNC'].str[-2:])
            Table['MCCMNC']=Table['MCCMNC'].astype(str)
            DF=DF.merge(Table, on='MCCMNC')
            DF['Start Time']=pd.to_datetime(DF['Start Time'])
            Latest=DF['Start Time'].max()
            DF.to_csv('DF.csv', index=False)
            DF3=DF[DF['Start Time']==Latest]
            DF3=DF3[DF3['NE Name']=='NWD']
            DF3=DF3.drop(DF3[DF3['Attached Users(2G,3G,LTE)']<50].index)
            DF3=DF3.drop(DF3[DF3['MCCMNC']=='41001'].index)
            DF3=DF3.drop(DF3[DF3['MCCMNC']=='41007'].index)
            DF3=DF3.reset_index(drop=True)
            DF3['Text']=DF3['MCCMNC'].astype(str)+' '+DF3['Country']+ ":"+DF3['Network']+ "Total IB roamers: "+DF3['Attached Users(2G,3G,LTE)'].astype(str)
            DF3.to_csv('DF3.csv', index=False)
            scale = 15

            data = dict(
                    type = 'scattergeo',
                    autosize=False, 
                    width=2000,
                    height=2000,
                    locationmode = 'world',
                    lon = DF3['Long1'],
                    lat = DF3['Lat1'],
                    text = DF3['Text'],
                    customdata=DF3['MCCMNC'].astype(int),
                    marker = dict(
                        size = DF3['Attached Users(2G,3G,LTE)']/scale,
                         color = np.where(((DF3['3G_Attach_SR(%)'] < 70)|(DF3['2G_Attach_SR(%)'] < 70)|(DF3['3G_PDP_SR(%)'] < 70)|(DF3['2G_PDP_SR(%)'] < 70))&((DF3['2G_Att_Fail(times)']>500)|(DF3['2G_PDP_Fail(times)']>500)|(DF3['3G_Att_Fail(times)']>500)|(DF3['3G_PDP_Fail(times)']>500)), 'red', 'green'),
                        line=dict(color='#7FFF00'),
                        sizemode = 'area'
                    )
                ),
            layout = dict(
                    title = 'Jazz IB Roamers from around the Globe',
                    showlegend = False,
                    geo = dict(
                        resolution=50,
                        scope='world',
                        projection=dict( type='world' ),
                        showcoastlines=True,
                        coastlinecolor="#F4A460",
                        coastlinewidth=0.2,
                        showland = True,
                        showframe=False,
                        showocean=True,
                        showcountries=True,
                        showcountrycodes=True,
                        showcontinents=True,
                        showrivers=True,
                        rivercolor="#F4A460",
                        riverwidth=0.2,
                        showlakes=True,
                        lakecolor="#F4A460",
                        lakewidth=0.2,
                        landcolor = '#262626',
                        oceancolor='#000033',
                        showsubunit=True,
                        subunitwidth=0.2,
                        countrywidth=0.5,
                        subunitcolor="#F4A460",
                        countrycolor="#F4A460"
                    ),
                )


            fig = dict( data=data, layout=layout )
            return fig

        app.layout  = html.Div([
            dcc.Graph(id='Map1', figure=data_sort()),
              html.Div([
                dcc.Dropdown(
                id='my_dropdown',
                options=[
                    {'label': 'NWD', 'value': 'NWD'},
                    {'label': 'ISB', 'value': 'USN-ISB'},
                    {'label': 'KHI', 'value': 'USN-KHI'},
                    {'label': 'LHR', 'value': 'USN-LHR'}
                ],
                value='NWD')]),
            dcc.Interval(id='graph-update',interval=300000),
            dcc.Graph(id='graph1', animate=True,clickData={'points': [{'customdata': '42403'}]})
        ])

        @app.callback(
            dash.dependencies.Output('graph1','figure'),
            [dash.dependencies.Input('my_dropdown', 'value'),
            dash.dependencies.Input('Map1', 'clickData')],
            events=[dash.dependencies.Event('graph-update', 'interval')]
            )
        def Graph1(clickData, USN):
            data_sort()
            address2 = 'C:/Users/muzamal.pervez/Desktop/Python Scripts/DF.csv'
            DF6=pd.read_csv(address2)
            DF6=DF6.loc[DF6['NE Name'] == USN]
            mccmnc = clickData['points']['customdata']
            DF6=DF6.loc[DF6['MCCMNC'] == mccmnc]
            return {
                'data': [{
                        'x': DF6['Start Time'],
                        'y': DF6['2G_Attach_SR(%)'],
                        'name':'{} ::2G Roaming Attach SR'.format(USN),
                            'line' : {
                                'color':'#00CD00'
                            }

                    }, 
                    {
                    'x': DF6['Start Time'],
                    'y': DF6['3G_Attach_SR(%)'],
                        'name':'{} ::3G Roaming Attach SR'.format(USN),
                         'line' : {
                                'color':'#4876FF'
                            }

                    }
                    ],
                    'layout' : go.Layout(
                      title='Live Throughput Trend(Mbps)',
                      titlefont=dict(
                      size=36,
                      color='#212121'
                       ),
                      xaxis=dict(
                      title='Start Time',
                      titlefont=dict(
                      family='Courier New, monospace',
                      size=24,
                      color='#030303'
                    )
                ),
                    yaxis=dict(
                    title='Throughput(Mbps)',
                    titlefont=dict(
                    family='Courier New, monospace',
                    size=24,
                    color='#030303'
                )
            )
                    )
            }

        if __name__ == '__main__':
            app.run_server(debug=False)

My Map turns out to work fine but I do not know how to use clickdata to update my graph. My Complete code shows the error message that string indices must be integers. Maybe I am missing something wrong?

1 Answer 1

1
@app.callback(
        dash.dependencies.Output('graph1','figure'),
        [dash.dependencies.Input('my_dropdown', 'value'),
        dash.dependencies.Input('Map1', 'clickData')],
        events=[dash.dependencies.Event('graph-update', 'interval')]
        )
    def Graph1(clickData, USN)

Here your clickData is the input number 2 so you should use something like that:

@app.callback(
        dash.dependencies.Output('graph1','figure'),
        [dash.dependencies.Input('my_dropdown', 'value'),
        dash.dependencies.Input('Map1', 'clickData')],
        events=[dash.dependencies.Event('graph-update', 'interval')]
        )
    def Graph1(USN, clickData)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.