Integrating the C3 Chart Library

We continue our study of FileMaker & JavaScript.

Charting in FileMaker is difficult. The idiomatic FileMaker chart object has been around since version 12, and it hasn’t seen any updates. It’s tough to get data into it, and even more difficult to customize it. There’s really not a whole lot of customizations possible.

Enter C3. The C3 JavaScript library is a powerful, highly-interactive, and extremely customizable charting library. It can do probably anything that we as FileMaker developers need.

So here are the steps to set up a C3 chart. In the following examples, we will use the JSPlayground file from FileMakerDevCon 2019‘s training day as a place to set up what we need. Then we’ll explore extracting it from the playground file and placing it into your custom app.

Let’s begin.

Walkthrough

Below are the steps we’ll walk through to set up the C3 charting integration. Either follow them in sequence or choose an option you need to set up in your chart.

Getting the File

You can download the file with the button below. It contains the C3 integration set up and the steps we’ll follow in the videos below.

Download the File

Steps 1-3

Steps 4-6

Steps 7-9

Steps 10-12

Steps 13-15

Steps 16-17 and EXTRA

And check out the “General Videos” section where we explain more general integration steps (ones not tied to the C3 library).

Steps 1-3

(Click to Play)

In this video we explore the C3 starting place. Jeremy reviews all the tabs and what we’re going to do.

(Click to Play)

Jeremy starts by rendering the chart using the start up configuration from the documentation. He also talks about how easy it is to create a dashboard using different div elements in the HTML document.

(Click to Play)

In this video we bind the chart to a div. That is, we tell the JavaScript where to draw the chart. Jeremy goes into detail about this and suggests a way to begin building a dashboard.

Steps 4-6

(Click to Play)

C3 has many chart types, and here we explore those types and how to tell C3 which type to (magically) draw.

(Click to Play)

In this video we assign the JSON data to be drawn on the graph. C3 can take JSON data from FileMaker and make it render automatically.

(Click to Play)

After the data has been assigned, we can tell C3 which keys will be drawn as series on the chart. Here, Jeremy explores those simple options.

Steps 7-9

(Click to Play)

Often the JSON keys are not suitable to use in the legend. So here we explore the way to make the legend text more readable.

(Click to Play)

In this video, Jeremy explains the option for telling C3 which key is to be distributed across the x-axis.

(Click to Play)

Giving users some great interaction, Jeremy shows how to add a click event to the bars.

Steps 10-12

(Click to Play)

We can draw vertical lines on the chart to mark certain points in the graph. In this video, Jeremy shows you how to add quarter markers during the year.

(Click to Play)

What’s a graph without grid lines? Jeremy shows you how to add grid lines to both the x- and y-axis.

(Click to Play)

We aren’t just limited to the default blue and orange of the default C3. We can instead send custom colors to the library for each series.

Steps 13-15

(Click to Play)

The y-axis label can be positioned anywhere near the axis. In this video Jeremy shows you how (again, with a simple option).

(Click to Play)

Sometimes the x-axis tick labels are long, Luckily we can rotate them any direction.

(Click to Play)

Again: more customization. We can format the y-axis tick labels to fit our needs. In this video, Jeremy shows you how to turn the numbers into a dollar format.

Steps 16-17 and EXTRA

(Click to Play)

We can group any two or more series together. Surprise: it’s a simple option.

(Click to Play)

After all these customizations, there’s still more to do. Jeremy encourages you to try some out on your own (make sure you back up your code once inawhile!)

(Click to Play)

In this video, Jeremy shows you the work it took to get the C3 libraries out of the content delivery network (CDN) and set them up in FileMaker fields.

General Videos

We’ve got some tutorials that apply generally to the work you’ve done with the JSPlayground file and with JavaScript in general. They will be posted here. Check back soon!

Continue Your Study

Head back to the FileMaker & JavaScript course syllabus to continue your study.