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

[PAIN]

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:)

[AIMPED]

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?

[PAIN]

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…

[PAIN]

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.

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.

[AIMPED]

Hey @PAIN,

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

[PAIN]

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.

Thank for all the help!