Jerry Salem
During my last FMAcademy talk, I presented ways to create charts in FileMaker 12. One of the most compelling reasons to use FileMaker 12 is the new enhancements in the Charting functionality. There are twice the number of chart types available, building charts requires less overhead, there is a better interface that allows users to create charts on the fly, and there is more control of the look and presentation of the charts you create. I would like to review some of the techniques we covered in that talk today.
First, let’s start with a sample Chart, showing the number of invoices produced per month. It’s fine for what it is, but we can make it better. The key parts I would like to concentrate on are the X and Y Axes.

First lets look at the X Axis – the horizontal series of values running along the bottom of the chart. For charts with many data points, the number of ticks along this axis may make for a very cluttered chart. For data that is in a continuous series you may not need to show every tick mark.
One way we can hide alternating values in the X axis is to use the mod function.

In order to achieve this illusion, we need to update the calculation used for the X axis data. Using the Mod function we can show just the odd months: January, March, etc.
If(Mod(Month(ChartAxis::MonthOfSale);2) = 1; MonthName(ChartAxis::MonthOfSale) & ” ” & Year(ChartAxis::MonthOfSale))
Now the label only shows up for the even months. How does this work?
Well, the Mod function gives the remainder from dividing the first argument (Month Number) by the second argument (2). Take January, with a Month Number of 1. Divide 1 by 2 has a remainder of 1. Therefore the January label is shown. For February, the Month Number is 2, 2 /2 is 1. The remainder is zero, so that label doesn’t show up. Luckily there are an even number of months in a year so December doesn’t show but January of the next year does!
You can modify this calculation to show every three tick marks by changing the 2 in the mod to a 3;
If(Mod(Month(ChartAxis::MonthOfSale);3) = 1; MonthName(ChartAxis::MonthOfSale) & ” ” & Year(ChartAxis::MonthOfSale))
This modification gives tick marks every quarter (every 3 months), as shown in this graph.

Finally, notice that by default, FileMaker shows the Y axis on both the left and right side. An alternative presentation to conserve space would be not to show the Y axis at all, and put the Y value right on the column. This gives more graph and less white space.

This can be done by updating the Y Axis style as shown. Use custom settings and set the Font size for the Y axis to 1 (you can’t set it to zero).

Using the ‘Show Data Points on Chart’ check box on the Chart section will put the value of each column on it. Although the user can also see this value by hovering over the column, showing it directly lets you scan the numbers and makes it more iOS compatible too.
Finally, I truncate the month names so they are all 3 characters long. So there isn’t so much white space at the bottom of the chart.
To review, we explored how make less cluttered graphs by displaying every 2 or 3 X axis labels, hiding the Y axis and added the chart data directly to the charts.
Your users will appreciate understanding their data better by using charts. If you want to see the implementation in the FileMaker environment, download the demo. These techniques will let your charts pop out better and show more information.
Recent Comments