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.
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.
In most cases, the best practice for integrating javascript or other assets in a Webviewer is to push assets to the temp directory (get this using GetTemporaryPath() in FileMaker), you can then export assets directly to named files. Once this is done, you can reference these files in your code using the file:// protocol.
This has numerous advantages over older methods, such as loading everything into global variables. One of the biggest of these is that provided you load your JSON into a discrete file and don't "pollute" any other files with FileMaker data, you can work entirely in the code environment of your choice, then simply move web JavaScript libraries, html, CSS, and other assets directly into your FileMaker solution.
Related
I am using Node.js with Express as a server. The user can upload a .CSV file with data. I'm parsing these data and store this in a main array composed of arrays (each line = one array). For now, I'm rendering a page (made with Pug) with this variable.
res.render('index', { rows });
The page is rendering as I would like to the user. However, I'd like to save the rendered "index" in a HTML file. The goal is to convert the HTML file into a PDF (which already works as a result of previous tests with static HTML).
Is it possible to save the rendered page as a HTML file? I'd like to take advantage of the feature of passing variable through the render function.
Another solution would be to generate by myself the HTML file, and do my own logic inside the Node.js route. That seems a long and useless solution since the render function do it well. I just need to save it instead of rendering it.
You could call PUG directly to trigger a render and then save the produced file (https://pugjs.org/)
I am moving all my javascript out of my views, and into separate .js files. But I am facing one issue.
Some javascript references a model parameter:
var data = #Html.Raw(Model.RunningTotalData)
#Html, and probably Model... isn't available in the js files.
One solution might be, in the <div> that the code is working with, create a data- type field? And populate it on the view, and then the js code somehow reads that data?
At the moment, the js is rendering a graph on a div, defined as:
<div id="allbalancediv" style="width: 100%;"></div>
Could I add a data-xxx there, and then refer to that data field in my js code? I'm not sure if that's the right way to go, or if there's a better option.
You obviously can't render server side content into static javascript files. But you can still render a script tag that sets up data for your JS files.
// View
<script>var data = #Html.Raw(Model.RunningTotalData)</script>
<script src="/frontend.js"></script>
Or a data attribute that gives your JS code an id to fetch via AJAX from a JSON api would work too.
I'm using Play Framework and I want to reproduce the plots that I have in an HTML file with the data I pass from the controller to this HTML file, but this reproduction has to be in the index page. That's to say, I pass the data from a simulation to the HTML page and there I plot the charts, and I'd like to get this data plotted properly in this HTML file let's call it "File 2" to the index HTML, let's call it "page 1".
I would like to be able to obtain this data plotted (the "arrays", let's say) from file 2 to the file 1 so I would just need to type:
$.plot(...) and avoid creating the arrays of data again (perhaps I can link the file2 with something like #file2.html.data1, #{extends 'file2.html' /} or something similar). How can I get the data from the HTML where I plot it and pass it from an this HTML file to the index HTML page? Thanks!
(If if helps, I have all the plots stored in variables (myPlot = $.plot($("#placeholder"), data, options);, myPlot2 = $.plot($("#placeholder2"), data, options);, ... in the file where I initially plot them).
I believe that augmenting following solution may solve your problem: https://stackoverflow.com/a/20874089/4506430
The only possible difference in your case is that file2.html might be dynamic (you haven't stated that, but that's my guess judging from the context). If it is, you need to render it server-side.
EDIT
After reconsideration, I realized that storing data inside session scope would be better solution for you. Thanks to session scope you can share the data between multiple controllers, and embed it in multiple html files.
I am building an iOS app using the wonderful RubyMotion framework and ProMotion gem stack.
I want to display a chart in a PM::WebScreen on my iPhone. I reference an HTML file in the content method, and have (1) the HTML file, (2) my custom JS methods file, (3) my JS chart library (HighCharts), and (4) jQuery in my resources folder. All this renders fine.
I am able to create the data array for the chart in my PM::WebScreen file (I get the data from an API call to an external source.) The chart renders fine with static data typed in.
The Problem
I want to pass my the data array to my custom JS file to get it to draw the chart with dynamic data. How can I do that?
I would prefer not to make an ajax call from my JS because I may want to use that array elsewhere in my RubyMotion/ProMotion code.
If I can pass the data to the HTML file, I suppose I could extract it to JS from there using jQuery.
Please advise. Thanks!
You can use the webview method stringByEvaluatingJavaScriptFromString. For example, if you have a JS function included in your html called loadData that take data as an argument, you can do
In your JS:
function loadData(data) {
// do something with your data
$("#chart").show();
}
In RM:
data = dataFromSource
webView.stringByEvaluatingJavaScriptFromString('loadData(' + data +')')
My app uses a lookup table that is embedded in the script. For ease of maintenance I would like to load this table from an external file. What is the best way to accomplish this? I am using the table to specify an image to be loaded on a click event.
var categoryTable = {
"volunteer": "d3_files/images/thunderx64.png",
"organization": "d3_files/images/cloudyDayx64.png",
"air":"nothing"
};
you can make a function in other js file that return this array.
load that file and call function to get this array.
An external .js file can contain any valid Javascript. Putting a variable assignment in it is just fine.
It will have to be a global variable for it to be visible to code in other files.
Take a look at jQuery getScript() Method:
Quoting from Jquery site:
Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.
If your table is JS, then this should help you. However, I think that a better approach would be to rewrite the table code and give it a JSON or XML form. It is is table, then it should be adaptable to some standard form of data representation rather than some custom JS code.