Custom function for a Google API line chart

March 5, 201015 yr

[color:gray]The custom function library wasn't letting me upload anything for some reason so I'm doing it here. Included is a sample file so you can see it in action. Please check it out and let me know what you think. The sample requires FM 10

Function: fnGoogleLineChart

Parameters:

chtitle

xtitle

ytitle

xfield

yfield

color

Formula:

//The chart will scale using the highest value at the top//

Let ([

YAxis=

If ( MiddleWords ( FieldType ( Get ( FileName ) ; GetFieldName ( yfield ) ) ; 2 ; 1 ) = "number";

"|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 9); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 8); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 7); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 6); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 5); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 4); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 3); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 2); 2 )

& "|" & Round ( Max (yfield) - ((Max (yfield) / 10) * 1); 2 )

& "|" & Max (yfield);

Substitute ( List ( yfield ); "¶"; "|" ));

XAxis=

Substitute ( List ( xfield ); ["¶"; "|"] )

];

//all google api charts start with the following//

"http://chart.apis.google.com/chart?" &

//chart type is a line chart//

"cht=lc" &

//chart auto-resizes to the size of the web object named "linechart"//

"&chs=" & GetLayoutObjectAttribute ( "linechart" ; "width" ) - 50 & "x" &

GetLayoutObjectAttribute ( "linechart" ; "height" ) - 50 &

"&chtt=" & chtitle &

"&chxt=" & "x,x,y,y" &

"&chxp=1,50|3,50" &

"&chd=t:" & Substitute ( List ( yfield ); "¶"; "," ) &

"&chds=0," & Max (yfield) &

"&chg=0,10" &

"&chco=" & color

)

Sample Input:

fnGoogleLineChart ( "Sales-Chart"; "Date" ; "Sales" ; DataBase:Date ; DataBase:Sales ; "0000FF" )

Result:

http://chart.apis.google.com/chart?cht=lc&chs=737x381&chtt=Sales-Chart&chxt=x,x,y,y&chxl=0:|3/10/2010|3/11/2010|3/12/2010|3/13/2010|1:|Date|2:||66.7|133.4|200.1|266.8|333.5|400.2|466.9|533.6|600.3|667|3:|Sales&chxp=1,50|3,50&chd=t:511,446,230,667&chds=0,667&chg=0,10&chco=0000FF

Description:

Use this function to define a custom web viewer within Filemaker Pro. The function utilizes Google API to create a simple X,Y axis line graph. The chart is limited to a single line. Basic knowledge of Google API will be needed if you intend to modify the function.

In the example above, a database with 4 records in the found set containing the following data:

[Date: 3/10, 3/11, 3/12, 3/13] & [sales: 511, 446, 230, 667]

Would produce the following URL (copy/paste into your web browser to view the resulting chart)

How to use it:

1) The web viewer object must be named “linechart.” (View -> Object Info)

2) The chart will auto-scale to the dimensions of the web viewer, however Google does not allow charts larger than 300,000 pixels. So a chart sized 500x600 pixels is fine, but 550x600 will not work.

3) You are able to provide a main title for the chart as well as titles for both the X and Y axis. If you do not want anything in those positions simply input “” for these variables.

4) The X Axis. The values for this axis are passed in the order that they are created. So if the 4 records in the example were created in reverse order starting with 3/13, the graph would read 3/13 -> 3/12 -> 3/11 -> 3/10 (left to right). Keep this in mind if you need these values to show up in a particular order.

5) The Y Axis. These values must be numerical. The graph will auto-scale using the highest value passed as the top value on the chart. The numbers that actually appear along the Y axis will be the regular intervals between 0 and the highest number passed.

6) The last variable “color” will accept the hexadecimal value for the desired color of the line.

7) In order for the chart to show multiple records it must grab the data from a related table. Otherwise it will only show data from the current record.

NOTICE: Because of chart size limitation it is possible to overcrowd the values along the X axis. It is best to try to limit the number of characters used for those values.

This is my first attempt at making an easy-to-use chart solution. I am eager for feedback on how it can be improved or simplified.

fnGoogleLineChart.zip

Edited March 5, 201015 yr by Guest