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

Show Table at once

SectionStatusAuthor
project 6alphaweru
project 4betadan
project 4candidatedahl
project yabandonedweru
project 1alphaweru
project 4betaryan
project 4candidatedan
project yabandonedweru
project 11alphadahl
project 4betadan
project 4candidatedan
project Aabandonedweru

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

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

Show only a pie and a doughnut chart

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

Show table only

ThemeLatest VersionRepo Owner
clarityV.1chipzoller
composeV.1weru
swiftV.2weru
newsroomV.1weru