The Charts Control is used to provide the user an easy interface to create charts and graphs based on columnar or tabular data as well as JSON type of data. The Charts control enables you full customization using the Plotly.js library for your custom and complex charts. Charts control can be used for creating and showing dashboards or comparative analysis of data.
Properties
UI properties
-
Label: Label is the text that is displayed above the container box and helps the user to understand what they are supposed to write.
-
Properties: These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.
-
Type: The Type field is automatically generated depending upon the type of control used. In this case, it is a “dhq_graphs” type.
-
Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.
-
Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.
-
Description: This Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.
-
Hidden: The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.
-
Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the field even when the user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.
-
Hide Label: This option hides the label of the field from the view.
-
Trigger Dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here. By default, Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.
-
Hide on desktop: This option hides the selected control in the desktop view.
-
Hide on Mobile : This option hides the selected control in the mobile view.
-
Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.
-
Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceeding control depending on the space the previous control has occupied.
Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.
Data Properties
These are the properties to be defined for the Dataset or to choose the data source depending upon the chart type. While bar and line graphs have X-axis, your Pie charts would need aggregated values shown as labels for each slice. You can get your data from the sources like Static Data, Sheets, Custom JSON, Custom Formula, and so on. Once you fetch your data from the sources you can then either set the data as UI Form or a Plotly JSON. At the moment you have the options to add Line, Bar, Scatter, and Pie Chart using the UI Form. However, if you want to further extend and use other types of bars you can make use of the Plotly JSON.
UI Form
Once you select the data source, Studio parses the data and enables you to populate it to the selected chart type using the UI Form type.
Before you can set the values for the X-axis and Y-axis you need to make sure that you have added the appropriate source from Bind Data. After you define the Data, then only would you be able to specify the source columns for the X-Axis and the Y-Axis.
-
Chart type: Select the type of chart. It can be a Bar chart, Line Chart, Scatter Chart, or Pie Chart.
Properties for Chart Type: Bar / Line / Scatter Chart
If you select the Chart type as either of these mentioned here, then the following properties are enabled.
-
X-axis Column and Y-axis column: For the Bar Chart, Line Chart, and Scatter Chart you need to define the columns that would be the base data for the X-axis and the Y-axis. Now when you select these charts you would see some more properties are added. These are properties to be specifically applied to be added to each individual category. You can thus customize and specify different chart types to represent comparative data across categories. Here in this screenshot below, you can see that the configuration is named for each of the categories per the Y-axis column and then set the properties for Name, Aggregation, Type, and Color.
-
Group By: You can specify the column to group your data depending upon the type of data. It is applied to the entire set of data, i.e it would not be limited to an individual category, it is applied to all categories.
-
Column Configuration: When you are choosing multiple columns of data for the Y-axis there would be individual configurations that you can apply to each column.
-
Name: Note that the individual configuration appears for each selected column. With Name property, you can change the name that appears on the legend.
-
Aggregation: You can aggregate your data for individual columns. You can take a count, sum, average, and so on. By default, it is taken as Sum.
Aggregation Method Description Sum Sum of all values in the specific individual column. Count Is the count or total quantity of items of each group. Average Average of all numeric values in the specific individual column. Median Is the median of the numeric values in the specific individual column. Mode Is the mode of all numeric values in the specific individual column. Standard Deviation Is the standard deviation of all numeric values in the specific individual column. Min value Is the minimum numeric value from the specific individual column. Max value Is the maximum numeric value from the specific individual column. First Value Is the first numeric value from the specific individual column. Last Value Is the last numeric value from the specific individual column. -
-
Type: Specify the type of chart for the individual category.
-
Color: Choose the color for the chart under each category.
Properties for Chart Type: Pie Chart
If you select the Chart type as Pie Chart, then the following properties are enabled.
- Labels: In case you select the Pie chart you need to provide the column for the aggregated values.
- Values: Is the column that would be aggregated based on the labels.
-
Color: Specifies the colors for each section of the pie chart. If you do not select the color it will show the default colors
Plotly JSON
For users interested in advanced Chart options, Studio’s Charts control also has the option to use the Plotly.js charts. You have to be aware of the use of the Plotly JSON data and layout attributes.
The Static data that you want to use can also be added as custom data under the Plotly JSON, using the Trace property.
You would need to use the schema as per the type of chart you would be using as per Plotly.
[
{
"name": "2011",
"x": ["Jan","Feb","Mar","Apr","May"],
"y": [4000,8076,3564,12098,7002],
"type": "bar",
"marker": {
"color": "#3c92dc",
"size": 3,
"symbol": "circle"
},
"line": {
"color": "#3c92dc",
"width": 3
},
"transforms": [
{
"type": "aggregate",
"groups": ["Jan","Feb","Mar","Apr","May"],
"aggregations": [
{
"target": "y",
"func": "sum",
"enabled": true
}
]
}
]
}
]
You can also add dynamic data using the Plotly JSON. At times you can fetch your data from the sources like sheets, connectors, custom formulas, and so on. However, there might be limitations to presenting that data using the UI Form data properties. In such scenarios, you can make use of the Trace property to display the dynamic data. Use the curly brackets ’ {{}} ’ to get the column suggestion from the bind data. A simple example is shown below.
You can thus use the Data from the sources and parse it using Plotly JSON which gives you immense possibilities to represent your data into a chart other than the Bar, line, scatter, and pie chart. You can refer to this link here to understand the Plotly attributes for Data and Layout. Each type of chart from Plotly has its own attributes and configuration that you need to refer there and use accordingly as per your data presentation needs.
Layout
You would be able to customize your chart layout using the Layout properties that would change as per the chart type. If you select the chart type as Bar Chart or Line Chart the layout will have to be customized for the X-and Y-Axis data while for the Pie Chart it will be based on the Pie chart slices and labels. You can also add the Layout attribute for the Plotly JSON by defining the layouts attribute for the respective charts.
Layout for the Bar, Line and Scatter Chart
X-Axis
- Visibility: You can toggle switch on to set the X-Axis Title
- Text: Is the text to be displayed as X-axis Title
Y-Axis
- Visibility: You can toggle switch on to set the Y-Axis Title
- Text: Is the text to be displayed as Y-axis Title
Legends
- Visibility: You can toggle switch on to set the Legends to be displayed
- Alignment: You can set the alignment of the Legend as top, bottom, left, or right.
- X Position: Is the position of the legends with reference to X-axis
- Y Position: Is the position of the legends with reference to Y-axis
- Angle: Is the angle at which the legend is positioned, horizontal or vertical.
Layout for Pie Chart
The Pie Chart will only have legends to display and set the layout.
-
Legends
-
Visibility: You can toggle switch on to set the Legends to be displayed.
-
Alignment: You can set the alignment of the Legend as top, bottom, left, or right.
-
X Position: Is the position of the legends with reference to the X-axis.
-
Y Position: This is the position of the legends with reference to the Y-axis.
-
Angle: Is the angle at which the legend is positioned, horizontal or vertical.
Layout for Plotly JSON
The Layout can be set using the Plotly.js Layout attribute. Under Layout properties toggle switch Plotly JSON to set the Layout attributes as per Plotly. You can refer to this link here to understand the Plotly attributes for Data and Layout. These attributes enable you to control the positioning and configuration of the chart items including title, axes, colors, and legend.
A default layout is provided by Studio for your control.
For the example above you can set the Layout attribute to specify the chart title, x-axis title, and so on.
{
"title": "Monthly Sales",
"font": {
"family": "Inter"
},
"xaxis": {
"title": "Month",
"type": "-",
"tickformat": "YYYY-MM",
"automargin": true,
"fixedrange": true
},
"yaxis": {
"title": "Sales",
"tickformat": "",
"automargin": true,
"fixedrange": true
},
"showlegend": true,
"clickmode": "select+event",
"dragmode": "select",
"autosize": true,
"legend": {
"xanchor": "left",
"x": 1.05,
"y": 0.5
},
"hovermode": "x unified",
"margin": {
"l": 75,
"r": 25,
"t": 80,
"b": 75
}
}
Note:
- You can also make use of the Plotly JSON Layout to customize charts from the large number of Layouts available under Plotly even when you are fetching data from any of the sources. Similarly, even if you are using the Plotly data attribute you need not necessarily add Plotly Layout. If you do not want to use this layout or keep the layout attribute blank you need to pass an empty object “{}” so the layout is solved or applied accordingly.
Configuration
The Configuration is the setting and size of the Chart in general. You can set the height and width as well as the Spacing with the margin settings.
Size
- Auto: Toggle switch on to Autosize the height and width of the Chart depending upon the device in use.
- Height: You can set the height to the selected number of units in case you want to maintain a fixed size on all devices
- Width: You can set the width to the selected number of units in case you want to maintain a fixed size on all devices
Spacing
Set the Margin and Padding for the chart control. You can simply specify the Margin and the Padding by adding it in the specified direction.
- Mode Bar: Toggle switch ON to display the mode bar on top of your charts. These are Plotly actions available for the type of chart.
- Zeroline: You can toggle switch ON to display the X-Axis.
- Stacked Bars: Toggle switch ON to specify whether the bar chart will be displayed as Stacked bars when there are multiple parameters
- Value Tooltip: Toggle switch ON to display the Values as a tooltip when you hover over the bars or the pie chart.
Actions
- data_click: Whenever you click on any point on the chart data you can now define an action flow that would be triggered. It could be any point on the data represented by the bar, line, scatter charts. For a Pie chart, it would be any point of each of the slices.
When you use the Plotly JSON to define charts there are these key values that help you enable the click event when a user selects any point on the chart. If you do not specify these, you would not be able to trigger actions when any point on the chart is clicked.
{
"clickmode": "select+event",
"dragmode": "select",
}
Note: In case you are using the type of chart here as the Pie-chart then under the UI Form you need to select the Chart type as Pie Chart so that you can use the click event of the Pie chart.
How to Use Charts Control?
Start with selecting the Charts control from the Featured section of the Controls Menu.
The Chart Control will then appear on the screen in the builder.
First, you need to use the Data option to bind data to the Chart Control. You can either add your data in the Static Data or put it as a Javascript in the Custom formula or get it from other data sources like Sheets and connectors. You can also make use of the Plotly JSON attributes for Data and Layout to define the data. Once you select the data source, Studio parses the data automatically and populates it for the chart.
As the data is parsed by Studio you can set the columns to be referenced for the X and Y axis for the bar and line type charts. When you want to display further comparative data you can also change the type of chart for each category of the Y-Axis columns from the bar chart, line chart, or scatter chart. In the example / Illustration below we are using the bar chart and line chart for the data for the Y-axis.
Then depending upon your data set you can further customize the graphs with the Titles for the respective axis. For the bar, line, and scatter charts you also have a few options to carry out actions on the graph. These appear if you have enabled the ModeBar for the Chart. The actions available are, download as png, zoom, pan, box select, lasso select, zoom in and zoom out, autoscale, reset axes, toggle spike lines, show closest data on hover, and compare data on hover.
For the Pie Chart in the top right corner you can see small icons to download charts and toggle to display the closest data on hovering the mouse of the chart.
Preview
Bar chart
Pie Chart
For a quick view of how to use the Plotly Charts with DronaHQ Studio, have a look at this video here.