2D Charts
Engimo adds support for chars rendered with help of Chart.js.
This bar chart is an example of what the support looks like:
{
"type": "bar",
"data":
{
"labels": ["One", "Two", "Three", "Four", "Five", "Six"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 3, 8]
}]
}
}
To get chart like this one above, follow the steps:
Add this to the metadata section
--- chart: true ---
Then add the chart to the page, e.g:
```chart { "type": "bar", "data": { "labels": ["One", "Two", "Three", "Four", "Five", "Six"], "datasets": [{ "label": "# of Votes", "data": [12, 19, 3, 5, 3, 8] }] } } ```
Line charts
Line charts are also simple:
{
"type": "line",
"data": {
"labels": ["One", "Two", "Three", "Four", "Five", "Six"],
"datasets": [
{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor":"transparent",
"borderColor":"orange"
},
{
"label": "Some other set",
"data": [15, 8, 13, 5, 5, 9],
"backgroundColor":"transparent",
"borderColor":"#44ccff"
}
]
}
}
with:
```chart
{
"type": "line",
"data": {
"labels": ["One", "Two", "Three", "Four", "Five", "Six"],
"datasets": [
{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor":"transparent",
"borderColor":"orange"
},
{
"label": "Some other set",
"data": [15, 8, 13, 5, 5, 9],
"backgroundColor":"transparent",
"borderColor":"#44ccff"
}
]
}
}
```
Well, I think you get the idea.
Documentation
More examples and documentation on Chart.js.