Beautiful Interactive Custom Charts
FileMaker does data, and it does it well - and easily. What FileMaker doesn't do "as" well is data visualization. This isn't because it couldn't. It's because they just haven't been able to focus on it as much. Sure, you can format portals, use repeating fields and use conditional formatting for all kinds of display magic, but you won't realize the same results as you could with a tool or language built specifically for data visualization.
In my humble opinion, they shouldn't work too hard on this either. This is because we have access to technology which provides far more than FileMaker ever can. FileMaker took ages before it had an integrated charting feature. Before that, you had to use a plugin and eventually you could use a remote API through a web viewer.
FileMaker has made a lot of progress with regards to the usability of its charting tool too. It's a great tool for basic data display.
However, when you need to go beyond the constraints of FileMaker's charting tool, the place you'll end up is within the web viewer. Granted, you'll need to shrug off any fear of learning HTML/CSS/JavaScript, but the benefits are well worth the journey.
In this video, I showcase how easy it is to integrate the very powerful JavaScript library D3. It's a power-user's tool which takes full advantage of everything that HTML/CSS/SVG has to offer. Within a world where data visualization is becoming a common form of data communication, this one video provides the first step of many towards taking advantage of some very powerful tools!
Comments
D3
matt, thanks for taking the time to bring this to us.....
some of the examples are properly game changing.
particularly when combined with fmp urls.
now I need a holiday to learn this stuff!
No Joke!
D3 is the reason I mentioned, in the summary above, that FMI shouldn't focus on their charting tool. Yeah, go up to the point of basic charts, but they'll never be able to spend enough on R&D to compete with D3 and the DOM. It's crazy cool stuff I tell ya!
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Don´t waste your time on this
Thanks for the video. For a few hours I was happy to find a solution, that might have workd in FM Runtimes, too. But on day 2 I finished trying this solution - very frustrated.
The problem is: All works, as long as it is only matter of replacing some data with FM's data. But when you want to go beyond this (most simplest) example - a Donut Chart showing only percentage values and nothing more (how usefull is that?) you’re a completely lost:
I was able to repreduce the example shown in the Video, no problem. Then I tried to reproduce another example chart and found, that it requires to import the data from a csv file. (Exporting the values into a file, an importing them again is no option for me). I examined several of the "hundreds" examples, only to find, that most of the bar charts require an import.
Sure, with some javascript knowledge a skilled javascript programmer can easely replace the csv import function with one, that accepts data from an array. But not me. And that's the point again: I am filemaker developer, I know nothing about javascript. Replacing the data in the example file shown in the video, using the substitute function is one thing, adjusting another example to run with your real data is a complete different thing. Very soon, you need some extras (i.e. you want a bar chart instead of a donut, or the lables to apear, as the percentage alone is useless) and than you are in the middle of nowhere.
Maybe, someone could tell me how to replace the data input in this example:
http://bl.ocks.org/mbostock/4061961
with an array.
But
1) who or where to ask?
2) how long will it take until the next problem?
Sorry, I spent 2 days now, only to find out, what I'd known before: Don't use techniques that you don't really understand. Sooner or later you will come to he point, where you can´t help yourself unless you spent time to learn it from ground up.
Sorry for my english.
Yes, learning JavaScript and D3 will take effort
As you have found out, (and the reason I went with a very basic example), D3 is EXTREMELY powerful for being able to render SVG within a webviewer. To that end, any complex example shown on the bl.ocks.org web site will require a concerted effort in order to adapt.
In the example you point at, the format for the data is in json format. You would need to get your FileMaker data into this format or learn how to modify the JavaScript code to accept another format.
While both of these are completely doable, they will require effort - quite possibly "days" of effort. I personally spent almost a full day just getting familiar enough with the syntax in order to be able to show what is covered in the video. Learning and mastering powerful technologies always take time.
Your advice of "Don't use techniques that you don't really understand" can be adapted to "Don't use techniques that you don't really understand - or you're not willing to invest the time to understand."
Hopefully, the information I provide gives enough people to take the time to make the investment. It's well worth it in my opinion.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
No sample FMP file
Matt,
How come you didn't put a sample FMP file with js text already in it?
It's all there
I'm not clear on what is missing. The sample file provides all of the necessary js in order for the file to function as shown.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Thanks
Hello Matt,
thanks a lot for this nice example and helping me discovering D3.
Can you make for us an example of how making this nice grouped bar chart they have ? Or help how to substituate there data.csv from your FMPDATA ?
Kind regards.
Antoine
Chart Lables, Keys?
Matt, Another great tutorial! It really got me interested in D3 and SVG for use in FileMaker. I have been playing around with the Sample file and was wondering if there is a way to get other labels than the percentages to show, ie. "Basic", "Plus" from the Labels listed in the Sample, or the actual DataPoints instead of the percentages, and/or listing keys/legends. Any pointers would be much appreciated!
Don't be discouraged.. this is how you learn and grow
i am somewhat surprised to see these comments. If you enjoy complex problems solved with simplified interfaces then this is the place to find them. I totally enjoy these examples, and continue to benefit greatly. I like it that example solutions work as templates and can get one started on right path. If All I get to do it click, then learning wont happen. I do agree about need for continued learning, which is how I like it.
Some extra information
Hi
This surely is awesome stuff, but for many people the prospect of having to deal with Javascript, css and HTML/SVG may scare them off.
There several good sources to fill your knowledge gap:
- start with the free courses on w3schools.com on any of the basic web technologies
- I bought these two really excellent e-books from o'Reilly:
SVG Essentials by David Eisenberg with all the basic information about the SVG building blocks, effects, transitions
Interactive Data Visualisation by Scott Murray, focusing entirely on D3.js.
These sources have nothing to do with FileMaker in particular, but using a data:url it's not that hard to figure out the link.
Hans Erik
WebDirect and js libraries
Hi Matt
I note this chart does not render in WebDirect. I was having trouble with another chart library not working either so I came back to your demo to see if it worked. Do you how to implement any js charts in WebDirect? Thanks
The issue is CORS
Because WebDirect makes heavy use of Javascript itself it's technically a bit of a hurdle to make charts within web viewers using d3 render.
You'll need to study up on CORS. https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Web servers need to be configured to allow things to happen. Personally, I've not been through this to try to get D3 based charts working within web viewer within WebDirect.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Error Bars
Dear Matt
In the medical/research sector particularly, charts without error bars (standard deviation, standard error of the means, confidence intervals, etc.) have very little value. Looking through Mike Bostock’s Blocks, I didn't see any with this feature. Are you aware of charting-related Javascript which might support it? I've raised this on the FM Developer's Forum with the added motivation that this would open up a huge market for FM.
Paul
This is amazing, but a diving deeper is throwing me off
I've been looking for a way to customize colors in charts - in the context of D3, a fairly mundane thing. However, my dataset is where I'm hung up. I have a portal of many rows (say 15), each of which has a field I want to chart in summary. For example, the field Tempo may contain different values (i.e., Fast, Downtempo, Moderate, Ballad). My goal is to create a pie chart with each slice representing the total of each Tempo (i.e., Moderate=3,Downtempo=4,Fast=4, Ballad=4, for a total of 15 (portal records)).
Any suggestion for the best approach to this? I'm completely stuck.
Clayton King
Figuring this out in my solution
I used your example layout to create my own, and included a FM chart for reference. The FM chart works, but for some reason, not every web-viewer chart renders. Some do and some don't.
I've created a pdf of the output, but can't upload it here, so not sure how to explain further.
I wonder if you could point me in a direction to troubleshoot this...
Clayton
Clayton King