The C3 Charting library is one of the best libraries out there for charting. It gives us control over almost every pixel of the graph. We can update bar colors, text size, date and number formatting. There’s so much to customize.
This library is powerful, but it is simple to set up. It taps into the powerful but confusing D3 JS library.
It has 8.6K stars on github.com and is used by 3.9K users. It is well known.
We use this library all the time. Check it out.
Yes. This library works perfect in FileMaker. It solves basic issues of presenting data in a graph, and it is much more customizable than the native FileMaker chart object. You can do pretty much anything you want to the graph.
Data is gathered from anywhere in your FileMaker custom app and presented in a graph (or multiple graphs) in a web viewer.
There are many possible uses for this library:
Here is just a partial list of the possible options:
And so much more . . .
C3 JS will allow you to interact with your FileMaker custom app and data. You can even use FileMaker scripts to interact with the C3 chart and all the set up. Here’s a partial use case list:
The easiest way to get this set up, to test it out, is to start with the C3ChartStart.fmp12 file (click the button below).
The FileMaker file attached here has a few fields and a web viewer. The fields, Code_HTML, Code_Data, Code_JS, and Code_FMScript, contain data relevant to the library. The HTML_Calc field substitutes out some placeholder text. The web viewer renders what’s in the HTML_Calc field.
By the way: This field-to-web viewer rendering method is completely legitimate. There’s a lot of good reasons for this method. There are other ways to work with code, but for now, stick with this method.
Here are the steps:
For this library, I’d recommend using this method for now. We will explore other ways later.
This is what the data looks like for this example. It is an OBJECT that holds values of one record that will be displayed in the chart.
Once the records are collected as an array of objects, the array is placed into a field: “Code__Data” and is then calculated into the JavaScript inside the web viewer.
This object contains many properties. One of them needs to be defined for the x-axis, and any of the remaining ones can be set on the y-axis.
[
{
"date": "2018-01-31",
"peaches": 204,
"pears": 100,
"apples": 213,
"grapes": 60,
"bananas": 143
},
...
]
The C3 Charting library has a ton of options for you to configure. The Code_JS field contains the code shown off to the right. Let’s review the options in this file. To see the full list of options, review the documentation.
There are many more options. I keep discovering new ways to customize the charts I set up
var chart = c3.generate({
bindto: '#chart',
data: {
groups: [
['apples','peaches']
],
onclick:function (d) {
console.log(d)
var obj = JSON.stringify(d);
var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
window.location = theURL;
},
names: {
apples: 'Apples',
peaches: 'Peaches'
},
colors: {
'apples': '#9600b8',
'peaches': '#ff9808'
},
type: 'bar',
json: __Data__,
keys: {
x: 'date',
value: ['apples', 'peaches']
}
},
axis: {
x: {
tick: {
rotate: -60,
format: '%b %y'
},
type: 'timeseries'
},
y: {
tick: {
format: ''
},
label: {
text: 'Quantity Sold',
position: 'outer-middle'
}
}
},
grid: {
x: {
show: true,
},
y: {
show: true
}
}
});
It uses the fmp URL, which means, currently, this will NOT work in WebDirect (though we know that is set to change in the next version of FileMaker).
onclick:function (d) {
console.log(d)
var obj = JSON.stringify(d);
var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
window.location = theURL;
}
It uses the fmp URL, which means, currently, this will NOT work in WebDirect (though we know that is set to change in the next version of FileMaker).
onclick:function (d) {
This function is run when a user clicks on a bar. That’s the ‘data.onclick’ option. This function takes the parameter d, which is the entire data object of the bar clicked on.
console.log(d)
Here we just log to the console the data to be sure.
var obj = JSON.stringify(d);
Now we take the data object and stringify it. The reason we do this s because the d variable is a JavaScript object. It needs to be a JSON object for FileMaker.
var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
window.location = theURL;
This code simply invokes the fmpUrl. It sends the obj variable back to FileMaker.
Notice the placeholder text in here:
__FileName__
and
__Script__
These are replaced with the current file name and a script name in the “Code_FMScript” field.
If you’re having trouble getting this to work, refer to this blog post from LuminFire.
If you’re using FileMaker Pro 18 Advanced, you can update the ‘fmp://’ part of the function to “fmp18://”.
We’ve written a lot about the C3 Charting library. Find the posts here.
The C3 Charting library has a great API that you can call to change something about the chart. You can:
and much more.
In our FileMaker DevCon 2019 Training session, we explored this. Review this page to help you see more we can do.