Reveal-Chart

A plug-in that integrates chart.js with reveal.js

Never heard of Reveal.js

check it out here

The plug-in

You can get it here:

https://gitlab.com/dvenkatsagar/reveal-chart

Installation

  • Download repository and copy the "plugin" folder to the root of your presentation
  • In the Reveal.initialize function of your presentation, add these dependencies:
Reveal.initialize({
  dependencies : [
    // Chart.min.js
    { src: 'plugin/chartjs/Chart.min.js'},
    // the plugin
    { src: 'plugin/chartjs/charted.js'}
  ]
});
Note: Press down arrow for more info.

Markup

Step 1 : In the <section> tag, add an iframe in this format:


<section>
 <iframe id="some-selector" data-chart></iframe>
</section>

Step 2 : In the Reveal.initialize function, add an option "chart" like this:

Reveal.initialize({
  chart : {
    path : "" // Optional path to Chart.js
    items : [
      {
        // selector must be iframe id,
        selector : "#some-selector",
        // type can be pie/doughtnut/line/bar/radar/polararea
        type : "",
        // The chart data can also be [], check chartjs docs
        data : {},
        // The chart options, check chartjs docs
        options : {},
        // optional
        canvas : {
          // width of iframe -> canvas element.
          // default : 250px
          width : "",
          // height of iframe -> canvas element.
          // default : 150px
          height : ""
        }
      }
    ]
  }
});
Note : "canvas" property in the "chart" option is optional.

You're all set!!!

Example : Line chart

Note : Press down arrow for more info.

Markup

  • Step 1 : Installation and Markup step 1 are same. Check here.
  • Step 2 : The javascript
Reveal.initialize({
  chart : {
    // Taken from chartjs documentation
    items : [
      {
        selector : "#chart-frame-1",
        type : "line",
        data : {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
            }
          ]
        },
        options : {
          responsive:true
        }
      }
    ]
  }
});

Example : Bar chart

Note : Press down arrow for more info.

Markup

  • Step 2 : The javascript
Reveal.initialize({
  chart : {
    // Taken from chartjs documentation
    items : [
      {
        selector : "#chart-frame-2",
        type : "bar",
        data : {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
            }
          ]
        },
        options : {
          responsive : true
        }
      }
    ]
  }
});

Example : Radar chart

Note : Press down arrow for more info.

Markup

  • Step 2 : The javascript
Reveal.initialize({
  chart : {
    // Taken from chartjs documentation
    items : [
      {
        selector : "#chart-frame-3",
        type : "bar",
        data : {
          labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
          datasets: [
            {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 90, 81, 56, 55, 40]
            },
            {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 96, 27, 100]
            }
          ]
        },
        options :{
          responsive : true,
          pointLabelFontSize : 15
        }
      }
    ]
  }
});

Example : Polar Area chart

Note : Press down arrow for more info.

Markup

  • Step 2 : The javascript
Reveal.initialize({
  chart : {
    // Taken from chartjs documentation
    items : [
      {
        selector : "#chart-frame-4",
        type : "polararea",
        data : [
          {
            value: 300,
            color:"#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
          },
          {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
          },
          {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
          },
          {
            value: 40,
            color: "#949FB1",
            highlight: "#A8B3C5",
            label: "Grey"
          },
          {
            value: 120,
            color: "#4D5360",
            highlight: "#616774",
            label: "Dark Grey"
          }
        ],
        options : {
          responsive : true
        }
      }
    ]
  }
});

Example : Pie chart

Note : Press down arrow for more info.

Markup

  • Step 2 : The javascript
Reveal.initialize({
  chart : {
    // Taken from chartjs documentation
    items : [
    {
      selector : "#chart-frame-5",
      type : "pie",
      data : [
        {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
        },
        {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
        },
        {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
          }
        ],
        options : {
          responsive : true
        }
      }
    ]
  }
});

Example : Doughnut chart

Note : Press down arrow for more info.

Markup

  • Step 2 : The javascript
Reveal.initialize({
  chart : {
    // Taken from chartjs documentation
    items : [
    {
      selector : "#chart-frame-6",
      type : "doughnut",
      data : [
        {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
        },
        {
          value: 50,
          color: "#46BFBD",
          highlight: "#5AD3D1",
          label: "Green"
        },
        {
          value: 100,
          color: "#FDB45C",
          highlight: "#FFC870",
          label: "Yellow"
          }
        ],
        options : {
          percentageInnerCutout : 50,
          responsive : true
        }
      }
    ]
  }
});

Accessing the charts

The "RevealChart" variable collects the information about all the charts when changing slides.

Add some functionality after the Reveal.initialize function like this for example: 

Reveal.addEventListener("slidechanged",function(){
  setTimeout(function(){ // Timeout required to load the plugin
    // the RevealChart has iframe ids as properties
    // (replacing "-" with "_")
    console.log(RevealChart);
  },500);
},false);

Tips and Tricks

For good results:

  • Add this line to the setTimeout function as given here.
Chart.defaults.global.responsive = true;
  • Add a class "stretch" to the iframe or set your own height and width
<iframe class="stretch" id="chart-frame" data-chart></iframe>

If you still have problems setting it up, check the source of this presentation here

Resources

Thank you