Including charts and diagrams

Sometimes you want to include charts or diagrams in your assignments. A very straightforward way to do this would be to create an image of your chart or diagram, upload it as a file and then refer to that image in the Markdown editor. However, there are several other ways you can do this in Quarterfall as well: using Chart.js, using Mermaid, using Google Sheets, or using Google Drawings.

Using Chart.js

Chart.js is a complete toolkit for producing any kind of chart you like. Here's an example of how to include a simple bar chart:

```chart
type: bar
data:
  labels:
    - Red
    - Blue
    - Yellow
    - Green
    - Purple
    - Orange
  datasets:
    - label: Items
      data:
        - 12
        - 19
        - 3
        - 5
        - 2
        - 3
```

Quarterfall supports all charts of Chart.js, including bar charts, pie charts, radar charts, and more. The example above uses the YAML syntax for defining the chart, which fits well within Markdown. Another option is to use JSON, which is how most of the examples given by Chart.js are defined. This is the equivalent chart, but then defined using a JSON object:

```chart
{
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Items',
            data: [12, 19, 3, 5, 2, 3]
        }]
    }
}
```

For more information about the possibilities of Chart.js, see the Chart.js documentation.

Using Mermaid

A second option to draw charts and diagrams is by using Quarterfall's integration with Mermaid. Mermaid allows you to create a variety of (UML) diagrams, including class diagrams, state diagrams, Gantt charts, flow charts, and much more. For example, this is how you define a class diagram using Mermaid's syntax:

```mermaid
classDiagram
       Animal <|-- Duck
       Animal <|-- Fish
       Animal <|-- Zebra
       Animal : +int age
       Animal : +String gender
       Animal: +isMammal()
       Animal: +mate()
       class Duck{
           +String beakColor
           +swim()
           +quack()
       }
       class Fish{
           -int sizeInFeet
           -canEat()
       }
       class Zebra{
           +bool is_wild
           +run()
       }
```

For more information about the possibilities of Mermaid, see their website.

Using Google Sheets

Next to using the built-in tools for generating charts, you can also use Google Sheets and/or Google Drawings. Both can be downloaded from the chrome web store and used for free for personal use. Businesses get them when they use Google Suite.

Google Sheets is a full blown spreadsheet program. In the section on including documents it was already shown how to include a complete spreadsheet. Here we show how to include a single chart from the spreadsheet. For this you proceed as follows.

Create a Google Sheets spreadsheet, include some data and insert a chart (e.g. a bar chart, or a line chart). Check the documentation on Google Sheets on how to do this. Once you are satisfied with your chart, select it and go to the drop-down menu at the top-right of the diagram. Click on the option Publish chart. Click on the Publish button if you have not published the chart before. Make sure you are at the Link tab. You now have two options: interactive or image.

Interactive. In this case you will get an interactive chart that the user can hover over to get additional information. An interactive charts must be placed in an iframe. Copy the indicated link and place it in your text as follows:

```iframe
url: https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8TQEoG1PL5M3_oa_TD_WIwSJCAHPJdIWm4WKr_aJnjJd0axDtMKnqY_0Oya5LFo9_BZcqZq_BZl04/pubchart?oid=796192565&format=interactive
```

For more information on using iframes and additional options, see the help on including external content.

Image. In this case the link creates an image. You can include it in the same way as you include an image:

```image
url: https://docs.google.com/spreadsheets/d/e/2PACX-1vQ8TQEoG1PL5M3_oa_TD_WIwSJCAHPJdIWm4WKr_aJnjJd0axDtMKnqY_0Oya5LFo9_BZcqZq_BZl04/pubchart?oid=796192565&format=image
```

Including images gives you a number of option on the size of the image. Check out the help on including an image.

Note that in both cases it is essential that you do not remove or change the spreadsheet. Each time somebody inspect the assignment, the image or interactive chart is recreated. If this is a problem, the alternative is that you download the chart as png or svg file using the Download command in the pop-up menu. Next you can upload that file to your assignment and display it.

Using Google Drawings

Google Drawing is an online drawing program that is in particular good in creating diagrams. Here you proceed as follows. First create a nice diagram. Make sure the page fits good around the diagram. Now go the the File menu. Here there is an option to Publish on the Internet. Select the Link tab and press the Publish button if the diagram is not yet published. Choose the required size and next select the link. As this generates an image, it must be included in the same way you include an image:

```image
url: https://docs.google.com/drawings/d/e/2PACX-1vSls8omyIZaIUggSttZFTW-gemhXbHSe9gRFA4jUTIsOFi2ZbT4eHrK5WG8qDXbnGr9qdtBku_vHVoJ/pub?w=417&h=222
```

Note that the selected size is actually in the url. So you can change the size in any way you like.

Note that again it is essential that you do not remove or change the drawing. Each time somebody inspect the assignment, the image is recreated. If this is a problem, the alternative is that you download the drawing as png or svg file using the  Download command in the File menu. Next you can upload that file to your assignment and display it.

Still need help? Contact Us Contact Us