Using Graphs

Charts and graphs allow you to graphically present your data to reflect trends, comparison, division, the relationship of a set of data. The data representation could be simple comparative data or even presenting an aggregate intended at creating the maximum impact on the audience.

Studio provides several types of graphs and charts that can be used to present data from the sheets or even dynamic data from the forms like Column graph, Bar graph, Pie Chart, and so on.

Let us now understand how to use the Graphs and Charts controls that are available in Studio.

Common Properties

  • Type : This field is automatically generated depending upon the type of control used.
  • X-Axis Title : This option allows you to give a title to the X-Axis of the chart.
  • Y-Axis Title : This option allows you to give a title to the Y-Axis of the chart.
  • Aggregate Data : This option can be used when you need to quantify the number of certain elements. For example, if you have a list of employees with department names you want to plot graphs about how many employees are in each department you just bind the department column and aggregate it.
  • Data Values : This allows you to display the values corresponding to each bar or line or pie and others depending upon the type of graph used.
  • Legends: This hides or shows the legends as per selection

Which Graph type should be used?

Column Graph: When you want to compare information or when you have multiple categories, the column graph provides the best representation.

Bar Graph:: The difference between bar graphs and column graphs is mainly that the bars are horizontal instead of vertical for column graphs. Either of the charts can be used interchangeably.

Pie Charts:: The pie charts are useful to compare and represent percentages of a whole. Each value is represented as a piece of the pie in proportion to the complete data.

Line Graph:: A line graph is useful for showing trends over time to indicate how the value(s) increased or decreased over a period of time.

Area graph: Area graphs are similar to line charts and represent the changes in values over time. The only difference is that the area beneath each line is solid and can be thus used to call attention to the differences in change among multiple variables.

Donut Chart:: The Donut chart is similar to a pie chart, and shows the relationship of parts to a whole. However it can be used to contain more than one data series.

How to use the graphs?

Start with selecting the respective Graph Control from the Charts section of the Controls Menu.

The Graph Control will then appear on the screen in the builder, you can then set all the above properties as per your requirements.

Now for the sake of this example let us consider that we have a sheet here as follows:

To represent the data for the Graph control, you need to use the Data options to choose the source for your data.

In this example, we would be using the Sheet Sales_Sheet_Doc that we have seen above. So under Data Options > Sheet, select the sheet that contains the data and select the Columns that you want data to be presented from in the respective type of graph. In this example here we have Quarter 1 Sales and Quarter 2 Sales.

Now go to Custom Formula. This is another way of selecting or fetching data for your graph. Here you have some important features that can be used to further customize your graph. The Column Order property at the top represent the labels for the data. Like in this example, the Region name are the Labels for which the data would be graphically presented which is indicated here with Data1, Data2, and so on depending upon the columns in the sheet. In this case there are two columns Quarter1Sales and Quarter2Sales for which the line graph is generated.

custom formula column graph

So the output would be shown for the two columns as seen below. Line graph enables you to display comparative data as seen here for Quarter 1 and Quarter 2 for the respective regions. The X and Y axis title would be reflected as specified by you. Similarly, if you have switched the Data Value toggle on you can see the data values for each region accordingly.

Similarly, you can use the same data for a bar graph.

Aggregate Data

In the example here we are using a simple bar graph. Hence the data appears as comparative bars for the two quarters for each row in the sheet. Now if you see the sheet, the data is for the three regions but different categories.

Now if you want to get the general sales data for the three regions, then in that case you can turn ON the Aggregate data property which would get the data as aggregate for the three regions across all categories. The data from one column would be aggregated based on a certain column. So the Quarter1Sales would be aggregated based on the Region in this example.

Shown below is the result of setting the property ON for the same data of the above bar graph.

Now let us consider another scenario where you want to add a doughnut chart that shows the overall distribution of sales across different product categories.

For the same sheet mentioned above let us get a doughnut chart that would display the sales distribution across categories. The donut chart would be displayed as seen below for all the rows in the sheet.

Now we have the option under the Donut chart’s Chart > Properties to set the Aggregate data property ON. This would give you aggregated data based on the Category.

Thus the Aggregate data feature enables you to group and provide the aggregate value based on the specific column, which in this case is the Category column.

Each type of graph would have its features and functions individually which you can use as per your data presentation needs. Like the bar graph which has a Stacked bars property. If you compare it with our earlier example of bar graph you can see that the bar graph appears in a different style. With the Stacked Bars property turned ON, the aggregate data appears for the two Quarters, represented using different colors, but arranged in a stacked manner.