Example - Basic Charts

If you can pull data to a table, you can show it in a chart!

Display tabular data as a chart

The Chart From Table Content Display plugin can be used to display any tabular data in many different chart formats.

The Content Source and Content Transform can be any combination that provides tabular data, such as would be used with the Table Content Display ​​​​​.

For our examples below, the CSV file of air travel data used in the CSV Data example is pulled and displayed in various charts. There are many more chart variations available than shown here. If you are unsure whether the chart you require can be supported, contact me to discuss.

airtravel.csv

As a staring point, it is usually easiest to display your table of data to make sure you have the data, columns and headings configured as you want. You can then use similar settings to begin configuring the chart. As a reminder, here we have the basic table we are generating charts from.

Bar Chart

An obvious way to visualise this data is as a bar chart with a column for each month of each year.

Stacked bar chart

This is a bit wide, so one way to compact the data is to show it as a stacked bar. A stacked bar is not a great representation of the airtravel.csv data, so all we are doing here is showing the pretty chart rather than a really useful chart.

Line Chart

We can also show the same data using many line chart variations. This works well as a filled line chart because the data grows year on year.

In the bar chart we used transparency to adjust the fill colour. That won't work for a filled line chart as the colours of fills below show through, so here we use lighter versions of the colours to achieve the same effect.

The automatic scaling sets the row axis at 300. That can be overriden in the settings if desired.

We can also control many aspects of how the chart is displayed. For example,

• Add point markers with their own colour and size.
• Show value labels at each point.
• Disable the tooltips because the labels provide that information.
• Smooth the lines to give a curve rather than straight lines by adding some tension.

Radar Chart

As our flight data follows years, and January follows December, it can also make sense to show it as a radar chart. We have similar options to a line chart for filling, points, values and tips.

As the points end up a little closer together, there is not really room for labels, so the options selected here are to use smaller point markers and show the tooltips again.

Just to demonstrate some other settings, the fill is disabled and the lines made a little thicker.

Pie Charts

Taking the same data, we could show it all as a pie chart, but that gets a bit messy. Instead we can show the months for just one year, or the years for just one month. 

To get years for just one month, the Content Treansform settings have been changed to remove the transpose on the data. We could have also filtered rows or columns in the Content Transform, but have done so in the table filter in the content display.

Doughnut Charts

To show all 3 years together, a pie chart would look a bit crowded. An alternative is a doughnut chart, essentially a pie chart with a hole in the middle.

Here we have extended the colour sequence for 12 shades for each year to give 36 colours in total.

The auto-generated key would show months, not really what we want, so we won't show it. Instead we rely on labels and tooltips on the chart with a second UCP block alongside with the Chart Key From Table configured to show the first and last month of each year.