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.