Reveal-Chart

Reveal.js

Reveal is a framework for creating solid and beautiful presentations on the browser using HTML, CSS, and Javascript. It supports some really good features and has a lot of plug-ins. The interesting thing is that, it has a speaker view which gives an overview of all the slides in the presentation. It also shows the speaker the notes that he/she has written for each slide along with the timer. There are other features like exporting to PDF, Markdown support, nested slides, etc.

Here is a demo taken from the project page:

Chart.js

Chart.js is a small library that is capable of drawing different types of interactive charts on the HTML5 Canvas. There are currently 6 charts available which can extended using the API. Here is a simple example taken from the documentation :

Hover over the chart for more information

And here is the sample code :

<!-- Create a Canvas  -->
<canvas id="chart1" style="width:250px; height:250px; margin:auto; display:block;"></canvas>

<!-- Load the Chart.js Library -->
<script src="Chart.min.js"></script>
<script type='text/javascript'>
// Set the data
  var data = [
    {
      value: 300,
      color:"#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
    },
    {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Turquoise"
    },
    {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
    }
  ];

// Set individual options for the chart
  var options = {};

// Get the canvas context
  var ctx = document.getElementById("chart1").getContext("2d");

// Call the chart
  var chart1 = new Chart(ctx).Doughnut(data,options);
</script>

The documentation is clearly structured and easy to understand. There are other alternatives to this library that you can checkout, like highcharts.js, canvas.js, d3.js which can visualize more complex data but what you will find is that, some of them are free for only non-commercial use and are a little bit difficult to setup.

The Plug-in

When I was developing a presentation using reveal.js, there was a requirement where I had to add some charts to the slides. I searched online and found out about chart.js. Unfortunately, for some reason, when trying to add a chart by following the given documentation, it just doesn’t work. So I fiddled around with it and was able to make it work by only adding an iframe. The results were favorable but wasn’t consistent when looking at it from different devices. As this method worked, I started experimenting with it and kinda developed a plug-in that integrates the two libraries.

Here is a presentation with the detailed documentation on how to install it and use it :

Update 1 : Reveal-chart has been deprecated, please use the chart module in revealjs-plugins. link : https://github.com/rajgoel/reveal.js-plugins

Resources

• Reveal-Chart : https://gitlab.com/dvenkatsagar/reveal-chart
• Reveal.js : https://github.com/hakimel/reveal.js/
• Chart.js : www.chartjs.org