Build a Bar Chart - maneeshpal/Drata GitHub Wiki

A bar chart significantly differs from Line and Area in terms of how data is segmented.

This view you see below is the Widget Editor view. All the important functionalites are marked with bullet points.

1. Selections: There is no limit to the number of properties you select for visualization. Every selection can be a composed with other nested selections. For example select sum(price), sum(price - discount) etc... In the above illustration, the user selected two properties, price and discount. Due to the aggregations applied, two bar charts have been generated, one for each selection. What you see in the illustration is the first bar chart, displaying the aggregation function sum over price. See more about Selections

2. GroupBy :You can specify upto two levels of GroupBy. In the example illustration, the results are first grouped by geography, which splits the data into different sets based on the values of the property geography as shown in #7.

3. GroupBy level 2 : Now here is the tricky part. Drata knows that there are two selections, and on top of that, those selections are grouped by geography. So, now Drata will take every selection and then for each of those, will grab every group Ex:sum(price) for texas (geography group) and splits it further based on sex, resulting in two bars for each sex, one for male and the other for female. The colors are differentiated using labels as shown in #5. This logic is explained in a tabular format below.

4. You need to specify a numeric or date interval depending upon whether you are grouping results using date/numeric properties. Since in this illustration, we are grouping by properties of type string, no interval is required. See more about Date Interval

5. Labels that distinguish between the groupings resulted via GroupBy, GroupBy level2 in #2 and #3. If there is no GroupBy level 2, these labels will show the values of GroupBy property.

6. If your query results in multiple visualizations, this dropdown shows up, giving you the ability to toggle between those visualizations.

7. These labels pertain to GroupBy property specified in the query.

Query	Resulting Visualization
1 selection, with no GroupBy and no GroupBy level 2 Pretty much basic, you can visualize the count, avg, sum of the selection	1 Bar Chart with 1 bar
1 selection, grouped by Geography. No GroupBy level 2 specified sum aggregate function is applied on Price for each geography.
1 selection, grouped by Geography and Sex sum aggregate function is applied on Price for each geography. Each of these groups is further grouped by sex. So, you will see each bar group split between <em>male</em> and <em>female</em>. </td> <td>[[images/widgets/bar/bar_1s_1g_1g2.png]]</td> </tr> <tr> <td> <h6>2 properties are selected for visualization without any <em>GroupBy</em></h6> Since this is Bar chart, inorder to compare the two properties selected, Drata requires you to apply aggregate functions over those selections. Just for brevity, you can see that in this visualization, we select average(price), and sum(discount). If this was a line chart, we could have visualized value of those properties over a date property or something else that can represent x-axis. You will see this approach for Pie chart as well. </td> <td>[[images/widgets/bar/bar_2s_0g_0g2.png]]</td> </tr> <tr> <td> <h6>2 selections are selected for visualization grouped by <em>Geography</em></h6> In this scenario, all the selections you make will be visualized in a single bar chart with as many groups of bars, as there are selections. In the illustration, you can see <em>count of price</em> and <em>count of discount</em> are both visualized, with each group further split between geographies. </td> <td>[[images/widgets/bar/bar_2s_1g_0g2.png]]</td> </tr> <tr> <td> <h6>2 selections grouped by <em>Geography</em> and <em>Sex</em> </h6> In this illustration, we have multiple selections split twice between two _GroupBy_ properties. This results in 2 bar charts. If you specify <em>GroupBy</em> and <em>GroupBy level2</em>, each selection will result in its own barchart. These charts can be toggled using a dropdown as shown in the illustration. </td> <td>[[images/widgets/bar/bar_2s_1g_1g2.png]]</td> </tr>