{"id":15405,"date":"2016-09-06T04:15:23","date_gmt":"2016-09-05T22:45:23","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=15405"},"modified":"2026-01-20T14:42:14","modified_gmt":"2026-01-20T09:12:14","slug":"using-fusioncharts-filemaker-pro-15","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/","title":{"rendered":"Using FusionCharts with FileMaker Pro 15: Complete Guide"},"content":{"rendered":"FileMaker, a powerful consumer database application, allows you to create database solutions that perform exactly as you expect. You can use FusionCharts Suite XT to render and manipulate your charts in any application built with FileMaker Pro 15. You can use this to add interactive JavaScript charts to your web viewer while also enjoying the delight and comprehensiveness of the FusionCharts Suite.\r\n\r\nIn this post, we&#8217;ll go over how to use FileMaker Pro to render the <a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\">Data Charts<\/a> and Maps from FusionCharts. To see more charts and maps, <a href=\"https:\/\/www.fusioncharts.com\/charts\">click here<\/a>. All of the charts are designed to work with JavaScript, <a href=\"https:\/\/www.fusioncharts.com\/react-charts\">React<\/a>,\u00a0<a href=\"https:\/\/www.fusioncharts.com\/vue-js-charts\">Vue<\/a>,\u00a0<a href=\"https:\/\/www.fusioncharts.com\/angular2-js-charts\">Angular<\/a>,\u00a0<a href=\"https:\/\/www.fusioncharts.com\/jquery-charts\">jQuery<\/a>,\u00a0<a href=\"https:\/\/www.fusioncharts.com\/ember-charts\">Ember<\/a>, and other frameworks.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Setting_up_FusionCharts_Suite_XT\" title=\"Setting up FusionCharts Suite XT\">Setting up FusionCharts Suite XT<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Creating_a_Project_in_FileMaker_Pro\" title=\"Creating a Project in FileMaker Pro\">Creating a Project in FileMaker Pro<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Adding_a_Web-Viewer_to_your_Layout\" title=\"Adding a Web-Viewer to your Layout\">Adding a Web-Viewer to your Layout<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Adding_FusionCharts_to_the_Web_Viewer\" title=\"Adding FusionCharts to the Web Viewer\">Adding FusionCharts to the Web Viewer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Adding_Calculation_to_index_HTML\" title=\"Adding Calculation to index_HTML\">Adding Calculation to index_HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Adding_Data_to_Fields\" title=\"Adding Data to Fields\">Adding Data to Fields<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#DataSource\" title=\"DataSource\">DataSource<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Viewing_the_Chart\" title=\"Viewing the Chart\">Viewing the Chart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Download_a_Sample_Project\" title=\"Download a Sample Project\">Download a Sample Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#Troubleshooting\" title=\"Troubleshooting\">Troubleshooting<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Setting_up_FusionCharts_Suite_XT\"><\/span>Setting up FusionCharts Suite XT<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nYou can easily <a href=\"https:\/\/cart.fusioncharts.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">buy a license<\/a> to use FusionCharts in any commercial application. The FusionCharts Suite trial version is also available to <a href=\"https:\/\/www.fusioncharts.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">download for free<\/a> with no feature restrictions (trial version will show an evaluation watermark).\r\n\r\nOnce you have bought the licensed or the trial version, installation of FusionCharts Suite XT merely involves copying and pasting the JavaScript files from the download package into your project folder. Thereafter, you can simply include the FusionCharts JavaScript library in your web applications and start building your charts, gauges, and maps.\r\n\r\nFusionCharts provides you with an exhaustive gallery of live examples, hosted in <a href=\"https:\/\/www.fusioncharts.com\/javascript-chart-fiddles\/\" target=\"_blank\" rel=\"noopener noreferrer\">JSFiddle<\/a> along with the source code. This library serves as a great reference source to draw inspiration from.\r\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_Project_in_FileMaker_Pro\"><\/span>Creating a Project in FileMaker Pro<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo render and manipulate charts using FileMaker, you first need to create a project in the FileMaker application.\r\n\r\nFollowing are the basic steps that will help you in creating a project:\r\n<ol>\r\n \t<li>Open the FileMaker application and click the File tab.<\/li>\r\n \t<li>In the navigation pane, select New Solution.<\/li>\r\n \t<li>Give a name to the application you are going to build and choose a directory for saving your project.<\/li>\r\n \t<li>Click Save. This will create:\r\n<ul>\r\n \t<li>A layout with the same name as that of your project<\/li>\r\n \t<li>A table with the same name as that of your project<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Adding_a_Web-Viewer_to_your_Layout\"><\/span>Adding a Web-Viewer to your Layout<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFileMaker lets you add a web viewer to display a web page on a layout. The address of the web page can either be a constant or a calculation based on the data in the current record.\r\n\r\nTo add a web viewer:\r\n<ol>\r\n \t<li style=\"list-style-type: none\">\r\n<ol>\r\n \t<li>From the status toolbar, click the web viewer tool<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15453\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/toolbar.jpg\" alt=\"toolbar\" width=\"672\" height=\"78\" srcset=\"\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg 672w, \/blog\/wp-content\/uploads\/2016\/09\/toolbar-150x17.jpg 150w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/>\r\n<ol>\r\n \t<li>Drag the crosshair to draw the web viewer<\/li>\r\n<\/ol>\r\nOR\r\n<ol>\r\n \t<li>From the Insert menu, click Web Viewer<\/li>\r\n<\/ol>\r\nThe web-viewer looks as shown below:\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15446\" src=\"https:\/\/blog.fusioncharts.com\/wp-content\/uploads\/2016\/09\/web-viewer.jpg\" alt=\"Web Viewer\" width=\"672\" height=\"481\" srcset=\"\/blog\/wp-content\/uploads\/2016\/09\/web-viewer.jpg 672w, \/blog\/wp-content\/uploads\/2016\/09\/web-viewer-150x107.jpg 150w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/>\r\n<h2><span class=\"ez-toc-section\" id=\"Adding_FusionCharts_to_the_Web_Viewer\"><\/span>Adding FusionCharts to the Web Viewer<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nTo render FusionCharts using Filemaker, add the FusionCharts JavaScript libraries to the web viewer using the following steps:\r\n<ol>\r\n \t<li>Click the File tab.<\/li>\r\n \t<li>From the navigation bar, point to Manage, and then select Database (or press CTRL+SHIFT+D). You will see a table with the same name of the layout, where you can add fields to the table by clicking on the table name.<\/li>\r\n \t<li>To add fields to the table, click menu\/button\/option. Name the first field, say <em>index_HTML<\/em> and set its type to Calculation. The Specify Calculation dialog box opens.<\/li>\r\n \t<li>To render FusionCharts, create some basic fields such as chartType, container_id, chartWidth, chartHeight, dataFormat and dataSource and set their type to text.<\/li>\r\n \t<li>To make all these fields global:\r\n<ul>\r\n \t<li>Select a field and, from, click Option. The dialog box opens<\/li>\r\n \t<li>Select the Storage option and select the checkbox for Use Global Storage<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>In the Specify Calculation dialog box (created in step 3), write the source code that is executed to generate a HTML code (the HTML code is given below). This code is later appended to the Web-Viewer.<\/li>\r\n<\/ol>\r\nThe database looks as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15450\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/database.jpg\" alt=\"database\" width=\"672\" height=\"481\" srcset=\"\/blog\/wp-content\/uploads\/2016\/09\/database.jpg 672w, \/blog\/wp-content\/uploads\/2016\/09\/database-150x107.jpg 150w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/>\r\n<ol>\r\n \t<li>Click Web-Viewer. A window opens, where you have to write the <em>table_name:: index_HTML<\/em> in the web address (table name is same as that of your project name).<\/li>\r\n<\/ol>\r\nBy following all the above steps, web viewer gets linked to the calculation in the index_HTML.\r\n<h2><span class=\"ez-toc-section\" id=\"Adding_Calculation_to_index_HTML\"><\/span>Adding Calculation to index_HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nThe code below is a template to be added in your index_HTML field. This calculation will render the HTML content for the chart:\r\n<pre class=\"lang:markup\">\"data:text\/html,\" &amp; \u00b6 &amp;\r\n\"&lt; !DOCTYPE html&gt;\" &amp; \u00b6 &amp;\r\n\"\" &amp; \u00b6 &amp;\r\n\"\" &amp; \u00b6 &amp;\r\n\/\/--&gt;Embed FusionCharts Lib. from local file system\r\n\"\" &amp; \u00b6 &amp; \"My first chart using FusionCharts Suite XT\" &amp; \u00b6 &amp; \"\/\/ &lt; ![CDATA[\r\nFusionCharts.ready(function() {\r\n    var fusioncharts = new FusionCharts({\r\n        type: &#039;&quot;&amp;::chartType&amp;\"',\r\n        renderAt: '\"&amp;::containerId&amp;\"',\r\n        width: '\"&amp;::chartWidth&amp;\"',\r\n        height: '\"&amp;::chartHeight&amp;\"',\r\n        dataFormat: '\"&amp;::dataFormat&amp;\"',\r\n        dataSource: {\r\n            \"&amp;table_name::dataSource&amp;\"\r\n        }\r\n    });\r\n    fusioncharts.render();\r\n}); \" &amp; \u00b6 &amp;\r\n\"\r\n\/\/ ]]&gt;\" &amp; \u00b6 &amp; \"&lt; div id = \\\"chart-container\\\"&gt;FusionCharts XT will load here! \" &amp; \u00b6 &amp; \"\" &amp; \u00b6 &amp; \"\"<\/pre>\r\nThere are 2 ways to include the FusionCharts library for the above code:\r\n<ol>\r\n \t<li>Using the FusionCharts library link from the local folder:\r\n<pre><\/pre>\r\n<\/li>\r\n \t<li>Using FusionCharts uploaded on a remote server:\r\n<pre><\/pre>\r\n<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Adding_Data_to_Fields\"><\/span>Adding Data to Fields<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nAdd data for the following fields:\r\n<ol>\r\n \t<li><em>chartType:<\/em> The type of chart that you intend to plot. e.g. column 3D, column 2D, pie 2D etc.<\/li>\r\n \t<li><em>chartId:<\/em> A unique ID for the chart, using which it will be recognized in the HTML page. Each chart on the page should have a unique Id.<\/li>\r\n \t<li><em>chartWidth:<\/em> Intended width for the chart (in pixels), for example, 600<\/li>\r\n \t<li><em>chartHeight:<\/em> Intended height for the chart (in pixels), for example, 450<\/li>\r\n \t<li><em>containerId:<\/em> ID of the chart container, for example, chart-1<\/li>\r\n \t<li><em>dataFormat:<\/em> Type of data used to render the chart, for example, json, xml.<\/li>\r\n \t<li><em>dataSource:<\/em> Actual data for the chart, for example, {&#8220;chart&#8221;:{},&#8221;data&#8221;:[{&#8220;label&#8221;:&#8221;Jan&#8221;,&#8221;value&#8221;:&#8221;420000&#8243;}]}<\/li>\r\n<\/ol>\r\nTo add data in the above fields:\r\nGo to Browse mode and, from the status toolbar, select Table View. Add the field value one by one directly into the table.\r\n<h2><span class=\"ez-toc-section\" id=\"DataSource\"><\/span>DataSource<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow, as you are all set with our library and web viewer, the last and the most important thing you need to render the chart is the datasource where you will pass your data to the chart. It will specify the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.\r\n<strong>Note<\/strong>: Stringify your JSON data before using it to render a chart\r\n\r\nFor example:\r\n<pre class=\"lang:javascript\">dataSource: \"chart\": {\r\n        \"theme\": \"fint\",\r\n        \"caption\": \"Bakersfield Central - Total footfalls\",\r\n        \"subCaption\": \"Last week\",\r\n        \"xAxisName\": \"Day\",\r\n        \"yAxisName\": \"No. of Visitors\",\r\n        \"showValues\": \"0\"\r\n    },\r\n    \"data\": [{\r\n        \"label\": \"Mon\",\r\n        \"value\": \"15123\"\r\n    }, {\r\n        \"label\": \"Tue\",\r\n        \"value\": \"14233\"\r\n    }, {\r\n        \"label\": \"Wed\",\r\n        \"value\": \"25507\"\r\n    }, {\r\n        \"label\": \"Thu\",\r\n        \"value\": \"9110\"\r\n    }, {\r\n        \"label\": \"Fri\",\r\n        \"value\": \"15529\"\r\n    }, {\r\n        \"label\": \"Sat\",\r\n        \"value\": \"20803\"\r\n    }, {\r\n        \"label\": \"Sun\",\r\n        \"value\": \"19202\"\r\n    }]\r\n<\/pre>\r\nThe table with the value inserted looks as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15452\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/database-table.jpg\" alt=\"database-table\" width=\"672\" height=\"106\" srcset=\"\/blog\/wp-content\/uploads\/2016\/09\/database-table.jpg 672w, \/blog\/wp-content\/uploads\/2016\/09\/database-table-150x24.jpg 150w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/>\r\n\r\nIn the above code, <a href=\"https:\/\/www.fusioncharts.com\/dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">chart<\/a> properties and the data values to be plotted are specified using the JSON format. The chart object is used to set the chart properties; the data object is used to specify the data labels (using the label attribute) and the data values (using the value attribute).\r\n<h2><span class=\"ez-toc-section\" id=\"Viewing_the_Chart\"><\/span>Viewing the Chart<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow that all the setup is done, you don\u2019t need to wait for long to view the output. All you need to do is:\r\n<ol>\r\n \t<li>Click View and select Browse Mode (you can also do this by pressing Ctrl+B)<\/li>\r\n<\/ol>\r\nThe output looks as shown below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15459\" src=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/fusioncharts-in-filemaker1.jpg\" alt=\"fusioncharts-in-filemaker\" width=\"672\" height=\"410\" srcset=\"\/blog\/wp-content\/uploads\/2016\/09\/fusioncharts-in-filemaker1.jpg 672w, \/blog\/wp-content\/uploads\/2016\/09\/fusioncharts-in-filemaker1-150x92.jpg 150w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/>\r\n<h2><span class=\"ez-toc-section\" id=\"Download_a_Sample_Project\"><\/span>Download a Sample Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nYou can download a sample project of FusionCharts using FileMaker by clicking <a href=\"https:\/\/github.com\/fusioncharts\/fileMaker-with-fusionCharts\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.\r\nTo run the project, all you need to do is:\r\n<ol>\r\n \t<li>Go to File -&gt; Manage -&gt; Database (or ctrl + shift + d )<\/li>\r\n \t<li>Open the field index_HTML of type \u201cCalculation\u201d<\/li>\r\n \t<li>Replace the source in the &lt;script&gt; tag with the FusionCharts folder on your local system or change it to the global URL of your remote server where the FusionCharts folder is located.<\/li>\r\n<\/ol>\r\n<h2><span class=\"ez-toc-section\" id=\"Troubleshooting\"><\/span>Troubleshooting<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nWhile using FusionCharts with FileMaker Pro 15, you may face roadblocks or errors. The following are some troubleshooting suggestions:\r\n<ol>\r\n \t<li>Escape the double quotes <strong>&#8221; &#8220;<\/strong>, for the JSON data.<\/li>\r\n \t<li>The table name is by default the same as that of your project.<\/li>\r\n \t<li>To add the libraries, always use their absolute path.<\/li>\r\n \t<li>Always add 3 forward slash (\/\/\/) while adding libraries, before adding the path (for example: src=\\&#8221;file:\/\/\/C:\/desktop\/JS\/fusionCharts.js\\&#8221;)<\/li>\r\n<\/ol>\r\nNow, as you have created your first chart using FileMaker, here are some of the advantages of using FusionCharts Suite XT with FileMaker:\r\n<ol>\r\n \t<li>Easy to Get Started<\/li>\r\n \t<li>Cross-platform (Mac OS X, Windows, iOS)<\/li>\r\n \t<li>Includes starter solutions<\/li>\r\n \t<li>There are many plugins available to extend the functionalities<\/li>\r\n \t<li>Has some neat built-in tricks like built in graphs, tab controls, web viewers<\/li>\r\n<\/ol>","protected":false},"excerpt":{"rendered":"<p>FileMaker, a powerful consumer database application, allows you to create database solutions that perform exactly as you expect. You can use FusionCharts Suite XT to render and manipulate your charts in any application built with FileMaker Pro 15. You can use this to add interactive JavaScript charts to your web viewer while also enjoying the [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[580,586,587,588,585,583],"coauthors":[647],"class_list":["post-15405","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-charts-using-filemaker-pro","tag-database-in-filemaker","tag-fusioncharts-with-filemaker-pro","tag-javascript-charts-in-filemaker","tag-json-data-in-filemaker","tag-web-viewer-in-filemaker"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using FusionCharts with FileMaker Pro 15: Complete Guide<\/title>\n<meta name=\"description\" content=\"Add interactive JavaScript charts to your web viewer with our complete guide on using FusionCharts with FileMaker Pro 15 for the modern year of 2026 now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using FusionCharts with FileMaker Pro 15: Complete Guide\" \/>\n<meta property=\"og:description\" content=\"Add interactive JavaScript charts to your web viewer with our complete guide on using FusionCharts with FileMaker Pro 15 for the modern year of 2026 now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-05T22:45:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:12:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"672\" \/>\n\t<meta property=\"og:image:height\" content=\"78\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dishank Tiwari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dishank Tiwari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Dishank Tiwari\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\"\n\t            },\n\t            \"headline\": \"Using FusionCharts with FileMaker Pro 15: Complete Guide\",\n\t            \"datePublished\": \"2016-09-05T22:45:23+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:12:14+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\"\n\t            },\n\t            \"wordCount\": 1244,\n\t            \"commentCount\": 4,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/toolbar.jpg\",\n\t            \"keywords\": [\n\t                \"charts using filemaker pro\",\n\t                \"database in filemaker\",\n\t                \"fusioncharts with filemaker pro\",\n\t                \"javascript charts in filemaker\",\n\t                \"json data in filemaker\",\n\t                \"web viewer in filemaker\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\",\n\t            \"name\": \"Using FusionCharts with FileMaker Pro 15: Complete Guide\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/toolbar.jpg\",\n\t            \"datePublished\": \"2016-09-05T22:45:23+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:12:14+00:00\",\n\t            \"description\": \"Add interactive JavaScript charts to your web viewer with our complete guide on using FusionCharts with FileMaker Pro 15 for the modern year of 2026 now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg\",\n\t            \"width\": 672,\n\t            \"height\": 78\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Using FusionCharts with FileMaker Pro 15: Complete Guide\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad\",\n\t            \"name\": \"Dishank Tiwari\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg\",\n\t                \"caption\": \"Dishank Tiwari\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using FusionCharts with FileMaker Pro 15: Complete Guide","description":"Add interactive JavaScript charts to your web viewer with our complete guide on using FusionCharts with FileMaker Pro 15 for the modern year of 2026 now.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/","og_locale":"en_US","og_type":"article","og_title":"Using FusionCharts with FileMaker Pro 15: Complete Guide","og_description":"Add interactive JavaScript charts to your web viewer with our complete guide on using FusionCharts with FileMaker Pro 15 for the modern year of 2026 now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2016-09-05T22:45:23+00:00","article_modified_time":"2026-01-20T09:12:14+00:00","og_image":[{"width":672,"height":78,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg","type":"image\/jpeg"}],"author":"Dishank Tiwari","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dishank Tiwari","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/"},"author":{"name":"Dishank Tiwari","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad"},"headline":"Using FusionCharts with FileMaker Pro 15: Complete Guide","datePublished":"2016-09-05T22:45:23+00:00","dateModified":"2026-01-20T09:12:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/"},"wordCount":1244,"commentCount":4,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/toolbar.jpg","keywords":["charts using filemaker pro","database in filemaker","fusioncharts with filemaker pro","javascript charts in filemaker","json data in filemaker","web viewer in filemaker"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/","url":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/","name":"Using FusionCharts with FileMaker Pro 15: Complete Guide","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/gallery\/blog\/2016\/09\/toolbar.jpg","datePublished":"2016-09-05T22:45:23+00:00","dateModified":"2026-01-20T09:12:14+00:00","description":"Add interactive JavaScript charts to your web viewer with our complete guide on using FusionCharts with FileMaker Pro 15 for the modern year of 2026 now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2016\/09\/toolbar.jpg","width":672,"height":78},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/using-fusioncharts-filemaker-pro-15\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using FusionCharts with FileMaker Pro 15: Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/9106ebef0b6b4fec8a2bb46862ee02ad","name":"Dishank Tiwari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/edab16f3ae97d48c528d1820c0597954","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/589\/58951cd49296e6fe39049faab4be5f7cx96.jpg","caption":"Dishank Tiwari"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/dishank-tiwari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=15405"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/15405\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=15405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=15405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=15405"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=15405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}