Graphs, charts & dynamic tables

Using chart js library you can display data you have stored in a csv file as a pie chart, bar graph or doughnut chart.

At this point if you want to display data from a json or yaml file, you would need to convert it into csv first. Else the template will error out.

Once you have a csv file, you display the charts as follows:

Show a pie, doughnut & bar chart at once

Firstly define the data you want to display from the front matter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
# from front matter
...
[dataset1] # this key will in the chart shortcode
  fileLink = "content/projects.csv" # path to where csv is stored
  colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
  columnTitles = ["Section", "Status", "Author"]
  charts = ["bar", "doughnut", "pie", "table"]
  baseChartOn = 3 # number of column the chart(s) and graph should be drawn from
  piechart = true
  doughnutchart = true
  bargraph = true
  title = "Projects"
  table = true # show table listing the chart data

// from page content
...
{{< grid " mt-2" >}}
  {{< chart "dataset1" >}}
{{< /grid >}}
...

Show Table at once

Section	Status	Author
project 6	alpha	weru
project 4	beta	dan
project 4	candidate	dahl
project y	abandoned	weru
project 1	alpha	weru
project 4	beta	ryan
project 4	candidate	dan
project y	abandoned	weru
project 11	alpha	dahl
project 4	beta	dan
project 4	candidate	dan
project A	abandoned	weru

Firstly define the data you want to display from the front matter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# from page front matter
[dataset2]
  fileLink = "content/themes.csv" # path to where csv is stored # this key will in the chart shortcode
  colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
  columnTitles = ["Theme", "Latest Version", "Owner"]
  title = "Hugo Themes"
  baseChartOn = 2 # number of column the chart(s) and graph should be drawn from
  piechart = false
  doughnutchart = true
  bargraph = true
  table = false # show table listing the chart data

Show only a pie and a doughnut chart

1
2
3
4
5
6
// from page content
...
{{< grid " mt-2" >}}
  {{< chart "dataset2" >}}
{{< /grid >}}
...

Show table only

Theme	Latest Version	Repo Owner
clarity	V.1	chipzoller
compose	V.1	weru
swift	V.2	weru
newsroom	V.1	weru