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.