Unable to view output of script in bl.ocks.org - javascript

I have been trying to figure out why my code is unable to be viewed in bl.ocks.org. I'd really like to see it up somewhere.
My code is for a bar chart that can handle changes in records and values created from a .csv file.
I have made sure that my code is working outside of this loading it from a local server from it's folder that contains the .html file and the .csv file.
I've ensured that it's not the browser cache either.
It can be found here: http://bl.ocks.org/parnelandr/7887491
Any help would be appreciated. I'm sure I've just missed something along the way.

The d3.js script you're referencing in your gist has a local path, i.e. it would need to be part of the gist as well, which it isn't. It should work fine if you either add d3.js or (preferably) reference the global URL to it instead.

Related

Is it possible to load external js files/libraries into Acumatica?

I'm working on a new Acumatica screen for our company that will require some javascript code to retrieve and display a map object (from ESRI).
This code requires an external .js file that is included to the HTML by the javascript code itself. Everything works fine if I use a blank HTML page to test this.
The problem I have is that when I try using the same code from inside the Acumatica screen, it doesn't load this required external file, and therefore the code does not work properly.
I attempted to load the full .js file code along with my code, but it returned the following error:
error CS8095: Length of String constant exceeds current memory limit. Try splitting the string into multiple constants.
I haven't tried splitting this file into multiple strings (as the error message suggests), because I want to make sure there isn't a cleaner and more professional, direct/right way to do this.
Is it possible to manually import this external .js file into our Acumatica instance, so I can point to it instead? (in case it makes a difference if it's hosted in the same environment)
or, is there any way to make Acumatica able to load external files so we can keep using our current approach? (any setting that may be preventing external files from loading?)
I'm not sure i fully understand the question. What comes to mind however is you may be looking to use the PXJavaScript control. I used this link to help get my head wrapped around how to use the control. We had a need to trigger something off with Java Script and the PXJavaScript control got us to the end result we needed. Let me know if this gets you in the right direction?
Dynamically Change Button Color

Make a small HTML application update a JSON file

I want to make a local HTML application read and update a JSON file and use its content to display HTML content. Alas, I'm stuck at the very first step, as I can't seem to setup any sort of test file that simply notices and reads a JSON file. From what I see online, I need to use other libraries. I attempted to use require.js but I can't make it work and the documentation doesn't help me.
I imported the require.js with a tag and attempt to launch something out of what I got from the documentation, but there's nothing to do. It doesn't look like it's willing to take .json files.
requirejs([
'example'
], function(example) {
const config = require('./config.json')
});
My issue is to get the program to read the file. From there I believe I can make the display of it, but this JS thing is all alien to me.
The recommended way would be to run a web server or use something like Electron and build a desktop app (as #chrisG points out in the comments). But if you wanna do this in the browser without an web server you could do something like:
Run Chrome with the --allow-file-access-from-files (or however you allow local file access in your browser of choice)
Put your JSON in a js file and load it (to just do this you don't need the flag, but if you want to use absolute path you'll need it)

Modifying viewer.js file

According to Mozilla's pdfjs plugin, I can view my pdfs by passing a query param to viewer.html as shown below:
http://localhost/MyProject/viewer.html/?file=file.pdf
This is working fine. But I have some different kind of requirement. The requirement in my project is that I need to have tabs like feature on a single page. Each tab holds a pdf file.
So, I am thinking to make all the code in the viewer.js to a big function. So that I can use it as constructor to render each pdf file. Something like this:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
Anyway, I decided to do the above changes later when I am able to integrate pdfjs's viewer functionality successfully in my project.
Summary of my project:
Single page application
All templates are being maintained in a single file within an Object of name - templates
To do so, first of all, I copied all the html inside of the body tag of viewer.html and appended as new property to the templates object. and then I copied all necessary and dependency files from the example to my project's folder and loaded them dynamically. The files which I included are:
pdf.js
pdf.worker.js
viewer.js
l10n.js
viewer.css - I am not loading this file dynamically.
After loading of files, I am rendering the viewer.html's template using lodash. Still, I can't able to see the rendered pdf in my project. I suspect this might be because everything is happening dynamically. (but I am not sure because everything is being rendered in sequence as it should be)
Btw, I have added the default pdf with name compressed.tracemonkey-pldi-09.pdf adjacent to index.html file. What could I be missing?
Firefox and chrome doesn't throw any error.
Note: I might be doing in wrong way. Suggesting me to solve in right directions would be appreciable.
Some important points while modifying viewer.js.
It is recommended to build your own viewer.js instead of modifying the available viewer.js file which is actually just for demo purpose.
You can create your own viewer.js file by visiting each js files available here.
If you have only small things to modify in the existing demo viewer.js, then
Mention the exact path for pdf.worker.js file inside your viewer.js.
This file will start rendering pdf on DomContentLoaded event. If you are planning to render the pdf file dynamically later, then you should comment this event register and call the following function whenever necessary.
webViewerLoad();
I hope this will help someone.

Use PhantomJS crowbar to extract D3-created SVG from webpage on local webserver

I'm trying to extract an SVG I created with D3 from a webpage. Because I'm using d3.csv to read in my data for the image I'm using a local web server. I've been experimenting with using Andrew Reagan's phantom-crowbar.js code (https://github.com/andyreagan/phantom-crowbar) and while that works great for extracting SVG from http:// pages and file:/// pages, when I try to extract from my page with address http://localhost:8000 then I receive the following message:
TypeError: null is not an object (evaluating 'svg.setAttribute')
phantomjs://webpage.evaluate():32
phantomjs://webpage.evaluate():55
Evaluated our code
"Evaluated our code" is the message you usually receive when the SVG has been successfully extracted but the output file is empty.
I'm new to JavaScript, PhantomJS and working in the browser with D3 so any help would be much appreciated. I really have no idea why the local server page should behave differently.
I ended up asking Andrew Reagan and he got back to me very quickly, the issue was that I was setting the SVG "id" attribute within a function in my script. Since I was using d3.csv() to read in a csv and generate my image everything was wrapped within this function. I set the "id" attribute outside of this using
d3.select("svg").attr("id", mysvg)
and now phantom-crowbar.js works no problem.
#Stephen I need to generate and save multiple D3 images so I needed a way to extract the SVG programmatically and Andrew's phantom-crowbar.js is the best approach I've tried if other people are looking to do something similar. SVG Crowbar bookmarklet is great if you need to do this only on occasion.

Using Components.utils.import in a firefox extension

I am trying to create some global variables in a firefox extension. In my content folder, I have two javascript files:
1) Main JS file that holds the functions for the different events, etc
2) A file that stores only an object with the pieces of state I want to maintain. Also, I set the array EXPORTED_SYMBOLS.
I am having issues with the following line found in my main JS file:
Components.utils.import("resource:///globalVariables.js");
When it is at the top of the file, nothing seems to work. If I move it into the function where I need the variable, the rest of my code works, but the function with this line does nothing. Any advice that would help me with this problem would be great. Thanks
Chances are resource:///globalVariables.js is not the right URI. Make sure you register it properly, and include the aliasname when you reference it.

Categories