add charts

weru

21.50.2020 105c26940f0878d08e7771cf265c785c85e2be65

add charts

 exampleSite/content/_index.md

@@ -1,6 +1,12 @@
+++
title = "Compose"

# define chart data here
[data]
  fileLink = "content/projects.csv" # path to where csv is stored
  colors = ["#627c62", "#11819b", "#ef7f1a", "#4e1154"] # chart colors
  columnTitles = ["Section", "Status", "Author"] # optional if no table will be displayed from dataset
  baseChartOn = 3 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
  title = "Projects"
+++
{{< block "grid-2 mt-2" >}}
{{< column >}}
@@ -19,4 +25,8 @@
{{< column >}}
![diy](/images/scribble.jpg)
{{< /column >}}
{{< /block >}}
{{< /block >}}

{{< grid "3 mt-2" >}}
  {{< chart "data" "pie, bar, doughnut" >}}
{{< /grid >}}

 exampleSite/content/docs/compose/graphs-charts-tables.md

New file
@@ -0,0 +1,103 @@
+++
title = "Bar Graphs, Charts & Tables"
weight = 9
[dataset1]
  fileLink = "content/projects.csv" # path to where csv is stored
  colors = ["#ef7f1a", "#627c62", "#11819b", "#4e1154"] # chart colors
  columnTitles = ["Section", "Status", "Author"] # optional if not table will be displayed from dataset
  baseChartOn = 3 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
  title = "Projects"

[dataset2]
  fileLink = "content/themes.csv" # path to where csv is stored
  colors = ["#ef7f1a", "#627c62", "#11819b", "#4e1154"] # chart colors
  columnTitles = ["Theme", "Latest Version", "Repo Owner"] # Optional if no table will be displayed from dataset
  baseChartOn = 2 # number of column the chart(s) and graph should be drawn from # can be overridden directly via shortcode parameter # it's therefore optional
  title = "Hugo Themes"
+++

Using [chart js library](https://www.chartjs.org/) 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](http://convertcsv.com/json-to-csv.htm) first. Else the template will error out.

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

### Example
#### __Show a pie, doughnut & bar chart at once__

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

```toml
# 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
...
```

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

{{< grid "3 mt-2 mb-2" >}}
  {{< chart "dataset1" "pie,doughnut,bar" >}}
{{< /grid >}}

#### __Show Table at once__

{{< block "mt-2" >}}
  {{< chart "dataset1" "table" >}}
{{< /block >}}

### Example 2

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

```toml
# 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__

```markdown
// from page content
...
{{</* grid " mt-2" */>}}
  {{</* chart "dataset2" */>}}
{{</* /grid */>}}
...
```

{{< grid "3 mt-2 mb-2" >}}
  {{< chart "dataset2" "pie,doughnut" "1" >}}
{{< /grid >}}

#### Show table only

{{< grid "3 mt-2" >}}
  {{< chart "dataset2" "table" >}}
{{< /grid >}}

 exampleSite/content/projects.csv

New file
@@ -0,0 +1,12 @@
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

 exampleSite/content/themes.csv

New file
@@ -0,0 +1,4 @@
clarity,V.1,chipzoller
compose,V.1,weru
swift,V.2,weru
newsroom,V.1,weru