Images

Import Images

xmCHART supports the import of images, which proves useful, for example, for backgrounds. Images can be imported by using the arguments sourceType and sourceData available for the following functions:

An image source can be a file (sourceType = file) or a Base64 encoded PNG image stream (sourceType = stream). In order to achieve a high printing quality, make sure that the original size of the image is at least 2x larger than the display size of the image. For example, if the display size is 100x100 pixels, the original size of the imported image should be at least 200x200 pixels.

Import from FileMaker

An image is imported from FileMaker if the argument sourceType = stream is set. The image must be of type PNG and encoded as Base64 encoded stream, optionally prefixed with a data URI header: "data:image/png;​base64,". The image stream is entered as string by using the argument sourceData. For example:

BackgroundPict(stream;​"iVBORw0KGgoAAAANSUhEUgAAAEAAAA​BABAMA...")

BackgroundPict(stream;​"data:image/png;base64,​iVBORw0KGgoAAAANSUhEUg​AAAEAAAABABAMA...")

OpenDrawing(600;​400;​print)

...

/* Image size, for example: 1200x800 */

BackgroundPict(stream;​​<Base64 encoded PNG image>)

CloseDrawing()

OpenDrawing(600;​400;​print)

...

OpenView(0;​0;​350;​250)

...

/* Image size, for example: 700x500 */

BackgroundPict(stream;​​<Base64 encoded PNG image>)

CloseView()

...

CloseDrawing()

OpenDrawing(600;​400;​print)

...

OpenChart(10;​50;​400;​400;​on)

...

/* Image size, for example: 800x800 */

ChartBackgroundPict(xy;​stream;​​<Base64 encoded PNG image>)

CloseChart()

...

CloseDrawing()

OpenDrawing(600;​400;​print)

...

AddPicture(100;​100;​250;​150;​stream;​\"" & Base64Encode(ContainerField) & "\")

...

CloseDrawing()

 
Convert images To Base64

Encoding images to Base64 can be done by using FileMaker’s built-in Base64Encode( ) function or by using an online conversion service such as one offered by http://www.opinionatedgeek.com/​dotnet/​tools/​base64encode

 
 
Examples
EXAMPLE_01
1

OpenDrawing(24;​24)

2

/* Add high resolution icon. */

3

/* The original image size is 64x64 pixels. */

4

AddPicture(0;​0;​24;​24;​stream;​"data:image/png;base64,​iVBORw0KGgoAAAANSUhEUgAAA​EAAAABABAMAAABYR2ztAAAAA3​NCSVQICAjb4U/gAAAAFVBMVEX​////MzMyZmZlmZmYzMzMAAAD/​//8QLgCRAAAAB3RSTlP//////​/8AGksDRgAAAAlwSFlzAAALEg​AACxIB0t1+/AAAABx0RVh0U29​mdHdhcmUAQWRvYmUgRmlyZXdv​cmtzIENTM5jWRgMAAAFISURBV​EiJldRPcoIwFAZwVxygI+7bUQ​7QDpxAWQvhsS4Iuf8RnBpC3t+​mzQrhN5Lv48HB4/V2hetnQU4d​8I8z/KzhZIEjgBQIPCCuTgf1D​qDSQPoDgF4DFwTgJMGEr0MrwY​OAXoKSAJAgZHAfZ5ZjB6GiItb​VcjDtp8PRyMGc0tWkzAheIYa0​XR241+FKcipgUcGcuwXf5P3fM​bNF+Vuo+v3LqpqMAxqIvz/NlV​x3EmQHZiagkyA7k1vObTUKyI0​9yTl4BSxqSuPV6zSAY4wawDEa​FdRaCAxQDK+CFMPpIPsJSjFGH​aQYjQH2p2F8BvcY6ElQEGM4C8​Sh6izwvYHWArHsygRbjMIEq9w​jBaHs3gbszZcglN38Ai68aA5K​XjQHi9gjAzMvmgPPixagZkULU​JKJVsDCihZg5nvkYOJ75MDfqg​woC3biCUwU+G00jdkYAAAAAEl​FTkSuQmCC")

5

CloseDrawing()

EXAMPLE_01
EXAMPLE_02
1

OpenDrawing(220;​200)

2

ChartData(5 4 3 2 1)

3

BarChart(shadow)

4

PictureStyle(all;​stream;​"data:image/png;base64,​iVBORw0KGgoAAAANSUhEUgAAA​B4AAAAmCAMAAADkx9tQAAAAA3​NCSVQICAjb4U/gAAABhlBMVEW​YzTWXzDWXyzWWyjSWyzSVyjSV​yTSUyDSTxzOSxjOTxjOSxTOSx​DORxDORwzOQwzKQwjKPwTKOwD​KPwDKOvzKNvzGNvjGMvTGLvDG​MvDGKuzCKujCJuTCJuDCItzCI​uDCHty+Hti+GtS+DsS6Bri2Ar​Cx9qix9qCt8qCt8pit8pyt6pS​t1nSl0nSh0nChzmyhznChymyh​ymihymShxmChwmChwlyhvlyds​kyZrkSZojSRniyRhgiJigyJhg​yJfgCFffyFdfSBaeh9Ydx9UcR​1TcR1RbhxRbRxQbBxLZRtMZhp​LZRpJYxpIYRlFXRhDWxhCWRc8​UhU7UBU6TxQ6ThQ3ShM1RxIyR​BIxQhEvPxAuPhAtPRAsPA8oNg​4nNQ0oNQ4mMw0lMg0kMQ0kMA0​iLgwgKwseKAodJwocJgocJQoa​IwkaIgkZIgkZIQkYIQgYIAgWH​QgWHQcTGgcTGQcTGQYPFQUOEw​UNEgUMEAQKDQMHCQIHCgIFBwI​FBgIEBQEDBQECAgEAAACUJQm7​AAAACXBIWXMAAAsSAAALEgHS3​X78AAAAHHRFWHRTb2Z0d2FyZQ​BBZG9iZSBGaXJld29ya3MgQ1M​zmNZGAwAAAWBJREFUOI2lzFVT​glEUheFtByq22N3d3d3Y3Tqii​NiBgeufe5B9OHu4+G58Ltc7s4​j+JcISRVqiaKHu8MMzJodoijJ​qv6EsiiWKYozNQMWnXUwUa1z/​ZdSIieKMvb/qd4hJ5np/IC/Ey​RwvNJ7+PEzJIZ4SLVFCSNX4yp​oy3WOmBLKxjCNojxV6tFESG4S​xocckSmYTwFswvuFMj8mUwubh​dwfzJbx6TCE7c+LpJpj38axHO​6WydZxzXoVPj6mUxraxxXkOyN​VrKB/AyXkUKA/ldHaBGc69QL1​eKZPdYYBzgw/teqUs9opulX0q​N96jX6+UzT5RqXLgoOkYI3qlH​OZy5XmAXZVbllxDeg1lRWVnII​uJHIbKkyq3iiksD7+H5TzjFuh​7ANrERPmGys1XQLuYwnL1SVgu​MFQu2wE6xESFhhdfhesqi4mKD​S9eipeBTjFRkeGFu2gW6BITlV​iiUku/wwG2Nx7am24AAAAASUV​ORK5CYII=";​1.0)

5

BorderStyle(all;​;​0.25;​0 0 0 50)

6

ShadowStyle(all;​2 2 3)

7

AxisLine(all;​0) /* Hide axis lines. */

8

AxisMajorTicks(all;​0) /* Hide axis ticks. */

9

AxisMajorTickLabelTexts(x;​"A";​"B";​"C";​"D";​"E")

10

MajorGridLineWidths(all;​all;​0.25)

11

GridLocation(all;​front)

12

ChartBackground(xy;​1 30 1

13

0.0 220 220 220 255

14

0.35 240 240 240 255

15

1.0 220 220 220 255;​;​0)

16

CloseDrawing()

EXAMPLE_06

Import from File

An image is imported from a file if the argument sourceType = file is set. The file name is entered as string by using the argument sourceData. Please refer to File Path Syntax for the allowed syntax for file paths. In order to be imported, images have to be in one of the following image formats:

BMP, EMF (Windows only), GIF, JPEG, PDF (macOS only), PNG, TIFF

For example:

AddPicture(10;​10;​;​;​file;​"image.png") /* Image shown in original size. */

AddPicture(10;​10;​100;​100;​file;​"image.png") /* Image scaled to 100x100. */

OpenDrawing(600;​400;​print)

...

/* Image size, for example: 1200x800 */

BackgroundPict(file;​"../images/background.png")

CloseDrawing()

OpenDrawing(600;​400;​print)

...

OpenView(0;​0;​350;​250)

...

/* Image size, for example: 700x500 */

BackgroundPict(file;​"/C:/Users/Public/Documents/background.jpg")

CloseView()

...

CloseDrawing()

OpenDrawing(600;​400;​print)

...

OpenChart(10;​50;​400;​400;​on)

...

ChartBackgroundPict(xy;​file;​"/Volumes/Macintosh HD/Users/Shared/background.pdf")

CloseChart()

...

CloseDrawing()

Importing an image from a file in a FileMaker server environment is not recommended. Instead, import images directly from FileMaker by using a Base64 encoded PNG image string.

Import from Clipboard

The import from the clipboard is deprecated*. Instead, import images from a file or directly from FileMaker.

An image is imported from the clipboard if the argument sourceType is empty or sourceType = clipboard is set. The argument sourceData is ignored. For example:

AddPicture(10;​10) /* Use image from clipboard, shown in original size. */

AddPicture(10;​10;​;​;​clipboard) /* Same as line above. */

AddPicture(10;​10;​100;​100;​clipboard)

It is not recommended to use the clipboard in a FileMaker server environment. Instead, import images directly from FileMaker by using a Base64 encoded PNG image string. Furthermore, the clipboard is not supported in IWP/CWP, WebDirect and FileMaker Go.


Export Images

The created drawing is copied to a FileMaker container field and can optionally be exported to a file.

Export to FileMaker

xmCHART copies the created drawing as a PNG bitmap image into a FileMaker container field. The image resolution can be controlled with the 3rd argument resolution in the OpenDrawing() function. If there is no 3rd argument or resolution = screen, the drawing will be created as a PNG bitmap with a resolution optimized for screen display. That means Apple’s Retina or Windows HighDPI display resolutions, but also the current Zoom Level set in FileMaker will be properly taken into account. Examples:

OpenDrawing(800;​600) /* PNG bitmap, optimized for screen display. */

OpenDrawing(800;​600;​screen) /* Same as OpenDrawing(800;600) */

OpenDrawing(800;​600;​0) /* Same as OpenDrawing(800;600) */

OpenDrawing(800;​600;​print) /* PNG bitmap, optimized for printing (300 dpi) */

OpenDrawing(800;​600;​-1) /* Same as OpenDrawing(800;600;print) */

OpenDrawing(800;​600;​3.5) /* High resolution PNG bitmap: 2800x2100 */

xmCHART supports image resolution factors from 0.25 (very coarse and pixelated) to 4 (high resolution). A high resolution bitmap, for example, OpenDrawing(800;​600;​print) is recommended for FileMaker script step [Save Records As PDF] or [Export Field Contents].

Export to File

xmCHART supports the following image formats for export:

BMP, EMF (Windows only), GIF, JPEG, PDF, PNG, SVG, TIFF

FormatDescription
BMP Huge file size (no compression), not supported in all web browsers, no transparent background.
EMF Windows only, no support in web browsers.
GIF Small file size, support in all web browsers, no transparent background, limited number of colors can cause color banding. Not recommended for graphs with color gradients and shading effects.
JPEG Small file size, support in all web browsers, customizable image quality, no transparent background. Recommended as a general purpose bitmap image format.
PDF Small file size, not supported in all web browsers. In macOS: vector-based format with editable objects and very small file size (if there are no included bitmap images)
PNG Small file size, support in all web browsers. Support transparent background. Recommended as a general purpose bitmap image format.
SVG Very small file size (if there are no included bitmap images or bitmap patterns), support in all modern web browsers. Recommended as vector-based image format for the web.
TIFF Small file size, not supported in all web browsers.

Export as bitmap image

The following bitmap export functions are presently available:

The file name is entered as first argument, the resolution can be controlled by using the last argument. For example:

SaveAsPNGFile("chart.png") /* Export image in original size. */

SaveAsTIFFile("drawing.tif";​;​;​2.0) /* Export image 2x larger than original size. */

SaveAsJPGFile("graph.jpg";​;​;​max;​3.5) /* Export image 3.5x larger than original size. */

Please note that certain bitmap image formats do not support transparent backgrounds, such as GIF or JPEG. When exporting to these formats, the background color will be white in transparent areas.

Export as vector-based image

The following functions for exporting high–quality vector-based images are available:

SaveAsEMFFile() /* Windows only. */

SaveAsPDFFile()

SaveAsSVGFile()

For example:

SaveAsPDFFile("drawing.pdf")

SaveAsPDFFile("graph.pdf";​;​;​"Graph 1";​"Proceedings";​"John Q. Doe")

SaveAsSVGFile("chart.svg";​;​;​"Chart 1";​"Proceedings";​"Author: John Q. Doe")

SaveAsEMFFile("plot.emf")

In Windows the functions SaveAsEMFFile() and SaveAsPDFFile() output high resolution 300 dpi bitmaps.

Please refer to File Path Syntax for the allowed syntax for file paths.

Export to Clipboard

The export to the clipboard is deprecated*. Instead, use FileMaker’s built-in [Copy] script step.

The SendToClipboard() function has to be used when copying a drawing to the clipboard. For example:

SendToClipboard() /* macOS: PDF vector-based format, Windows: Bitmap image (1x). */

SendToClipboard(1) /* Bitmap image in original size (1x). */

SendToClipboard(2.5) /* Bitmap image 2.5x larger than original size. */

SendToClipboard(0.75) /* Bitmap image 75% of original size. */

It is not recommended to use the clipboard in a FileMaker server environment. Furthermore, the clipboard is not supported in IWP/CWP, WebDirect and FileMaker Go.


File Path Syntax

In xmCHART 4 the file path syntax becomes more compliant with Unix standards. A leading slash means in xmCHART 4 an absolute path (full path), in opposite to xmCHART 3 where a file path with a leading slash defines a path relative to the current database’s location.

Absolute File Paths

macOS

Syntax

Variant 1: /users/ user_name / folder_path / file_name

Variant 2: /Volumes/ volume / folder_path / file_name

Examples

SaveAsPNGFile("/​users/​john/​desktop/​graph123.png")

SaveAsPNGFile("/​Volumes/​Macintosh HD/​users/​john/​desktop/​graph123.png")

SaveAsPNGFile("/​Volumes/​Backup HD/​graphs/​graph123.png")

SaveAsPNGFile("/​Volumes/​Macintosh HD/​Users/​Shared/​graph123.png")

SaveAsPDFFile("/​Volumes/​Macintosh HD/​Library/​FileMaker Server/​Data/​Documents/​graph123.pdf")

Windows

Syntax

/drive:/ folder_path / file_name

A slash in front of the drive letter is optional and can be omitted.

Examples

SaveAsPNGFile("/C:/​users/​john/​desktop/​graph123.png")

SaveAsPNGFile("C:/​users/​john/​desktop/​graph123.png")

SaveAsPNGFile("/Z:/​graphs/​graph123.png")

SaveAsPNGFile("Z:/​graphs/​graph123.png")

SaveAsPNGFile("/C:/​Users/​Public/​Documents/​graph123.png")

SaveAsPDFFile("/C:/​Program Files/​FileMaker/​FileMaker Server/​Data/Documents/​graph123.pdf")

Relative File Paths

Path relative to current directory

Syntax

./ folder_path / file_name

The file path is relative to the current database’s location. ./ in front of the path is optional and can be omitted.

Examples

SaveAsPNGFile("graph123.png")

SaveAsPNGFile("./​graph123.png") /* Same as line above. */

SaveAsPNGFile("sub_directory/​graph123.png")

SaveAsPNGFile("./​sub_directory/​graph123.png") /* Same as line above. */

SaveAsPNGFile("/​sub_directory/​graph123.png") /* Error: xmCHART 3 syntax. */

Path relative to parent directories

Syntax

../ folder_path / file_name

Examples

SaveAsPNGFile("../graph123.png")

SaveAsPNGFile("../​sub_directory/​graph123.png")

SaveAsPNGFile("../../​graph123.png")

SaveAsPNGFile("../../​sub_directory/​graph123.png")

SaveAsPNGFile("../../../../​sub_directory/​graph123.png")

Path relative to user’s home directory

Syntax

~/ folder_path / file_name

Example

SaveAsPNGFile("~/graphs/​graph123.png")

Same as:

SaveAsPNGFile("/users/​john/​graphs/​graph123.png") /* macOS */

SaveAsPNGFile("/C:/users/​john/​graphs/​graph123.png") /* Windows */

Relative file paths are not supported in FileMaker Server. Instead, use absolute file paths. For example:

SaveAsJPGFile("/Volumes/​Macintosh HD/​Users/​Shared/​plot_01.jpg";​;;max) /* macOS */

SaveAsSVGFile("/Volumes/​Macintosh HD/​Library/​FileMaker Server/​Data/​Documents/​plot_01.svg") /* macOS */

SaveAsJPGFile("/C:/Users/​Public/​Documents/​plot_01.jpg";​;;max) /* Windows */

SaveAsSVGFile("/C:/Program Files/​FileMaker/​FileMaker Server/​Data/​Documents/​plot_01.svg") /* Windows */

Scroll to Top
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×