Skip to content

Commit a7d6b37

Browse files
george-gcageorge-gca
authored
Added support for Chart.js (cotes2020#2126)
Solved #460. ![image](https://github.com/alshedivat/al-folio/assets/31376482/ce65dbe2-031e-4208-b374-08ec89beaaca) --------- Signed-off-by: George Araújo <[email protected]>
1 parent 1d84621 commit a7d6b37

File tree

5 files changed

+213
-2
lines changed

5 files changed

+213
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ For more details on how to create distill-styled posts using `<d-*>` tags, pleas
299299

300300
#### Full support for math & code
301301

302-
**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes). Also supports [mermaid diagrams](https://mermaid-js.github.io/mermaid/#/) and [TikZ figures](https://tikzjax.com/).
302+
**al-folio** supports fast math typesetting through [MathJax](https://www.mathjax.org/) and code syntax highlighting using [GitHub style](https://github.com/jwarby/jekyll-pygments-themes). Also supports [chartjs charts](https://www.chartjs.org/), [mermaid diagrams](https://mermaid-js.github.io/mermaid/#/), and [TikZ figures](https://tikzjax.com/).
303303

304304
<p align="center">
305305
<a href="https://alshedivat.github.io/al-folio/blog/2015/math/" target="_blank"><img src="assets/img/readme_preview/math.png" width=400></a>

‎_includes/scripts/chart.liquid‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% if page.chart %}
2+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
3+
<script>
4+
$(document).ready(function () {
5+
var $canvas = null,
6+
$this = null,
7+
_ctx = null,
8+
_text = '';
9+
$('.language-chart').each(function () {
10+
$this = $(this);
11+
$canvas = $('<canvas></canvas>');
12+
_text = $this.text();
13+
$this.text('').append($canvas);
14+
_ctx = $canvas.get(0).getContext('2d');
15+
_ctx && _text && new Chart(_ctx, JSON.parse(_text)) && $this.attr('data-processed', true);
16+
});
17+
});
18+
</script>
19+
{% endif %}

‎_layouts/default.liquid‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
{% include scripts/bootstrap.liquid %}
4949
{% include scripts/masonry.liquid %}
5050
{% include scripts/mermaid.liquid %}
51+
{% include scripts/chart.liquid %}
5152
{% include scripts/misc.liquid %}
5253
{% include scripts/badges.liquid %}
5354
{% include scripts/mathjax.liquid %}

‎_posts/2024-01-26-chartjs.md‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
layout: post
3+
title: a post with chart.js
4+
date: 2024-01-26 01:04:00
5+
description: this is what included chart.js code could look like
6+
tags: formatting charts
7+
categories: sample-posts
8+
chart: true
9+
---
10+
11+
This is an example post with some chart.js code.
12+
13+
````markdown
14+
```chart
15+
{
16+
"type": "line",
17+
"data": {
18+
"labels": [
19+
"January",
20+
"February",
21+
"March",
22+
"April",
23+
"May",
24+
"June",
25+
"July"
26+
],
27+
"datasets": [
28+
{
29+
"label": "# of bugs",
30+
"fill": false,
31+
"lineTension": 0.1,
32+
"backgroundColor": "rgba(75,192,192,0.4)",
33+
"borderColor": "rgba(75,192,192,1)",
34+
"borderCapStyle": "butt",
35+
"borderDash": [],
36+
"borderDashOffset": 0,
37+
"borderJoinStyle": "miter",
38+
"pointBorderColor": "rgba(75,192,192,1)",
39+
"pointBackgroundColor": "#fff",
40+
"pointBorderWidth": 1,
41+
"pointHoverRadius": 5,
42+
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
43+
"pointHoverBorderColor": "rgba(220,220,220,1)",
44+
"pointHoverBorderWidth": 2,
45+
"pointRadius": 1,
46+
"pointHitRadius": 10,
47+
"data": [
48+
65,
49+
59,
50+
80,
51+
81,
52+
56,
53+
55,
54+
40
55+
],
56+
"spanGaps": false
57+
}
58+
]
59+
},
60+
"options": {}
61+
}
62+
```
63+
````
64+
65+
This is how it looks like:
66+
67+
```chart
68+
{
69+
"type": "line",
70+
"data": {
71+
"labels": [
72+
"January",
73+
"February",
74+
"March",
75+
"April",
76+
"May",
77+
"June",
78+
"July"
79+
],
80+
"datasets": [
81+
{
82+
"label": "# of bugs",
83+
"fill": false,
84+
"lineTension": 0.1,
85+
"backgroundColor": "rgba(75,192,192,0.4)",
86+
"borderColor": "rgba(75,192,192,1)",
87+
"borderCapStyle": "butt",
88+
"borderDash": [],
89+
"borderDashOffset": 0,
90+
"borderJoinStyle": "miter",
91+
"pointBorderColor": "rgba(75,192,192,1)",
92+
"pointBackgroundColor": "#fff",
93+
"pointBorderWidth": 1,
94+
"pointHoverRadius": 5,
95+
"pointHoverBackgroundColor": "rgba(75,192,192,1)",
96+
"pointHoverBorderColor": "rgba(220,220,220,1)",
97+
"pointHoverBorderWidth": 2,
98+
"pointRadius": 1,
99+
"pointHitRadius": 10,
100+
"data": [
101+
65,
102+
59,
103+
80,
104+
81,
105+
56,
106+
55,
107+
40
108+
],
109+
"spanGaps": false
110+
}
111+
]
112+
},
113+
"options": {}
114+
}
115+
```
116+
117+
Also another example chart.
118+
119+
````markdown
120+
```chart
121+
{
122+
"type": "doughnut",
123+
"data": {
124+
"labels": [
125+
"Red",
126+
"Blue",
127+
"Yellow"
128+
],
129+
"datasets": [
130+
{
131+
"data": [
132+
300,
133+
50,
134+
100
135+
],
136+
"backgroundColor": [
137+
"#FF6384",
138+
"#36A2EB",
139+
"#FFCE56"
140+
],
141+
"hoverBackgroundColor": [
142+
"#FF6384",
143+
"#36A2EB",
144+
"#FFCE56"
145+
]
146+
}
147+
]
148+
},
149+
"options": {}
150+
}
151+
```
152+
````
153+
154+
Which generates:
155+
156+
```chart
157+
{
158+
"type": "doughnut",
159+
"data": {
160+
"labels": [
161+
"Red",
162+
"Blue",
163+
"Yellow"
164+
],
165+
"datasets": [
166+
{
167+
"data": [
168+
300,
169+
50,
170+
100
171+
],
172+
"backgroundColor": [
173+
"#FF6384",
174+
"#36A2EB",
175+
"#FFCE56"
176+
],
177+
"hoverBackgroundColor": [
178+
"#FF6384",
179+
"#36A2EB",
180+
"#FFCE56"
181+
]
182+
}
183+
]
184+
},
185+
"options": {}
186+
}
187+
```

‎assets/js/copy_code.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
// create element for copy button in code blocks
22
var codeBlocks = document.querySelectorAll("pre");
33
codeBlocks.forEach(function (codeBlock) {
4-
if ((codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) && codeBlock.querySelector("code:not(.language-mermaid)")) {
4+
if (
5+
(codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) &&
6+
codeBlock.querySelector("code:not(.language-chart)") &&
7+
codeBlock.querySelector("code:not(.language-mermaid)")
8+
) {
59
// create copy button
610
var copyButton = document.createElement("button");
711
copyButton.className = "copy";

0 commit comments

Comments
 (0)