Creating a custom spiritual gifts assessment questionnaire – PART IV

Hey there! We’re back, and the week has somehow gotten away from me. That’s good and bad, but mostly good.

Today’s tutorial will pick up from where we last left off. This has been a pretty intense or involved series. I appreciate you sticking around and I hope this tutorial series helps you and your church.

As a quick recap, review and follow along with the previous tutorials if you’re just dropping in on us:

As I stated last week, today’s tutorial covers charting a person’s custom spiritual gifts assessment questionnaire results via a column chart(see below).

It may not be the most visually appealing chart, but the charting software does allow decent chart results printing and downloading in various formats (i.e., pdf, jpeg, png, and svg).

Spiritual Gifts Assessment - HighCharts

No time to waste, let’s get started.

Setup and Include CDN Libraries

Open the text editor of your choice, and name and save the following file: chart.php. Make sure this file is in the same directory as the reports.php file.

The first step to master is including our content delivery network libraries, also known as CDN libraries. If you’re not familiar with CDN libraries, then quickly, CDN libraries allow access to externally hosted files by 3rd-party vendors.  CDN libraries do wonders for a website’s performance in reducing page load time.

In this tutorial, the Google jQuery and HighCharts CDN libraries are used. If executing code in a local environment without internet access, then you’ll have to create local copies of jQuery and HighCharts. Visit both sites and download the appropriate files if you’re executing code locally without internet access.

As shown below, start a HTML5 file, and include Google’s jQuery script link between the head tags(i.e., <head></head>) and HighChart’s framework and module script links just after the body (i.e., <body>) tag.

Sanitizing, retrieving, and preparing chart data

If you remember, we last linked to the charts.php file in the reports.php file. The reports.php file lists and links each person’s custom spiritual gifts assessment questionnaire results.

Instead of linking directly to the csv file containing each person’s custom spiritual gifts assessment questionnaire results, the chart.php was linked too with an query string appended to it (see below).

Now that we know this bit of info, it’s time to parse the query string and results file using a bit of PHP magic.

At the top of the charts.php file, define a file variable and set it equal to the clean_input function with $_REQUEST[‘file’] as its argument.

Next, create an if statement using the file variable to make sure the file variable has a value and to ensure the file variable value actually exists as a file in the directory.

Just below the if statement and indented, include a redirect to the index.php file using PHP’s built-in header method.

This is an important step! It’s important that there is a file value and existence to retrieve and parse before we begin any heavy lifting to create the chart.

Next, it’s time to retrieve and prepare the chart data. To do this, we’ll use two separate functions that I’ll cover in detail at the very end: prepChartData and personChart.

Create a chartData variable and set it equal to the prepChartData function, passing to the function the file variable as its argument.

Next set a subTitle variable, and set it equal to the personChart function, passing to the function the file variable as its argument also. The subTitle variable is displayed just below the chart’s title, and allows for the person viewing the chart to know who’s results are being displayed.

Time for some jQuery, HighCharts and PHP magic

To display the chart, one of the first things that needs to happen is creating a div container.

Since HighCharts combines jQuery and Javascript to display fancy charts, we’ll create a div with the id name of container. Place the div just below the second HighCharts script link.

In addition, set the style of the div to have the following attributes:

  • Minimum width of 310 pixels
  • Height of 400 pixels
  • Margins with a top and bottom of 0 (zero), and auto set has the left and right margins

Next, it’s time to initialize the chart. create a lastScript variable and set it equal to the code below, which is HighCharts jQuery scripting for our chart. I’m not going to go through each line of code, but do read HighCharts’ Your First Chart example.

I will make certain call outs but not all. The two things to note about the lastScript variable code is that it’s jQuery code translated into a PHP string. This eliminates manual data entry of chart results to create the chart and allows for dynamic chart creation using subTitle and chartData variables.

Look closely at the code and you’ll see the following:

  • jQuery script is binded to the div’s id (i.e., #container)
  • jQuery HighCharts subtitle’s text is set to subTitle variable
  • jQuery HighCharts series’ data is set to chartData variable

Last but not least, echo the lastScript variable just before the closing body tag, and that’s it!

Also, there are numerous HighCharts features and options to add, so feel free to code your little heart out until it’s content. See HighCharts documentation. 🙂

Is the chart visible?

Believe it or not, that’s it for today’s tutorial. Save the code below in its entirety, and don’t forget to include the functions too.

You’re now ready to view the reports.php page from a web browser.

Click the report text link for person’s custom spiritual gifts assessment questionnaire results. Once link is clicked, you should be taken to a new web tab that displays assessment results in a pretty nifty chart.

The chart summarizes and ranks a person’s gifting assessment in descending order. In the upper righthand corner of the chart, a hamburger menu icon that resembles 3 stacked horizontal bars allows for easy printing and downloading of the results.

You could also copy and paste the web browser link into an email and send each person their respective chart results link or PDF.

That’s it for today’s tutorial. Stay tuned for next week’s tutorial.  I’ll discuss and show you how to update a person’s gifts using the CCB API.

Hope you’ve had a great week. See you back here next week.

clean_input Function

The clean_input function does nothing more than sanitize the input receive via the $_REQUEST global variable. It’s always important sanitize user input, whether you create your own function/methods or use the filter_var PHP built-in method.

prepChartData Function

The prepChartData function parses the results csv file. The file name of the csv is passed as it’s primary argument. The function returns an array of data. The data is each gifting and their respective integer total.

personChart Function

The personChart function parses the file name of the csv as it’s primary argument, removing “-“ and “.csv” strings while also formatting the date to be more human friendly and readable. The data returned is used as the chart’s subtitle.


Please comment if this tutorial has helped you.