# Using Graphs in Markdown

Having the ability to simply add graphs in a markdown presentation if one of the reasons why Slideas has been created.

Markdown presentations framework are powerful but you often need to use a third party software to generate graphs and then to copy and paste them as an image in your slides. I do not like this type of work-flow. Each time you need to change a value or a colour of your graph, you need to go again in the other application, regenerate the graph, export it to bitmap, ...

Graphs are a powerful feature of Slideas. They are generated in SVG and can be scaled up and down while staying pixel perfect.

## Terminology

- We call a
**series**a consistent set of data - We call
**data-point**a value of a series. - Each series has a name and a set of value.
- They are both separated by a colon
`:`

- Each value is separated by a coma
`,`

Example :

`Budget: 120, 130, 140`

## Types of graphs

Slideas supports 6 different types of graphs, adapted to the majority of situations.

- Line
`{{line-chart}}`

- Spline
`{{spline-chart}}`

- Area
`{{area-chart}}`

- Bar
`{{bar-chart}}`

- Donut
`{{donut-chart}}`

- Pie
`{{pie-chart}}`

Line, spline, area and bar charts can be used with multiple values per series. Donut and pie only use a value par series.

## Examples

### Line Chart

```
# Line chart
{{Line-Chart}}
- a:1,3,2
- b:2,1,4
- c: 3,2,5
- d: 2,3,4
- e: 1,4,3
- f: 4,2,1
```

### Spline Chart

```
# Spline chart
{{Spline-Chart}}
- a:1,3,2
- b:2,1,4
- c: 3,2,5
- d: 2,3,4
- e: 1,4,3
- f: 4,2,1
```

### Area Chart

```
# Area chart
{{Area-Chart}}
- a:1,3,2
- b:2,1,4
- c: 3,2,5
- d: 2,3,4
- e: 1,4,3
- f: 4,2,1
```

### Bar Chart

```
# Bar chart
{{Bar-Chart}}
- a:1
- b:2
- c: 3
- a:1
- b:2
- c: 3
```

### Donut Chart

```
# Donut
{{Donut-Chart}}
- a:1
- b:2
- c: 3
- d:1
- e:1
- f: 3
```

### Pie Chart

```
# Pie chart
{{Pie-Chart}}
- a:1
- b:2
- c: 3
- a:1
- b:2
- c: 3
```

## Axis

For the Y axis, scale and values are defined automatically based on the minimal and maximal values of your data.

For the X axis, you can also let Slideas to calculate them automatically. However in the majority of cases, you will need to provide your own values.

Note: Providing custom X axis value only make sense for graph types supporting multiple values per series.

You can set your own values for a graph by declaring an additional series having `x`

as name: Example:

```
{{spline-chart}}
- Budget: 120, 130, 150
- x: 2015, 2016, 2017
```

## Other information about graphs

- Graphs are generated with a Billboard.js based chart renderer.
- Each part of the generated SVG graph has CSS classes allowing to customisation from the presentation theme.