How can I create a stacked bar chart using http status codes from time series data?

Hello!

I’m currently attempting to use data pulled from Azure Monitor to create a stacked bar chart for my dashboard. It’s pulling the responses to requests made to an endpoint, which will have either 200 or 500 status codes. In my query, I’ve summarized the data to hourly timestamps with the status code and the count for that status code.

     timestamp      |    statusCode   |  count
--------------------+-----------------+--------
2024-11-25 09:00:00 |       200       |    11  
2024-11-25 08:00:00 |       500       |    19  
2024-11-25 08:00:00 |       200       |    17
2024-11-25 07:00:00 |       200       |     3  
2024-11-25 06:00:00 |       200       |     6  
2024-11-25 05:00:00 |       200       |     9
2024-11-25 04:00:00 |       200       |    13
2024-11-25 03:00:00 |       200       |    14  
2024-11-25 02:00:00 |       500       |    30  
2024-11-25 02:00:00 |       200       |    36

Ideally I’d like to have a bar for each timestamp such that it’s a stacked bar made up of the counts of both 200 and 500 responses for that timestamp, with the 200 responses having a green bar and the 500 having a red bar.

In my current attempt however, all I’ve managed to do is get the bars for each timestamp as desired, however it will not stack the ones from the same timestamp, so there’s two separate bars for any timestamp with both 200 and 500 responses. I’ve been unable to get the bars to be colored accordingly as well.

Hi,
if you want to have two different bars you need to have two tables in the table view (one per each series). You can either manipulate datasource (unfortunately, I’m not sure how in this case), or you can use Partition by values transformation:

(I’ve also used Convert field type since I’m using infinity datasource to paste the CSV data and there everything is string by default).

After applying the transformation and selecting timestamp as X Axis:

, you should have something like this:

To stack the bars on top of each other, you can use Stacking option:

and for little tweaks you can add overrides to change the colors:

(although blue might be recommended over green for accessibility reasons).

Hope that helps!

2 Likes

This works great, thank you so much!

I do just have a couple follow up questions in terms of display.

  1. Is it possible to choose the stack order? It shouldn’t matter much here, but I’m just curious if that option exists.
  2. Is there a way to merge some of the x-axis labels without merging the data? Like in this instance if I expand my time frame to 7 days it’ll display hundreds of timestamps overlayed on each other, so I was curious if it was possible to make that less noisy by visually just displaying MM/DD instead of MM/DD HH:MM as the window increases.
  1. Unfortunately, I’m not sure. I think it’s sorted by default by name / value but I’m not sure.
  2. You sure can - set the X-axis labels minimum spacing to basically anything but None (which is default). You can also rotate the ticks but spacing should be enough.
1 Like

This is perfect, thank you so much. I really appreciate the help.

1 Like