How to Create a Horizontal Bar Chart
In this guide, we'll walk you through the process of creating a Horizontal Bar Chart. This type of chart is excellent for comparing categories of data. Let's get started!
1. Access the Dashboard
2. Choose the Chart Type
3. Add a Chart Tag
4. Add a Chart Title
5. Add a Chart Description
6. Configure Chart Options
7. Heatmap Colors
8. Enable Formatting in the Format Builder
9. Choose Type of X Axis
10. Configure Scorecard Options (Optional)
11. Display X and Y Axis
12. Add a Query
To start creating your Horizontal Bar Chart, you'll first need to access your dashboard. If you don't have a dashboard yet, you'll need to create one. Once you're in your dashboard, click on the "Add Chart" button if you're in the "Create New Dashboard" dialog, or click on the plus (+) button if you're in the "Edit Dashboard" dialog.
A dialog box will appear for you to select the type of chart you want to create. From the dropdown menu, select "Horizontal Bar Chart".
Next, you'll need to add a chart tag. This tag should be related to the chart you're creating. For example, if you're creating a chart for sales per channel, you might choose a tag like "sales_channel".
Now, add a title for your chart. This title should represent what the chart is about. For example, if your chart is about sales per channel, you might choose a title like "Sales per Channel".
Add a description for your chart. This helps other users understand what the chart is about and what the query does. For example, you might write "This chart displays the sales generated per channel".
In this step, you'll configure various options for your chart:
- Percentage: Toggle this on if you want to show the values as percentages.
- Force the Display of the Chart in Full Width: Toggle this on if you want the chart to extend to the full width of the screen.
Choose the range of colors for your heatmap. The order of colors matters as it will determine the gradient of your heatmap.
Typically, you'd start with a lighter color representing lower values and end with a darker color for higher values.
In this step, you'll work with the format output which is system-generated. This output provides a preview of how the final data will appear based on the formatting options you select:
- Symbol: Currently available symbols include $ and #. Selecting one of these will add the symbol to the value of the numerical Y axis.
- Type: This option allows you to choose different notations and integer formats for your data.
-**Sign**: This options allows you to select the different types of operation sign to your numerical value
- Precision: This option allows you to specify the number of decimal places you want your data values to display. For instance, if you have a value like 3.14159 and you set the precision to 1, the displayed value will be rounded to 3.1.
However, for large numbers, the system might use scientific notation for clarity. For example, a value like 40000 might be displayed as 4+e4 when the precision is set to 1.
- Trimming Zeros: Toggle this option if you want to remove unnecessary zeros from your data values.
This formatting ensures that your data is presented in a clear and concise manner, enhancing the overall visual appeal of your chart.
Select the type of X axis based on your dataset. If you're aiming to display category values like sales per channel, then "Text" will be applicable. However, if your data encompasses timestamps and you wish to depict trends over distinct time intervals, like sales per day's hour, then "Time" is the way to go. Additionally, if you want to use a text field for dates, you can convert the date field from a timestamp to a date filter using a query.
In this step, you have the option to adjust the Total Scorecard and Scorecard Legend settings. These options are particularly useful when your dashboard type is set to "Mobile Only".
- Total Scorecard: This displays a summarized value, providing a quick overview or total of the data being visualized in the chart.
- Scorecard Legend: This displays a legend, helping users understand the data points or categories being represented in the chart.
Choose the scale and labels for your X and Y axes. This will determine how your data is presented on the chart. For instance, your X axis might represent time intervals, while your Y axis could represent sales amounts.
Finally, you'll need to add a query that will fetch the data for your chart. This query should return values aliased as "x" for the horizontal axis and "y" for the vertical axis. For instance:
Ensure that your query is structured correctly and returns the expected results.
Add filters accordingly to refine the data you want to display.
1. Access the Dashboard
2. Choose the Chart Type
3. Add a Chart Tag
4. Add a Chart Title
5. Add a Chart Description
6. Configure Chart Options
7. Heatmap Colors
8. Enable Formatting in the Format Builder
9. Choose Type of X Axis
10. Configure Scorecard Options (Optional)
11. Display X and Y Axis
12. Add a Query
1. Access the Dashboard
To start creating your Horizontal Bar Chart, you'll first need to access your dashboard. If you don't have a dashboard yet, you'll need to create one. Once you're in your dashboard, click on the "Add Chart" button if you're in the "Create New Dashboard" dialog, or click on the plus (+) button if you're in the "Edit Dashboard" dialog.
2. Choose the Chart Type
A dialog box will appear for you to select the type of chart you want to create. From the dropdown menu, select "Horizontal Bar Chart".
3. Add a Chart Tag
Next, you'll need to add a chart tag. This tag should be related to the chart you're creating. For example, if you're creating a chart for sales per channel, you might choose a tag like "sales_channel".
4. Add a Chart Title
Now, add a title for your chart. This title should represent what the chart is about. For example, if your chart is about sales per channel, you might choose a title like "Sales per Channel".
5. Add a Chart Description
Add a description for your chart. This helps other users understand what the chart is about and what the query does. For example, you might write "This chart displays the sales generated per channel".
6. Configure Chart Options
In this step, you'll configure various options for your chart:
- Percentage: Toggle this on if you want to show the values as percentages.
- Force the Display of the Chart in Full Width: Toggle this on if you want the chart to extend to the full width of the screen.
7. Heatmap Colors
Choose the range of colors for your heatmap. The order of colors matters as it will determine the gradient of your heatmap.
Typically, you'd start with a lighter color representing lower values and end with a darker color for higher values.
8. Enable Formatting in the Format Builder
In this step, you'll work with the format output which is system-generated. This output provides a preview of how the final data will appear based on the formatting options you select:
- Symbol: Currently available symbols include $ and #. Selecting one of these will add the symbol to the value of the numerical Y axis.
- Type: This option allows you to choose different notations and integer formats for your data.
-**Sign**: This options allows you to select the different types of operation sign to your numerical value
- Precision: This option allows you to specify the number of decimal places you want your data values to display. For instance, if you have a value like 3.14159 and you set the precision to 1, the displayed value will be rounded to 3.1.
However, for large numbers, the system might use scientific notation for clarity. For example, a value like 40000 might be displayed as 4+e4 when the precision is set to 1.
- Trimming Zeros: Toggle this option if you want to remove unnecessary zeros from your data values.
This formatting ensures that your data is presented in a clear and concise manner, enhancing the overall visual appeal of your chart.
9. Choose Type of X Axis
Select the type of X axis based on your dataset. If you're aiming to display category values like sales per channel, then "Text" will be applicable. However, if your data encompasses timestamps and you wish to depict trends over distinct time intervals, like sales per day's hour, then "Time" is the way to go. Additionally, if you want to use a text field for dates, you can convert the date field from a timestamp to a date filter using a query.
10. Configure Scorecard Options (Optional)
In this step, you have the option to adjust the Total Scorecard and Scorecard Legend settings. These options are particularly useful when your dashboard type is set to "Mobile Only".
- Total Scorecard: This displays a summarized value, providing a quick overview or total of the data being visualized in the chart.
- Scorecard Legend: This displays a legend, helping users understand the data points or categories being represented in the chart.
11. Display X and Y Axis
Choose the scale and labels for your X and Y axes. This will determine how your data is presented on the chart. For instance, your X axis might represent time intervals, while your Y axis could represent sales amounts.
12. Add a Query
Finally, you'll need to add a query that will fetch the data for your chart. This query should return values aliased as "x" for the horizontal axis and "y" for the vertical axis. For instance:
Ensure that your query is structured correctly and returns the expected results.
Add filters accordingly to refine the data you want to display.
Updated on: 28/08/2023
Thank you!