Page 1 of 1

Embedded javascript web objects

PostPosted: Sun Dec 27, 2015 12:04 pm
by DaveJ
I have come across a JavaScript object by D3 that produces excellent dynamic graphs to run in web browsers.http://bl.ocks.org/mbostock/1256572
I'm sure I must be doing something wrong. I can make it work as a local file but the Neobook browser object just shows a blank screen. I have created a folder with the relevant files that can be found here https://www.jarrard.co.uk:5001/fbsharing/jZKYTXmq

I thought this would be a great way of showing database results if it will work.
Am I barking up the wrong tree?

Thanks

Dave J

Re: Embedded javascript web objects

PostPosted: Sun Dec 27, 2015 2:07 pm
by Neosoft Support
The test HTML file doesn't work in Chrome either. I get the following error in developer mode (F12):

XMLHttpRequest cannot load file:///C:/Users/.../data.tsv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.


I'm not sure why loading something from the local disk is considered a "cross origin" request. Maybe the people who wrote the library will have a suggestion on how to make it work from a local drive?

Re: Embedded javascript web objects

PostPosted: Sun Dec 27, 2015 5:42 pm
by virger
Seguro este link te ayudara https://github.com/shawnbot/aight
Ya que el 'd3.v3.min.js' no es compatible con IE, por eso no se visualiza en NeoBook.
Yo lo resolvi usando XP, IE8 y 'd3.ie8.js'
Code: Select all
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--[if IE 8]><script src="d3.ie8.js"></script><![endif]-->


Esta tambien para IE 9 '<!--[if lte IE 9]><script src="aight.js"></script><![endif]-->'
por si te interesa.


This link will help insurance [url] https://github.com/shawnbot/aight [/ url]
Since the 'd3.v3.min.js' is not compatible with IE, so it is not displayed in NeoBook.
I solved it using XP, IE8 and 'd3.ie8.js'
[code]
<script src = "http://d3js.org/d3.v3.min.js"> </ script>
<! - [if IE 8]> <script src = "d3.ie8.js"> </ script> <! [endif] ->
[/ code]

IE 9 is also for '<! - [If lte IE 9]> <script src = "aight.js"> </ script> <[endif] ->'
if you're interested.

Re: Embedded javascript web objects

PostPosted: Mon Dec 28, 2015 6:41 am
by DaveJ
Thanks Dave/Virger,
I have done some research on the error
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Which I believe is a security restriction to stop http/javascript requests looking into the local file system. I would have been OK if I wasn't trying to read the 'data.tsv' file and it had been on a web server, Firefox doesn't seem to care if they are in the same directory.

I tried your solution Virger using the following code ;
Code: Select all
<script src="d3.min.js"></script>
<!--[if IE 8]><script src="d3.ie8.js"></script><![endif]-->
<!--[If lte IE 9]> <script src="aight.js"></script><![endif]-->

I have locally saved the aight.js, d3.ie8.js and d3.min.js files but am still struggling to get it to work in Neobook. This may still be down to the security of file and http: requests. I will see if the data can be stored directly in the JavaScript file and then I might be able to get around the issue but my knowledge of JavaScript is limited.
Virger, did you have to use an XP machine?
I will post again if I can find the solution.

Re: Embedded javascript web objects

PostPosted: Mon Dec 28, 2015 8:31 am
by Tony Kroos
This script is designed to work with internet environment. It is fetching and exchanging data using XmlHttpRequests, which will cause a lot of security issues with local environment. It won't work with IE default setup (especially latest versions on latest OS'es), forget it. You may still struggle with IE by lowering security levels, etc... but I guess it's not worth it.

Re: Embedded javascript web objects

PostPosted: Mon Dec 28, 2015 9:37 am
by DaveJ
Hi Tony,
Are you referring to the D3 JavaScript or the particular example I was using?
Thanks

Re: Embedded javascript web objects

PostPosted: Mon Dec 28, 2015 11:02 am
by Gaev
DaveJ:

In the page linked by you (http://bl.ocks.org/mbostock/1256572), the csv file is read by this function d3.csv("stocks.csv", function(data) ... which (if you look at the unminified) http://d3js.org/d3.v3.js ... invokes d3.dsv like this ...

d3.csv = d3.dsv(",", "text/csv");

... which in turn calls function d3_xhr(url, mimeType, response, callback) ... which ends up making an XMLHttpRequest() call ... as the name suggests, it is an http request ... when you try to read a file on your C: drive, the protocol is file (not http).

So you have two options ...

1) replace the d3.csv("stocks.csv", function(data) {etc. etc.} with a new function (e.g. d3.inlineCSV(yourDataObject)) which returns data in the same format as d3.csv

2) another approach (at least for simple charts) would be to use something like Rickshaw (which is layered on top of the d3js stuff) ... there are examples here ... http://code.shutterstock.com/rickshaw/

With either option, you will still not be able to load data from a file on your C: drive (for security reasons, modern Browser don't allow that) ... you have to ...

a) either include the data object inside the HTML file (use BrowserLoadFromStr after you add the data to an HTML template file/variable with NeoBook scripting).

b) or inject this information after loading an HTML file (using BrowserExecScript ... where you have the named javascript function to create the desired data within the HTML file previously loaded in the WebBrowser object.

Re: Embedded javascript web objects

PostPosted: Mon Dec 28, 2015 11:17 am
by DaveJ
Hi Gaev, That was exactly what I was hoping. If I dynamically write the HTML to contain my data it gets around the security issue.
The Rickshaw approach will be the one I will attempt to use as the tutorial is very in depth.

Thanks for the help.

Re: Embedded javascript web objects

PostPosted: Mon Dec 28, 2015 12:04 pm
by virger
Revisando el tema he encontrado esto, me parece PURA VIDA.
Se pueden meter datos directamente desde NeoBook, o bien leer un "txt"
que contenga la data, usando 'js'.


Reviewing the issue I found this, I think 'PURE LIFE'.
You can get data directly from NeoBook or read a "txt"
containing the data, using 'js'.

https://code.google.com/p/flot/downloads/detail?name=flot-0.7.zip&can=2&q=

Re: Embedded javascript web objects

PostPosted: Tue Dec 29, 2015 10:31 am
by DaveJ
Thanks Virger,
This looks like it will be even simpler to implement.