mattbowlby mattbowlby - 5 months ago 58
JSON Question

Loading JSON FIle in FileMaker for D3 in WebViewer

I am trying to implement D3 graphs and charts in a FileMaker solution. I am stuck on loading a JSON file properly to be used in D3 code displayed in the webviewer.

I am loading all JS libraries into global variables ($$LIB.D3.JS, $$LIB.JQUERY.JS, etc.). Then I am placing the HTML code on the layout (giving an object name, i.e. html). The web viewer grabs the HTML code (from a text box on the layout) and JS code (from global variables) to render the page. This all works fine. (I am using this method detailed here: https://www.youtube.com/watch?v=lMo7fILZTQs)

However, the D3 code I have uses the getJSON() function to get a JSON, parse the data and create the visualization. I can't figure out a way to get the JSON file as a file from within FileMaker. I could put the content of the JSON file into a FileMaker variable and feed that into the HTML, but I then would not be able to use getJSON(). I would have to redo the D3 code to get the data from a JS variable and parse the data from the variable.

Is there a way for me to load a JSON file so FileMaker could use it to render the visualization properly in the WebViewer.

Answer

You have two options.

1. Calc the JSON into the HTML as you mentioned. Your right you will have to change how you load the JSON with d3. But its not tough. When you load the JSON from disk, using something like d3.json('/data.json', callback) you are just loading the json and then giving it to the callback function. If the JSON is in the HTML page in a something like var embeddedJSON You can just call the callback directly with the embeddedJSON like

callback (embeddedJSON)

Your code may look more like this.

d3.json('/data.json', function(data){
   // bunch of d3 code
})

The callback in this case is an anonymous function. You can change it like this.

var render = function(data){
   // bunch of d3 code
})
// then call render with your json variable that you embedded into the html
render ( embeddedJSON )

That will work just fine.

2. Export the html page to the temp directory, and export the json file with the data into right next to it. Then display the html using a file://url. In this case you can use d3.json(/data.json, callback ) and that will work just fine too.

Each of these methods have their pros and cons, but they both work.