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
| 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# 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 with filter
| Theme | Latest Version | Repo Owner |
|---|---|---|
| clarity | V.1 | chipzoller |
| compose | V.1 | weru |
| swift | V.2 | weru |
| newsroom | V.1 | weru |
Show table only
| Theme | Latest Version | Repo Owner |
|---|---|---|
| clarity | V.1 | chipzoller |
| compose | V.1 | weru |
| swift | V.2 | weru |
| newsroom | V.1 | weru |