Columns not displaying correctly using python dash and mongo db

Question

I am working on a project and after finally getting around some Type errors, I am finally getting my chart to display but it is listing each character in each mongo db json document instead of in proper json form. I am a total noob at this and I cannot seem to get it right so any help that can be offered in getting my interactive chart displayed as well as my pie chart and location chart will be greatly appreciated. I think the problem is derived from how the data is being entered into the dataframe but I can not figure it out.

Here is the read functions that are being used to take the info from the mongo db and send it to the Python script:

def read(self, data):
        if data !=None:  # checks to make sure that the received data is not null
            result = self.database.animals.find(data).limit(35)
            return result
        else:
            raise Exception("Data entered is null!")

def readAll(self, data):
        found = self.database.animals.find({}).limit(35)    
        return(found)

Here is the code for the python script that has imported dash:

from jupyter_plotly_dash import JupyterDash 

import dash
import dash_leaflet as dl
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import dash_table
from dash.dependencies import Input, Output
from bson.json_util import dumps,loads
import bson
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from pymongo import MongoClient
from AAC import AnimalShelter


###########################
# Data Manipulation / Model
###########################
# FIX ME update with your username and password and CRUD Python module name

username = "aacuser"
password = "Melvin1234!"
shelter = AnimalShelter()
shelter._init_(username,password)


# class read method must support return of cursor object and accept projection json input
df =pd.DataFrame.from_records(list(dumps(shelter.readAll({}))))

dff = pd.DataFrame.from_records(list(dumps(shelter.readAll({}))))



#########################
# Dashboard Layout / View
#########################

app = JupyterDash('SimpleExample')
import base64




app.layout = html.Div([
    html.Div(id='hidden-div', style={'display':'none'}),
    html.Center(html.B(html.H1('SNHU CS-340 Dashboard'))),
    html.Div(className='header',
             children=[html.Center(html.Img(src='/home/16514911_snhu/Downloads/Grazioso Salvare Logo.jpg',width="500", height="600")), #image logo
                      html.Center(html.B(html.H6('Jacqueline Woods')))]), #Unique Handle
    html.Br(),
    html.Div(className ='row',
            children=[
                html.Button(id='submit-button-one',n_clicks=0, children='Cats'),
                html.Button(id='submit-button-two',n_clicks=0,children='Dogs') ]),
    
    html.Div(dash_table.DataTable(
            id='datatable-interactivity',
                columns=[
                    {"name": i, "id": i,"age_upon_outcome":i, 'animal_id':i,'animal_type':i,'breed':i,"color":i,
                     'date_of_birth':i,'datetime':i,'monthyear':i,'outcome_subtype':i,'outcome_type':i,'sex_upon_outcome':i,
                     'location_lat':i,'location_long':i,'age_upon_outcome_in_weeks':i,
                    "deletable": False, "selectable": True} for i in df.columns]
                    ,data=df.to_dict('records'),editable = False,filter_action='native')),
     html.Br(),  
     html.Div(
            dcc.Graph(            #piechart
                id ='graph_id',
                figure=list(dumps(shelter.readAll({})))
                           ),
            title="Outcome_Type"),
       
      html.Br(),
      html.Div(   #location map
            id='map-id',
            className='col s12 m6',
            title="Location"
            )]) 
            
        
       

 ##Interaction Between Components / Controller

#This callback will highlight a row on the data table when the user selects it
@app.callback(
    Output('datatable-interactivity',"data"),
    [Input('submit-button-one','n_clicks'),
    Input('submit-button-two','n_clicks')
    ]
)
def on_click(bt1, bt2):
    if(int(bt1) ==0 and int(bt2) ==0):
        df =pd.DataFrame.from_records(shelter.readAll({}))
    elif (int(bt1) > int(bt2)):
            df = pd.DataFrame(dumps(shelter.read({"animal__type":"Cat"})))
            df =pd.DataFrame(dumps(shelter.read({"animal_type":"Dog"})))
    return df.to_dict('records')
@app.callback(
    Output('datatable-interactivity', 'style_data_conditional'),
    [Input('datatable-interactivity', 'selected_columns')]
)
def update_styles(selected_columns):
    return [{
        'if': { 'column_id': i },
        'background_color': '#D2F3FF'
    } for i in selected_columns]

@app.callback(
    Output('graph_id','figure'),
    [Input('datatable-interactivity',"derived_virtual_data")])
def update_Graph(allData):
    dff= pd.DataFrame(allData)
    pieChart = px.pie(
        data_frame=dff,
        names=dff['outcome_type'],
        hole = 3,
    )
    return pieChart

@app.callback(
    Output('map-id', "children"),
    [Input('datatable-interactivity', 'derived_viewport_data'),
     Input('datatable-interactivity', 'derived_virtual_selected_rows')
    ])
def update_map(viewData):
#FIXME Add in the code for your geolocation chart
    dff = pd.DataFrame.from_dict(viewData)
    dff = df if viewData is None else pd.DataFrame(viewData)
    selected_animal = None
    if not derived_virtual_selected_rows:
        slected_animal = dff.iloc[0]
    else:
        slected_animal = dff.iloc[derived_vertual_selected_rows[0]]
    latitude = selected_animal[12]
    longitude =selected_animal[13]
    breed = selected_animal[3]
    name = selected_animal[0]
    # Austin TX is at [30.75,-97.48]
    return [
        dl.Map(style={'width': '1000px', 'height': '500px'}, center=[30.75,-97.48], zoom=10, children=[
            dl.TileLayer(id="base-layer-id"),
            # Marker with tool tip and popup
            dl.Marker(position=[latitude,longitude], children=[
                dl.Tooltip(breed),
                dl.Popup([
                    html.H1("Animal Name"),
                    html.P(name)
                ])
            ])
        ])
    ]

app

Answer 1

I was in the same boat as you searching for answers online. I happened to found the answer. Hopefully, this can help others who are experiencing this problem.

#Convert the pymongo cursor into a pandas DataFrame
df = pd.DataFrame(list(shelter.readAll({})))

#Drop the _id column generated by Mongo
df = df.iloc[:, 1:]

After that, you can access the data of the DataFrame by using

df.to_dict('records')