Adding a line chart to your dashboard
A line chart is very useful to visualize data that changes over time. It consists of a set of data points that are connected by a line. The horizontal x-axis typically shows the categories in which the data is divided. The vertical y-axis shows us the values.
This recipe shows how to add a line chart to a dashboard and how to link it to the data in the spreadsheet. Also, we will discuss the components that are similar to the line chart component—Bar chart, column chart, area chart, and stacked charts.
Getting ready
Open a new Dashboard Design file and enter the data into the spreadsheet, as shown in the following screenshot:
How to do it...
- Drag a Line Chart component from the Components browser into the canvas.
Tip
You can also click on the Line Chart component in the Components browser, move your cursor to the canvas area (the arrow will now change into a cross), and click again. You can use whatever method you prefer.
- Select the Line Chart component you just added to the canvas by clicking on it. Now the component is surrounded by eight blocks that enable you to adjust the size of the component.
- The properties pane for this component is also visible now. By default, the General tab is selected. In the Data section we can bind the data we entered earlier in the spreadsheet to this component. Click on the button on the right-hand side of the By Range field.
- In the spreadsheet, select the range from A4 to E7 and click on OK. The data is now bound to the component.
- The Data section of the properties pane now looks like the following screenshot. The chart will already show the data series we just bound.
- In the same way, we can add titles to this chart. Select spreadsheet cell A1 and enter Sales data; also, enter 2011 in cell A2.
- Bind the Chart field in the properties pane with spreadsheet cell A1 and bind the Subtitle field with cell A2.
- In the Category (Y) Axis field, enter Tonne.
- Your setup should now look like the following screenshot. Click on the Preview button to try the dashboard.
How it works...
This recipe showed how to connect the data in one or more spreadsheet cells to the Line Chart component through several options in its properties pane. This is how we bind data and you will be using this a lot during the development of dashboards with Dashboard Design.
There's more...
Manually binding data
In this recipe, we used a pretty straightforward data set with the category labels in the first row (Q1, Q2, Q3, and Q4) and the series names in the first column (Apple, Banana, Cherry). Dashboard Design is able to understand this data set and bind this information automatically. This may not always be the case, and therefore not always lead to the visualization you had in mind.
To change the direction of the visualization of the spreadsheet data in the chart, you can select the Data in Columns option in the Data section of the properties pane. This will switch the series and the labels.
By clicking on By Series in the Data section of the properties pane, it is possible to manually adjust all binding settings for the name and values of each series. Additionally, you can select the axis a series should be plotted on (primary or secondary). You can change the series order by using the two arrow buttons and add or remove series by using the + and - buttons. Also, you can manually bind the category labels to a range of cells.
Other charts: bar chart and column chart
The bar chart and column chart components can be configured in exactly the same way as a line chart component. A bar chart presents values in horizontal bars while the column chart uses vertical bars. These types of charts are typically not used to present data over a long time period, but to show data from different categories that need to be compared.
Other charts: area chart
The area chart component is a line chart with a filled area beneath the line. Other differences between these types of charts are that for the area chart the first value (Q1) is plotted on the far left-hand side and the last value (Q4) on the far right-hand side of chart. An area chart is used to visualize the cumulated total value over a period of time. This component can be configured in the same way as the line chart component.
Other charts: stacked charts
The bar chart, column chart, and area chart component all have a stacked version—stacked bar chart, stacked column chart, and stacked area chart. These stacked chart components show the values for the series on top of each other in the same column. You can use the stacked charts if the dashboard user needs to be able to compare totals.
