Build a Line Chart and Area Chart - maneeshpal/Drata GitHub Wiki
Line Chart and Area Chart are functionally the same, but differ in look and feel.
This documentation shows line chart but everything explained here applies to Area Chart as well.
-
Selections: You may select as many properties as you wish to be visualized. If you did not specify "split by" as shown in #4, every selection, will result in a new line, one each for each selection on a single line chart. If you specify "split by" as shown in #4, each selection you make will result in a new line chart resulting in multiple line charts that can toggled as shown in #7. See more about selections
-
% change: Selecting this option will visualize percent change in the value of selection over specified interval in your x-axis. Distinct :By selecting this option, duplicate values of the property you selected will be eliminated. This is usefull when working with de-normalized data structures.
-
x-axis: You may select any numeric, date properties to represent your x-axis. Specifying an interval will group the results within the interval specified. See more about intervals
-
Split By Allows you to split the data into groups based on the value of the property you select using the dropdown. Every group is visualized as a line in the same line chart.
-
Filter Aggregations: In simple terms, this serves groupby -> having clause in sql. This filters the resulting data after processing the query, essentially filtering out unwanted data post aggregation. For reference groupby price having sum(price) > 100 ... etc
-
Tabular view of data being visualized.
-
Split By result dropdown: The way you group properties, result in multiple visualizations. Under these situations, those multiple line charts can be toggled using the dropdown.
-
Chart Labels: These labels each represent a line in the chart. These labels are the values of property you chose to split your selection with. This example shows 2 properties price, and discount being split by the property sex resulting in two lines, one for male and one for female.
| Selections | Split By | Visualization | Reason |
|---|---|---|---|
| 1 property | No | 1 Line Chart with 1 line | y-axis will be either the value or aggregate function of the property selected depending on whether an interval is selected for x-axis |
| 2 or more properties | No | 1 Line Chart with lines, each corresponding to the a property selected | While visualizing more than one property with different range of values may throw off the visualization since they share the same y-axis. In that case, its better to create a different widget to visualize extra properties. |
| 1 property | yes | 1 Line Chart with multiple lines, each corresponding to the grouping based on the property selected in "split by" (see #4) column. | |
| 2 or more properties | yes | Multpile Line Charts with multiple lines each corresponding to the "split by" (see #4) | In this scenario, every selection you add results in a new Line Chart since you also specified "split by". Each of these charts will have the selection split across the value of "split by", thus resulting in as many lines as there are unique groups in "split by" property. |