Using jQuery in FileMaker – Part 4

FileMaker provides us with many great tools for reporting purposes. One of these tools is charting capabilities. FileMaker’s built in charting can be very useful for displaying a variety of analytics, but sometimes you run across a situation where you need just a bit more than what FileMaker offers. This is where using jQuery in FileMaker can be your best friend.

In this post I will illustrate a technique that will allow for much more advanced charting in FileMaker. By using the techniques I’ve outlined in past posts in this series, we will create animated jQuery charts that can display multiple data sets in the same chart as well as having a choice of various chart types.

I am a big fan of Chart.js (http://www.chartjs.org/). It is a jQuery based charting plug-in for creating animated jQuery charts of many sorts including bar, doughnut, line, pie, polar area and radar charts. It’s extremely versatile, easy to implement and fully customizeable.

Now, let’s get into the nitty gritty…

First things first, let’s assume that we have a solution where we have fields containing aggregated data that we would like to chart. Typically, these would be calculation fields that perform summaries or totals.

Step 1 – Acquire Chart.js jQuery library:

First thing is to download the Chart.js library files from Chart.js (http://www.chartjs.org/). The zip file you will download contains all the js and sample files needed to produce the desired chart.

Screen Shot 2014-10-08 at 1.40.05 AM

Step 2 – Creating the HTML:

Expand the zip file and navigate to the ‘samples’ folder and open the desired chart sample file and the Chart.js file in your preferred text editor. Copy/paste all of the code contained in Chart.js into the HTML file replacing the line “<script src=”../Chart.js”></script>” with the copied javascript (the resulting file will have many lines of code due to embedding the entire library). Be sure to enclose the javascript in “<script>…</script>” tags (See Fig. 1.2 below).

Screen Shot 2014-10-08 at 1.49.49 AM
Fig. 1.1
Screen Shot 2014-10-08 at 1.50.55 AM
Fig. 1.2

Step 3 – Alter the JavaScript:

For this example, in FileMaker, I have two series of data representing sales for a particular month in a 5 month range (Jan-May). I also have fields for each data set where I can enter RGB values for the fill and stroke of the graph element(s) simply by specifying the RGB values separated by commas (eg. 64, 157, 239).

Screen Shot 2014-10-08 at 8.13.01 PM

Now we need to replace the JavaScript data points in the HTML code with FileMaker merge variables for our data point calculation fields. I have created a calculation field for each data series that concatenates all of the values into a comma separated string. This will be the merge field we use to push data to the JavaScript. We will also replace the stroke color and fill colors with our merge fields for colors. In the following screenshot (Fig. 2.1 ), I have highlighted the areas where I have placed merge fields from FileMaker.

Screen Shot 2014-10-08 at 8.11.57 PM
Fig 2.1

Once we have the code altered to our scenario, we can now copy all of the code in the HTML file and bring it into FileMaker.

Warning: Due to encoding differences, some text editors may cause errors when placing code into FileMaker. If you are experiencing issues with no chart display, try using a different text editor to copy and paste code into FileMaker.

In FileMaker, we will create a text object to the right of our layout and paste our HTML code into this text object. Then we need to give our text object an object name so, in the inspector, choose the “Position” tab and enter a name for your text object; I used “chart_code” in my example. Now we need to create a webviewer to display the HTML we’ve created. Using the webviewer tool, draw a webviewer object on your layout. When the dialogue appears, choose “Custom Web Address” in the “Choose a Website” pane and enter “data:text/html,” & GetLayoutObjectAttribute ( “chart_code”; “content” ) in the “Web Address” field.

Screen Shot 2014-10-08 at 9.09.01 PM

At this point, you should be able to enter Browse mode and view the result. This can be a very powerful charting system as it allows for many different customizeable chart types, styles and options. I hope you’ve enjoyed this post and thank you for reading. Happy charting!

If you have any questions or would like to have assistance implementing these features in your solutions, please contact us at scarpettagroup.com

2017-01-02T20:01:08+00:00 October 9th, 2014|