Restart: seeking free JavaScript download for charting (pie, bar, line, etc)

In My Humble Opinion
1

In this thread I sought help with a specific javascript external reference problem. I’m thinking it might be more useful to kick the conversation into the larger context. I don’t need that particular javascript, I just want one, from somewhere, or else a tutorial in how to write my own from the ground up.

IMPORTANT BACKGROUND INFO: 99.9999% of the time when people want to deploy javascript, the eventual location of the code is going to be one or more plain text files which get served up by a web server somewhere as web pages: .html files, occasionally .php files, etc. That is not the case here. No actual web browser or web server may ever be involved here, I have a completely different environment that can execute HTML and Javascript and other code that would normally be on a web page: an object called a web viewer in FileMaker Pro. One important aspect of this deployment is that dependencies (on other source files) is a big problem; I need a solution that I can FLATTEN so that it runs all from a single file (or in my case the equivalent of a single file), or else can reference any external sources NOT from a file-system file path (which will not be available to me as an option) but instead from an internet URL file path (e.g., http://someserver/folder/file.ext). The latter, I can do.
I want to be able to make various charts and whatnot using Javascript in a web viewer as an alternative to other graphing techniques that are at my disposal within FileMaker.

I’m a Javascript newbie and am making my way through Javascript: The Missing Manual and Javascript In Easy Steps but in both books the tutorials and examples from mid-book onwards head off in a direction that isn’t of use to me (I’m not trying to design a web site, I’ll be using JavaScript to design little doodads of various sorts embedded on a “page” that already exists and which is outside of the doman of the javascript and which is not written in HTML at all).

I don’t mind being told “You’re asking for advanced techniques you are not ready for”, but I could use a “start with this, then master this, then you’ll be ready for this which will teach you how to make Javascript do dynamic charting” sort of pointer. On the other hand, I could learn a lot from (comparatively simple) code that I could examine and cannibalize. That’s what I was hoping for with the JS-Charts, but it doesn’t look like I can use that due to being unable to unbolt the dependency on an external file.

2

I guess I don’t understand this FileMaker web viewer architecture, or perhaps your wording, because these two statements seem contradictory to me.

3

a) FileMaker Pro is a multi-user networked database architecture. Although it can be deployed with web-based clients, it doesn’t have to be, and the more full-bodied / robust deployment is where the individual users open a hosted database using FileMaker Pro, not a web browser.

b) A given database can have a layout that has a web viewer on it. There are two main ways of coding a web viewer: as a standard URL which reconciles to something that would typically appear in your web browser’s address bar (which, in turn, might be something simple like “http://www.google.com”, or might send along some data variables as is the case with a Google Maps url like this link; either way, what the web viewer renders when you do it that way is generally going to be code located ELSEWHERE, on some web server somewhere. The OTHER way is to code it as a “data URL”, which is also something you can do in a standard web browser (although you’d seldom have reason to do so): copy the following line and PASTE it into the address bar of your web browser and hit enter — this is a very simple data URL:

data:text/html, <html><head></head> <body> hello world </body> </html>

OK, that web page that you end up looking at is rendering code that exists nowhere other than in your web viewer; it is NOT rendering code that is located on some web server somewhere. Now imagine that instead of that short little snippet you had pasted in enough code to make your web browser render something complicated, full of CSS and Javascript and whatnot, and that what it actually did was generate pie charts based on javascript arrays of text values and their accompanying numerical values.

c) FileMaker’s web viewer can have its definition of its URL be a hardwired bit of text such as “http://www.google.com” or “data:text/html, <html><head></head> <body> hello world </body> </html>”, but it can also be a formula that RESULTS IN such a string, a formula that references field values. Thus, something like this:

“Google” & YourTable::Search String Text Field & “&btnG=Google+Search”

where if you type “hello world” into the field named Search String Text Field your web viewer reconciles to this URL:

http://www.google.com/search?hl=en&safe=off&q=hello+worldx&btnG=Search

At this point I assume you can see how useful it will be to be able to get my hands on enough Javascript to make the web viewer do charting based on values that are in FileMaker fields, using a data URL.
d) Back to the logistics of FileMaker. The database itself will reside on a host computer. The web viewer’s web URL, on the other hand, is parsed by and interpreted by the local user’s standard/default web browser (Safari on MacOS, Internet Explorer on Windows*****); and any external references are interpreted from the standpoint of the local user, not the standpoit of the machine hosting the database. Thus, while IF you happen to be using my computer and there is a file on my Desktop that is named “Sample.txt”, a web viewer with this URL would open that file: “file:///Users/AHunter3/Desktop/Sample.txt”; but if there is a file located on the FileMaker Server computer at (let’s say) /Library/FileMaker Server/Data/External Javascript Files/JS_Charts_demo/sources/jscharts.js, then from where you are sitting (at my computer, or for that matter at your own, or any other computer that can open this database) that path is nonsense, it can’t be reconciled from where you are sitting. Hence a reference embedded in the data URL of a web viewer, that says “yo, dude, there’s a bunch of external javascript in that jscharts file over yonder” simply isn’t going to work. It would work if FileMaker SERVER were doing the parsing and interpretion, but it isn’t. And, I should add, you (and I and other users) are not accessing the hosted FileMaker database at a file-level path such as \Server\Folder\FileMaker Database.fp7; instead FileMaker uses its own networking protocol and no portion of the file and folder structure of the FileMaker Server box can be seen by any other computer on the network.

e) However, a file that can be referenced from your location, my location, and anyone else’s location via a truly universal resource locator (URL) could be used. Thus, while " /Library/FileMaker Server/Data/External Javascript Files/JS_Charts_demo/sources/jscharts.js" cannot be referenced, “http://server.domain.com/Data/External%20Javascript%20Files/JS_Charts_demo/sources/jscharts.js” COULD be. Your local workstation could reconcile THAT kind of external file reference. Just not the other kind.

***** I should add that you, as the end user, do not perceive Safari or Internet Explorer to even be running; FileMaker simply (with your operating system’s permission) uses the rendering engine of the relevant web browser; the rendered result still appears to be in FileMaker, on the FileMaker screen. No actual web browser is involved except as a behind-the-scenes source of rendering technology.

4

I wonder if you could use a Flash-based chart-drawing package like Fusion Charts. Normally, you pass the Flash object a URL to an XML file containing the data to plot. A data: URL with XML in it might work. I guess this is dependent on the Flash player being able to deal with data: URLs; I’ve never tried it. You’d have to host the Flash SWF files somewhere, though.

BTW, do FileMaker web viewers support file:// URLs? If so, you could put your static files on a local filesystem or internal network share, or something like that.

5

I could use a file URL… but only if there were no WAN users who had no accessible file servers in common with the other users, etc.

I don’t know diddly about Flash. Can the “flash object” be at some http’ish location as opposed to “next to me in the same folder”? (Otherwise the same kind of problem as with the javascript external jsfile is going to derail it).

I already have some other options: Google Charts (the API for which works quite nicely with FileMaker), the built-in (as of FileMaker 11) native charting capacities of FileMaker itself… but I wanted to see what-all I could do with javascript charting.

ETA: Learning how to do it in Flash would be cool but won’t take away my desire to figure out how to do it in Javascript. I’m totally in “learn new techniques” mode at the moment :slight_smile:

6

Yes, the Flash object (just a .swf file) can be hosted on a HTTP server anywhere, and your web viewer can reference it at that location.

7

Well, seeing as how you spent the time to type up that response, the least I can do is to come back to the thread.

Well, it has to come from somewhere – is all the javascript/html code stuffed into some FileMaker code somewhere?

Frankly, this sounds to me like FileMaker is being used in a brute force manner to act as a webserver, yet lacks much of the capability of one.

So why don’t you just do it this way? Have the javascript library hosted on a proper webserver somewhere in your network. Users can still use the FileMaker database but when it comes time to do the charting stuff, FileMaker simply takes the inputs from the user (some kind of form?), then says, here is your result that you can look at in the web viewer —> “http://internalserver/chartstuff.html?&lt;parameters collected by FileMaker>”

Maybe I’m still not getting it. But right now, your explanation in point d) is telling me that the way FileMaker serves up web pages makes it very difficult to take existing web application/code and use them in a FileMaker context, without massive rewriting/hacking. If you have an application that provides a service as web pages, in your case a charting app, let a webserver handle that part, and have FileMaker just act as a bridge. Because it doesn’t seem like it can act as a webserver properly.

8

It doesn’t HAVE TO be, but that’s what I’m intending to do with it here.

What you are seeing as limitations of how FileMaker “does web” are limitations imposed by my own wishes, that the code be self-contained. Most (not all, but most) of what you can do with a web browser and a .html page hosted out yonder at http://myserver.com which happens to have lots of JavaScript in it can be done with FileMaker (using its web viewer) and aiming that web viewer at the same .html page. (The main limitation is that it can’t “open a new window”, which some secure-connection techniques like to do).

Why would I want to put the code inside of FileMaker instead of just hosting the relevant .html page (with or wihtout external jsfile located also on myserver.com)? I’m not sure I necessarily would, although it would have a couple of advantages I suppose. I’m trying to learn & deploy some new tricks, as opposed to trying to solve a specific problem or address a specific need.

The example I downloaded (JS Charts), if left OTHERWISE UNTOUCHED, and opened in a plain-vanilla web browser (leaving FileMaker out of it for the moment), stops working if I change the referenced location of the jsfile from …/…/sources/jscharts.js to http://myserver.com/sources/jscharts.js and then upload the file jscharts.js to that folder on my web server.

Weird, huh?

9

Having all the html/css/javascript embedded into a FM module might seem neater from your (read: FM coder’s) perspective, but in today’s world of Service Oriented Architectures, doing so can be considered counterproductive in many ways and contrary to the goals of SOA architecture.

Fair enough, but in this particular instance, I think at best you will succeed in putting together a hacked up gimmick, IMO, rather than something that would have a lot of real world applicability. In other words, what’s the point of learning how to “use” javascript if you are using it in a way that almost no one else on the planet ever would? I realize this is a bit of a pedantic hijack and not what you are asking, but I couldn’t help mentioning it.

Side question: using the data url method, what happens to image references. e.g., something as simple as <img src=“/images/logo.gif”/> ? Do those work? From your previous explanation it would seem that they don’t.

If you show us the source of your .html that tries to reference the library on a remote server, maybe we can figure out why it doesn’t work.

10

I snagged it as a free download from here:

http://www.jscharts.com/

ETA: that copy does NOT attempt to reference the jscharts.js file on a remote server, sorry. The specific file I edited to try to do that is /examples/pie-charts/example-1/index.html; it is pretty obvious where it says

in the document head; and I just selected that and replaced it with

where I uploaded it; made no OTHER changes, saved copy of index file, doesn’t work, original works.

11

Here’s a bit of additional explanation for why I might want to have the code entirely ensconced within FileMaker:

visualize a Javascript-powered graph. The data being graphed consists of 3 models of greasey widget, 4 models of wonky grommet, and 3 models of thingamajigger, sales rates per week for the timeframe starting January 1, 2010.

imagine that there are some mouse-responsive control buttons that let you toggle between options:

•Show data as widgets / grommets / thingamajigger versus break it down by 11 models

• Show sales rates by month versus show sales rates by week
To cannibalize & deply the JS-Charts as is (i.e., aim my FileMaker web viewer at an external .html file which in turn references an external jsfile), I would have to redo the .html file as a .php file and trap for values encoded in the URL, and the URL would have to include a rather imposing morass of values linked with ampersands, some of which would have to be split up and parsed (“widget|model12”). Certainly it’s doable (such is the logic behind Google Charts, and also works well with Google Maps), but it’s klunky.

If I could get my hands on the JavaScript necessary to render the charts (all in one piece, not split across multiple files), though, the very JavaScript in the web viewer definition would already contain the references to the FileMaker values and not have to be trapped & split up and parsed out on the “other end”; I could define one Javascript variable as an array of label values and one as an array of sales figures and then in an if statement whose params get switched by the buttons set yet other variables as either this subset or that subset; the distance between the raw data and the graph is therefore shortened and made more convenient.

I could ALSO (or INSTEAD) put buttons OUTSIDE the web viewer that when clicked (in the surrounding FileMaker environment) change the calculated code that generates the JavaScript; thus at the click of a button the array of labels switches from being only a list of broad categories (widgets, grommets, thingamajigs) to being only a list of models and likewise for the aggregate sales figures.

12

Well, it worked fine for me, referencing your earthlink account for the script source. Just to make sure we’re on the same page, I opened the file locally in my browser as

file:///C:/Users/Administrator/Desktop/jscharts/examples/pie-charts/example-1/index.html

and here is the html source of that file:



<html>
<head>

<title>JSChart</title>

<script type="text/javascript" src="http://home.earthlink.net/~ah3files/Stuff/jscharts.js"></script>

</head>
<body>

<div id="graph">Loading graph...</div>

<script type="text/javascript">
	var myData = new Array(['Communicate socially', 42], ['Engage in work for classes', 38], ['Be entertained', 10], ['Communicate professionally', 7], ['Not sure/Don\'t know', 2]);
	var colors = ['#C40000', '#750303', '#F9ECA2', '#FA9000', '#FA5400'];
	var myChart = new JSChart('graph', 'pie');
	myChart.setDataArray(myData);
	myChart.colorizePie(colors);
	myChart.setTitle('Students use the Internet most often to (%)');
	myChart.setTitleColor('#8E8E8E');
	myChart.setTitleFontSize(11);
	myChart.setTextPaddingTop(30);
	myChart.setSize(616, 321);
	myChart.setPiePosition(308, 170);
	myChart.setPieRadius(85);
	myChart.setPieUnitsColor('#555');
	myChart.setBackgroundImage('chart_bg.jpg');
	myChart.draw();
</script>

</body>
</html>
13

If you take a little time to do this work once, and you design an elegant calling interface for it, you’ve created a tool that can be used by any other application in your organization. See the Bridge design pattern (or is it the Adapter? I’m actually not sure of the exact difference). Those patterns mainly refer to OO programming but I think the concept still applies.

Eh. I see what you’re saying, and in the short term I can see how it would simplify your FM coding. But munging up the existing libraries all into one file and hacking it to get it to work probably would be a fair amount of effort in itself. There are just so many things in html that rely on being able to make remote references (I’m still wondering about the img tag question I asked earlier). What if you decide you want to incorporate yet another library into your page? Stuff the code for that in there too?

Also, let’s say you do get it to work that way – what happens when the library authors come up with an upgrade? Maybe they discovered their code creates an XSS vulnerability and they’ve updated their code to close the hole? You have to do the work all over again to use their new version.

14

I don’t (yet) know what you did differently but yes, the code you posted works for me also.

(NICE!)

Now I’m going to spend some time looking at my failed attempts to see why that didn’t work for me when I did it.

Me & HTML are not a good combo, I’m afraid :frowning:

15

I would check out the forums at JavaScript Kit and Dynamic Drive

They will give you all the help and advice you will need :slight_smile:

16

Well, I’ve got it working in FileMaker… took various folks’ advice and kept the original jsfile code up in my website space, and ended up keeping the piechart javascript file external to FileMaker as well; I invaded it with lots of php to snag GET parameters out of the URL and parse them and use them in the javascript. So now I can use database records to populate the labels and quantities in the pie chart, and it also sends chart title and the colors to use, all encoded in the URL and strung together with ampersands.