Skip to content

Commit 459f300

Browse files
kcoopermillerkcoopermiller
committed
charts
1 parent f8ce7e2 commit 459f300

5 files changed

Lines changed: 474 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ The following plugins are included and enabled:
129129
- **Notes**: Speaker notes view (`RevealNotes`)
130130
- **Search**: Search within slides (`RevealSearch`)
131131
- **Zoom**: Alt+click to zoom (`RevealZoom`)
132+
- **Chart**: Interactive charts with Chart.js (`RevealChart`)
133+
- Supported chart types: `line`, `bar`, `pie`, `doughnut`, `radar`, `polarArea`, `bubble`, `scatter`
132134

133135
## Build and Deploy
134136

‎demo.html‎

Lines changed: 162 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
<!-- Theme used for syntax highlighted code -->
1616
<link rel="stylesheet" href="/plugin/highlight/monokai.css">
1717

18+
<!-- Chart plugin -->
19+
<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chart/plugin.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
21+
1822
<!-- PDF export settings -->
1923
<script>
2024
var link = document.createElement( 'link' );
@@ -373,6 +377,148 @@ <h2>Tabular Tables</h2>
373377
</table>
374378
</section>
375379

380+
<section>
381+
<section>
382+
<h2>Interactive Charts</h2>
383+
<p>Create beautiful charts with Chart.js</p>
384+
<canvas data-chart="line" style="max-height: 400px;">
385+
<!--
386+
{
387+
"data": {
388+
"labels": ["January","February","March","April","May","June","July"],
389+
"datasets":[
390+
{
391+
"data":[65,59,80,81,56,55,40],
392+
"label":"Sales 2023","backgroundColor":"rgba(93,93,214,.2)","borderColor":"rgba(93,93,214,1)"
393+
},
394+
{
395+
"data":[28,48,40,19,86,27,90],
396+
"label":"Sales 2022","backgroundColor":"rgba(220,120,120,.2)","borderColor":"rgba(220,120,120,1)"
397+
}
398+
]
399+
},
400+
"options": {
401+
"responsive": true,
402+
"plugins": {
403+
"title": {
404+
"display": true,
405+
"text": "Monthly Sales Comparison"
406+
}
407+
}
408+
}
409+
}
410+
-->
411+
</canvas>
412+
</section>
413+
<section>
414+
<h2>Bar Charts</h2>
415+
<canvas data-chart="bar" style="max-height: 400px;">
416+
<!--
417+
{
418+
"data": {
419+
"labels": ["Q1","Q2","Q3","Q4"],
420+
"datasets":[
421+
{
422+
"data":[120,180,150,200],
423+
"label":"Product A","backgroundColor":"rgba(93,93,214,.8)"
424+
},
425+
{
426+
"data":[90,120,140,180],
427+
"label":"Product B","backgroundColor":"rgba(123,123,230,.8)"
428+
},
429+
{
430+
"data":[60,80,100,120],
431+
"label":"Product C","backgroundColor":"rgba(153,153,246,.8)"
432+
}
433+
]
434+
},
435+
"options": {
436+
"responsive": true,
437+
"plugins": {
438+
"title": {
439+
"display": true,
440+
"text": "Quarterly Revenue by Product"
441+
}
442+
}
443+
}
444+
}
445+
-->
446+
</canvas>
447+
</section>
448+
<section>
449+
<h2>Pie & Doughnut Charts</h2>
450+
<div class="r-hstack">
451+
<div style="width: 45%;">
452+
<canvas data-chart="pie">
453+
<!--
454+
{
455+
"data": {
456+
"labels": ["Red","Blue","Yellow","Green","Purple"],
457+
"datasets":[{
458+
"data":[300,50,100,40,120],
459+
"backgroundColor": ["#ff6384","#36a2eb","#ffce56","#4bc0c0","#9966ff"]
460+
}]
461+
}
462+
}
463+
-->
464+
</canvas>
465+
</div>
466+
<div style="width: 45%;">
467+
<canvas data-chart="doughnut">
468+
<!--
469+
{
470+
"data": {
471+
"labels": ["Desktop","Mobile","Tablet"],
472+
"datasets":[{
473+
"data":[60,30,10],
474+
"backgroundColor": ["#5B5BD6","#7B7BE6","#9B9BF6"]
475+
}]
476+
}
477+
}
478+
-->
479+
</canvas>
480+
</div>
481+
</div>
482+
</section>
483+
<section>
484+
<h2>CSV Data Charts</h2>
485+
<p>You can also use comma-separated values</p>
486+
<canvas data-chart="line" style="max-height: 350px;">
487+
Month, January, February, March, April, May, June
488+
Temperature, 5, 7, 12, 17, 22, 25
489+
Rainfall, 95, 80, 60, 40, 25, 15
490+
<!--
491+
{
492+
"data": {
493+
"datasets": [
494+
{"label": "Temperature (°C)", "borderColor": "#ff6384", "yAxisID": "y"},
495+
{"label": "Rainfall (mm)", "borderColor": "#36a2eb", "yAxisID": "y1"}
496+
]
497+
},
498+
"options": {
499+
"responsive": true,
500+
"scales": {
501+
"y": {
502+
"type": "linear",
503+
"display": true,
504+
"position": "left"
505+
},
506+
"y1": {
507+
"type": "linear",
508+
"display": true,
509+
"position": "right",
510+
"grid": {
511+
"drawOnChartArea": false
512+
}
513+
}
514+
}
515+
}
516+
}
517+
-->
518+
</canvas>
519+
</section>
520+
</section>
521+
376522
<section>
377523
<h2>Clever Quotes</h2>
378524
<p>
@@ -481,8 +627,23 @@ <h1>THE END</h1>
481627
pdfSeparateFragments: false,
482628
pdfMaxPagesPerSlide: 1,
483629

630+
// Chart plugin configuration
631+
chart: {
632+
defaults: {
633+
color: 'lightgray', // color of labels
634+
scale: {
635+
beginAtZero: true,
636+
ticks: { stepSize: 1 },
637+
grid: { color: "lightgray" }, // color of grid lines
638+
},
639+
},
640+
line: { borderColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ], "borderDash": [ [5,10], [0,0] ] },
641+
bar: { backgroundColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ]},
642+
pie: { backgroundColor: [ ["rgba(0,0,0,.8)" , "rgba(220,20,20,.8)", "rgba(20,220,20,.8)", "rgba(220,220,20,.8)", "rgba(20,20,220,.8)"] ]},
643+
},
644+
484645
// Register plugins
485-
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath, RevealSearch, RevealZoom ],
646+
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath, RevealSearch, RevealZoom, window.RevealChart ],
486647

487648
maxScale: 1,
488649
});

dist/assets/main-C0RaMS6I.js renamed to dist/assets/main-B6EDOgWC.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 147 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212

1313
<!-- Theme used for syntax highlighted code -->
1414

15+
<!-- Chart plugin -->
16+
<script src="https://cdn.jsdelivr.net/npm/reveal.js-plugins@latest/chart/plugin.js"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
18+
1519
<!-- PDF export settings -->
1620
<script>
1721
var link = document.createElement( 'link' );
@@ -20,7 +24,7 @@
2024
link.href = window.location.search.match( /print-pdf/gi ) ? '/css/print/pdf.css' : '/css/print/paper.css';
2125
document.getElementsByTagName( 'head' )[0].appendChild( link );
2226
</script>
23-
<script type="module" crossorigin src="./assets/main-C0RaMS6I.js"></script>
27+
<script type="module" crossorigin src="./assets/main-B6EDOgWC.js"></script>
2428
<link rel="stylesheet" crossorigin href="./assets/main-CoIPZiBM.css">
2529
</head>
2630
<body>
@@ -372,6 +376,148 @@ <h2>Tabular Tables</h2>
372376
</table>
373377
</section>
374378

379+
<section>
380+
<section>
381+
<h2>Interactive Charts</h2>
382+
<p>Create beautiful charts with Chart.js</p>
383+
<canvas data-chart="line" style="max-height: 400px;">
384+
<!--
385+
{
386+
"data": {
387+
"labels": ["January","February","March","April","May","June","July"],
388+
"datasets":[
389+
{
390+
"data":[65,59,80,81,56,55,40],
391+
"label":"Sales 2023","backgroundColor":"rgba(93,93,214,.2)","borderColor":"rgba(93,93,214,1)"
392+
},
393+
{
394+
"data":[28,48,40,19,86,27,90],
395+
"label":"Sales 2022","backgroundColor":"rgba(220,120,120,.2)","borderColor":"rgba(220,120,120,1)"
396+
}
397+
]
398+
},
399+
"options": {
400+
"responsive": true,
401+
"plugins": {
402+
"title": {
403+
"display": true,
404+
"text": "Monthly Sales Comparison"
405+
}
406+
}
407+
}
408+
}
409+
-->
410+
</canvas>
411+
</section>
412+
<section>
413+
<h2>Bar Charts</h2>
414+
<canvas data-chart="bar" style="max-height: 400px;">
415+
<!--
416+
{
417+
"data": {
418+
"labels": ["Q1","Q2","Q3","Q4"],
419+
"datasets":[
420+
{
421+
"data":[120,180,150,200],
422+
"label":"Product A","backgroundColor":"rgba(93,93,214,.8)"
423+
},
424+
{
425+
"data":[90,120,140,180],
426+
"label":"Product B","backgroundColor":"rgba(123,123,230,.8)"
427+
},
428+
{
429+
"data":[60,80,100,120],
430+
"label":"Product C","backgroundColor":"rgba(153,153,246,.8)"
431+
}
432+
]
433+
},
434+
"options": {
435+
"responsive": true,
436+
"plugins": {
437+
"title": {
438+
"display": true,
439+
"text": "Quarterly Revenue by Product"
440+
}
441+
}
442+
}
443+
}
444+
-->
445+
</canvas>
446+
</section>
447+
<section>
448+
<h2>Pie & Doughnut Charts</h2>
449+
<div class="r-hstack">
450+
<div style="width: 45%;">
451+
<canvas data-chart="pie">
452+
<!--
453+
{
454+
"data": {
455+
"labels": ["Red","Blue","Yellow","Green","Purple"],
456+
"datasets":[{
457+
"data":[300,50,100,40,120],
458+
"backgroundColor": ["#ff6384","#36a2eb","#ffce56","#4bc0c0","#9966ff"]
459+
}]
460+
}
461+
}
462+
-->
463+
</canvas>
464+
</div>
465+
<div style="width: 45%;">
466+
<canvas data-chart="doughnut">
467+
<!--
468+
{
469+
"data": {
470+
"labels": ["Desktop","Mobile","Tablet"],
471+
"datasets":[{
472+
"data":[60,30,10],
473+
"backgroundColor": ["#5B5BD6","#7B7BE6","#9B9BF6"]
474+
}]
475+
}
476+
}
477+
-->
478+
</canvas>
479+
</div>
480+
</div>
481+
</section>
482+
<section>
483+
<h2>CSV Data Charts</h2>
484+
<p>You can also use comma-separated values</p>
485+
<canvas data-chart="line" style="max-height: 350px;">
486+
Month, January, February, March, April, May, June
487+
Temperature, 5, 7, 12, 17, 22, 25
488+
Rainfall, 95, 80, 60, 40, 25, 15
489+
<!--
490+
{
491+
"data": {
492+
"datasets": [
493+
{"label": "Temperature (°C)", "borderColor": "#ff6384", "yAxisID": "y"},
494+
{"label": "Rainfall (mm)", "borderColor": "#36a2eb", "yAxisID": "y1"}
495+
]
496+
},
497+
"options": {
498+
"responsive": true,
499+
"scales": {
500+
"y": {
501+
"type": "linear",
502+
"display": true,
503+
"position": "left"
504+
},
505+
"y1": {
506+
"type": "linear",
507+
"display": true,
508+
"position": "right",
509+
"grid": {
510+
"drawOnChartArea": false
511+
}
512+
}
513+
}
514+
}
515+
}
516+
-->
517+
</canvas>
518+
</section>
519+
</section>
520+
375521
<section>
376522
<h2>Clever Quotes</h2>
377523
<p>

0 commit comments

Comments
 (0)