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.

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
1958 340 318 362 348 363 435 491 505 404 359 310 337
1959 360 342 406 396 420 472 548 559 463 407 362 405
1960 417 391 419 461 472 535 622 606 508 461 390 432
View settings

Bar Chart

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

View settings

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.

View settings

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.

View settings

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.
View settings

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.

View settings

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.

View settings
View settings

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.

View settings
Dec 1960
Jan 1960
Dec 1959
Jan 1959
Dec 1958
Jan 1958
View settings

Additional Pages

About this Sidebar

Creating a sidebar for a group of pages without messing about with stacks is an easy use-case for Universal Content Puller.

This sidebar is edited once, within the main addon page for Universal Content Puller.

It is then pulled into all UCP sub-pages using a UCP block.

The Content Source is Parent Page, set to pull the Sidebar area from 2 pages from the top. The Content Transform is Selector, set to remove container and row classes that, when unnecessarily nested, could mess up the Bootstrap grid. The Content Display is Plain, which just outputs the transformed text.

In the advanced settings, sanitization is disabled as we trust the source page and don't want to strip out any formatting or functionality from the pulled sidebar.