Plotly bar graph doesn't display True and False colors properly

hi

I have data related to the number solves of different types of questions, The questions are either theory questions, assignment questions or neither.

I have two bar graphs with sliders that shows the number of solves per week. one shows if a question is a theory question or not, the other is meant to show whether the question is an assignment question or not.

I am using this though python and I store the data in a pandas dataframe.

As you can guess, the assignment questions don’t work for some reason. I have the data extracted from an SQL table so that means the values are either 1 or 0 initially…

When I leave the assignment questions as 1’s or 0’s the graph looks like this:

The issue comes when I decide to add the values “True” or “False” when adding the values to the pandas dataframe:

What makes this REALLY annoying is that the theory question appears to be identical until the assignment question graph falls short…

This is when the values are 1 and 0 just like the other graph:

But then this happens when I set 1 == true and 0 == false:

The colors I’m looking for are in the theory questions graph but NOT in the assignment questions table for whatever reason.

To add to the confusion, these two tables extract the same data from the same dataframe!

THanks for the help:)

Hi @PAIN Welcome to the community.

The main difference between these graphs is that if plotting 0/1 you are plotting numerical data, if plotting True/False you are plotting categorical data.

For the numerical data you have one trace and a colorbar. For the categorical data you have two traces with different colors.

Not sure what you are after, though. Is the main problem the colors?

2 Likes

The data not showing up correctly is the main problem, they just don’t show up properly for the assignment question.

My goal is for this graph to show up with all the valid data:

This above photo has the exact same point in the data as the below photo:

Even though both points should, and in fact, do have the same data, I dont know why it doesn’t show up properly…

I’m back after some time doing studies.

Not sure what’s going on because when I remove the part of the line to specify the color wanted, the data shows perfectly fine. But the thing I want IS the colors.

The only time this doesn’t work is when I specify the column that I want to use for the colors. I have NO clue why this is. :frowning:

I’ve tried replacing the column in the pandas dataframe with “A” and “B” instead but the problem remains. What’s weird is this same change doesn’t do anything to my theory graph, which is based of the exact same dataframe…

WHAT?!?!

D:

I’m just going to avoid this graph altogether because this frustrating bug’s been here for literal MONTHS and I haven’t figured out what’s causing it. :sob:

Hey @PAIN,

If you share data & code I’m pretty sure we get the graph how you would like it to be.

1 Like

Here’s the code that’s being used for testing these graphs.

weekly_solve_dictionary = {} # Format {week: {question_id: [count, question_name, assignment_question, theory_question], question_id: [count, question_name, assignment_question, theory_question], ...}, {question_id: ..., question_id: ..., ...}, ...}

# Extracting needed data
for pos, (question_id, question_name, completion_time, assignment_question, theory_question) in enumerate(cursor.execute("""
                                                                                   SELECT question_completions.question_id_fk, questions.question_name, question_completions.completion_time, questions.assignment_question, questions.theory_question
                                                                                   FROM questions, question_completions
                                                                                   WHERE
                                                                                   questions.question_id = question_completions.question_id_fk
                                                                                   """)):
    
    completion_week = pd.Timestamp(completion_time.replace(second = 0, microsecond = 0, minute = 0, hour = 0)).to_period('W').start_time # Getting the completion week of the questions.

    # Creating 'weekly_solve_dictionary'
    if completion_week in weekly_solve_dictionary:

        # Incrementing 'question_id' count for a given existing week.
        if question_id in weekly_solve_dictionary[completion_week]:
            weekly_solve_dictionary[completion_week][question_id][1] += 1 # If the question ID already exists in the week.
        else:
            weekly_solve_dictionary[completion_week][question_id] = [question_name, 1, assignment_question, theory_question] # Initialises the dictionary item if it doesn't already exist.

    else:
        weekly_solve_dictionary[completion_week] = {question_id: [question_name, 1, assignment_question, theory_question]}

connection.close()
# ===================== POPULATING GRAPH =====================

# Populate the lists of values with the data from 'weekly_solve_dictionary'
question_id_list = []
question_name_list = []
current_solve_list = []
completion_time_list = []
assignment_question_list = []
theory_question_list = []

for week, solves in weekly_solve_dictionary.items():
    for question_id, [question_name, weekly_solves, assignment_question, theory_question] in solves.items():
        # assignment_question = "A" if assignment_question == 1 else "B" # [NOPE] Testing to see if it's the true and the false thing that's somehow causing the issues.
        # assignment_question = True if assignment_question == 0 else False # [NOPE] Testing to see if swapping these will make the colours show up properly in the assignment question weekly graph.
        
        assignment_question = True if assignment_question == 1 else False
        theory_question = True if theory_question == 1 else False

        question_id_list.append(str(question_id))
        question_name_list.append(question_name)
        current_solve_list.append(weekly_solves) # This is the weekly solves for each individual question (with the question being identified from the question ID).
        completion_time_list.append(week)
        assignment_question_list.append(assignment_question)
        theory_question_list.append(theory_question)

# --------------------- Creating figures ---------------------

# Preparing the bar graph
bar_graph_data = {"Question ID": question_id_list, "Question Name": question_name_list, "Current Solves": current_solve_list, "Completion Time": completion_time_list, "Assignment Question": assignment_question_list, "Theory Question": theory_question_list}
bar_graph_dataFrame = pd.DataFrame(data=bar_graph_data)
print(bar_graph_dataFrame.to_markdown()) # This is where the table that I've shown lower is from. [1]

# [NOPE] Testing to see if making an individual bar graph dataframe just for the assignments would work...
# assignment_bar_graph_data = {"Question ID": question_id_list, "Question Name": question_name_list, "Current Solves": current_solve_list, "Completion Time": completion_time_list, "Assignment Question": assignment_question_list, "Theory Question": theory_question_list}
# assignment_bar_graph_dataFrame = pd.DataFrame(data=assignment_bar_graph_data)

# ----- Assignment weekly graph and testing for colour issues.

# [NOPE] Colours at all. ToT
assignmentGraph = px.bar(bar_graph_dataFrame, x='Question ID', y='Current Solves', hover_name = "Question Name", animation_frame="Completion Time", title = "Assignments", color = "Assignment Question",range_x=[-1,73], range_y=[0,350])

assignmentGraph.update_xaxes(categoryarray=full_question_ids)
assignmentGraph.update_layout(hovermode="x unified")
assignmentGraph["layout"].pop("updatemenus")

# ----- Theory graph.

theoryGraph = px.bar(bar_graph_dataFrame, x='Question ID', y='Current Solves', hover_name = "Question Name", animation_frame="Completion Time", title = "Theory", color = "Theory Question",range_x=[-1,73], range_y=[0,350])
theoryGraph.update_xaxes(categoryarray=full_question_ids)
theoryGraph.update_layout(hovermode="x unified")
theoryGraph["layout"].pop("updatemenus")

# ===================== INITIALISING AND RUNNING APP =====================

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data and a Graph'),
    dcc.Graph(figure = assignmentGraph),
    dcc.Graph(figure = theoryGraph)
    
])

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

Here’s a bit of the dataframe I’m using, the dataframe is at the comment where ‘[1]’ is at:

Question ID Question Name Current Solves Completion Time Assignment Question Theory Question
0 1 L1Q1 3 2023-02-20 00:00:00 False False
1 2 L1Q2 1 2023-02-20 00:00:00 False True
2 3 L1Q3 1 2023-02-20 00:00:00 False True
3 4 L1Q4 2 2023-02-20 00:00:00 False True
4 5 L2Q1 1 2023-02-20 00:00:00 False False
5 6 L2Q2 1 2023-02-20 00:00:00 False False
6 7 L2Q3 1 2023-02-20 00:00:00 False False
7 8 L2Q4 1 2023-02-20 00:00:00 False False
8 1 L1Q1 287 2023-02-27 00:00:00 False False
9 2 L1Q2 195 2023-02-27 00:00:00 False True
10 3 L1Q3 250 2023-02-27 00:00:00 False True
11 4 L1Q4 260 2023-02-27 00:00:00 False True
12 5 L2Q1 105 2023-02-27 00:00:00 False False
13 6 L2Q2 71 2023-02-27 00:00:00 False False
14 7 L2Q3 69 2023-02-27 00:00:00 False False
763 76 Q1P1 102 2023-05-15 00:00:00 True False
764 77 Q1P2 107 2023-05-15 00:00:00 True False
765 78 Q1P3 104 2023-05-15 00:00:00 True False
766 79 Q1P4 88 2023-05-15 00:00:00 True False
767 80 Q2P1 87 2023-05-15 00:00:00 True False
768 81 Q2P2 87 2023-05-15 00:00:00 True False
769 82 Q2P3 93 2023-05-15 00:00:00 True False
770 83 Q2P4 88 2023-05-15 00:00:00 True False
771 84 Q3P1 93 2023-05-15 00:00:00 True False
772 85 Q3P2 94 2023-05-15 00:00:00 True False
773 86 Q3P3 94 2023-05-15 00:00:00 True False
774 87 Q3P4 98 2023-05-15 00:00:00 True False
775 88 Q4P1 99 2023-05-15 00:00:00 True False
776 89 Q4P2 94 2023-05-15 00:00:00 True False

I’ve rename the question names as I cannot share that. :slight_smile:

Thank for all the help! :smiley: