Skip to main content

Charts & Graphs

The Charts Control is used to provide users with an easy interface to create charts and graphs based on columnar, tabular, or JSON data. The Charts control enables full customization using the Plotly.js library for custom and complex charts. It can be utilized for creating and displaying dashboards or conducting comparative analysis of data.

Charts
Charts

This document contains all the elements for every available chart control in DronaHQ.

Binding Data Options

The Charts control provides flexibility in binding data to create interactive charts and graphs. You can choose from the following options to bind data:

Static Data Option

To display static data in the Charts control, you can use the Bind Data option. It allows you to specify data as an array of objects, defining X-axis and Y-axis values for various chart types.

Example using Static Data:

[
{
"x": [1, 2, 3, 4, 5],
"y": [10, 20, 30, 40, 50],
"type": "line"
},
{
"x": ["A", "B", "C", "D", "E"],
"y": [25, 35, 45, 55, 65],
"type": "bar"
}
]

Plotly JSON Data

For advanced chart options, you can use the Plotly.js library and define the chart layout using the Plotly JSON data attribute. This enables you to customize the chart's appearance, titles, axes, colors, and legends based on your data source.

Example using Plotly JSON:

{
"data": [
{
"x": [1, 2, 3, 4, 5],
"y": [10, 20, 30, 40, 50],
"type": "line"
},
{
"x": ["A", "B", "C", "D", "E"],
"y": [25, 35, 45, 55, 65],
"type": "bar"
}
],
"layout": {
"title": "Custom Chart Layout",
"xaxis": {
"title": "X-axis Title"
},
"yaxis": {
"title": "Y-axis Title"
},
"showlegend": true,
"legend": {
"x": 0.5,
"y": 1
}
}
}

By utilizing these data binding options, you can create dynamic and informative charts in your microapp, representing data effectively.

tip

Plotly JSON charts support dynamic values using double curly braces ({{variable_name}}). This allows referencing variables that hold the actual data to be plotted.

Example:

{
"data": [
{
"y": ["Leads", "Qualified", "Closed Deals"],
"values": [{{leadsSum}}, {{qualifiedLeadsCount}}, {{closedDealsCount}}]
}
]
}

Properties

The Charts Control allows you to define properties for the dataset or choose the data source based on the chart type. Bar and line graphs utilize the X-axis, while Pie charts display aggregated values as labels for each slice.

Data

You can source your data from various options such as Static Data, Sheets, Custom JSON, Custom Formula, and more. Once you fetch the data, you have the flexibility to set it as either a UI Form or a Plotly JSON.

info

The Charts Control offers options for Line, Bar, Scatter, and Pie Charts using the UI Form. For more advanced customization and the use of other chart types, you can leverage the Plotly JSON format. This empowers you to create custom and complex charts tailored to your specific needs.

UI Form

Once you select the data source, DronaHQ parses the data and enables you to populate it to the selected chart type using the UI Form type.

tip

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

PropertyDescription
Chart TypeChoose the type of chart. Options include Bar chart, Line Chart, Scatter Chart, or Pie Chart.
X-axis ColumnFor Bar Chart, Line Chart, and Scatter Chart, define the column representing the X-axis data.
Y-axis ColumnFor Bar Chart, Line Chart, and Scatter Chart, define the column representing the Y-axis data.
Group BySpecify the column to group your data (applied to all categories).
Column ConfigurationCustomize individual category properties, including Name, Aggregation, Type, and Color.
NameChange the name that appears on the legend for each selected column.
AggregationAggregate data for individual columns using functions like count, sum, average, etc. Default is Sum.
TypeSpecify the chart type for each category.
ColorChoose the color for the chart under each category.
info

Aggregation Method allows you to perform various calculations on specific individual columns. Options include Sum, Count, Average, Median, Mode, Standard Deviation, Min Value, Max Value, First Value, and Last Value.

Aggregation MethodDescription
SumSum of all values in the specific individual column.
CountTotal quantity or count of items in each group.
AverageAverage of all numeric values in the specific individual column.
MedianMedian value of numeric values in the specific individual column.
ModeMode or most frequently occurring value in the specific column.
Standard DeviationStandard deviation of numeric values in the specific column.
Min ValueMinimum numeric value from the specific column.
Max ValueMaximum numeric value from the specific column.
First ValueThe first numeric value in the specific column.
Last ValueThe last numeric value in the specific column.

Properties for Chart Type: Pie Chart

PropertyDescription
LabelsFor Pie chart, specify the column containing the aggregated values.
ValuesColumn to be aggregated based on the labels.
ColorDefine colors for each section of the pie chart. Default colors if not set.

Plotly JSON

For users seeking advanced chart options, the Charts control offers the flexibility to utilize Plotly.js charts. By working with Plotly JSON data and layout attributes, you can customize and extend your chart capabilities.

To use Plotly JSON, you need to define the schema based on the specific chart type you intend to create. Here's an example of a bar chart using Plotly JSON:

[
{
"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
}
]
}
]
}
]

Additionally, you can include dynamic data in Plotly JSON by fetching information from various sources like sheets, connectors, or custom formulas. When UI Form data properties have limitations for representing dynamic data, the Trace property allows you to display it using curly brackets '{{}}' to reference column suggestions from bind data.

This approach empowers you to create diverse chart types beyond bar, line, scatter, and pie charts. Refer to Plotly's Data and Layout attributes documentation for a wide range of chart configurations tailored to your specific data presentation requirements.

Links: Plotly Data Attributes and Plotly Layout Attributes

Layout

Customizing the chart layout is possible with Layout properties, which adapt according to the selected chart type. For Bar Chart or Line Chart, customization focuses on X and Y-Axis data, whereas for Pie Chart, it centers around slices and labels. Furthermore, you can include the Layout attribute in Plotly JSON by specifying the layouts attribute for the respective charts.

Layout for the UI FORM

PropertyDescription
X-Axis
VisibilityToggle switch to set the X-Axis Title.
TextText to be displayed as X-axis Title.
Y-Axis
VisibilityToggle switch to set the Y-Axis Title.
TextText to be displayed as Y-axis Title.
Legends
VisibilityToggle switch to set the Legends to be displayed.
AlignmentSet the alignment of the Legend as top, bottom, left, or right.
X PositionPosition of the legends with reference to the X-axis.
Y PositionPosition of the legends with reference to the Y-axis.
AngleAngle at which the legend is positioned, horizontal or vertical.

Layout for the Plotly JSON

The chart's layout can be customized using the Plotly.js Layout attribute. To configure the layout based on Plotly, switch to Plotly JSON in the Layout properties. These attributes allow you to control the positioning and configuration of chart items, including title, axes, colors, and legend.

info

You can utilize Plotly JSON Layout to customize charts with various available layouts, regardless of the data source. Even when using Plotly data, adding Plotly Layout is optional. To avoid using the layout, leave the layout attribute blank by passing an empty object "{}" for the layout to be applied accordingly.

Configuration

Size

PropertyDescription
AutoToggle switch on to autosize the height and width of the chart depending upon the device in use.
HeightSet the height to the selected number of units to maintain a fixed size on all devices.
WidthSet the width to the selected number of units to maintain a fixed size on all devices.

Spacing

PropertyDescription
Mode BarToggle switch ON to display the mode bar on top of your charts. These are Plotly actions for the chart.
ZerolineToggle switch ON to display the X-Axis.
Stacked BarsToggle switch ON to display the bar chart as stacked bars when there are multiple parameters.
Value TooltipToggle switch ON to display the values as a tooltip when hovering over the bars or the pie chart.

Control Outputs

The outputs from the Charts control, represented by the placeholder {{chart_name}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.

OutputDescription
chart_nameRepresents the whole data from the Charts control.

Events

TriggerDescription
data_clickWhenever you click on any point on the chart data, you can define an action flow that would be triggered.

Using the Plotly JSON to define charts, you can utilize specific key values to enable the click event when a user selects any point on the chart. Without specifying these key values, triggering actions when clicking on any point of the chart will not be possible.

{

"clickmode": "select+event",
"dragmode": "select",

}
tip

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.