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'll need to convert it to CSV first; otherwise the template will error out.

Online JSON to CSV Converters:

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

Section Status Author

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

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

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