Jun 30

Written by:
6/30/2015 

Earlier this month I was the tech guy again for our annual VBS. For each year part of program includes raising money for a missionary project. To make things more interesting, the VBS participants are divided into two teams which then compete to see who can give the most money by the end of the VBS. A running total is announced each day. 

It makes sense to present information like this in graph of some sort. SongShow Plus does not have a built in graph feature so I have, in the past, used the Microsoft Graph Chart OLE component that can be embedded into a SongShow Plus slide. It served its purpose, but the graph itself doesn't look too interesting:



So after giving it some thought, it occurred to me that I could use the newer capabilities of HTML 5 and JavaScript to make a more interesting graph. I didn't have much time, however, so I searched around for some JavaScript examples. There were a number of graphing frameworks which contained far more overhead than what I wanted for this purpose. I finally came upon this site which provided a nice example of an animated graph without much overhead. I downloaded the code, made some changes, and came up with a graph that suited our needs. The HTML and JavaScript files were stored locally on the presentation machine which I then linked to as a web page using the web link import feature of SongShow Plus.

Below is an example of the animated chart we used this year. Click the "Show Totals" button to see the graph in action. Note that this feature does require HTML 5.



This graph was then easily presented from within the SongShow Plus program panel.

Using this technique, you can present animated graphs from within SongShow Plus.

[comments]