Author Topic: Javascript charts and Graphs  (Read 15661 times)

0 Members and 1 Guest are viewing this topic.

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Javascript charts and Graphs
« on: October 03, 2007, 04:01:30 PM »
Has anyone tried to implement any kind of javascripting to dynamically produce pie charts and graphs? I'm really wanting to do this using my databse fields and numbers.

Thanks,
Aaron
« Last Edit: October 03, 2007, 05:06:39 PM by ADalby »
Uniting Bands
www.unitingbands.com

Offline Jason

  • Administrator
  • Hero Member
  • *****
  • Posts: 1018
    • slipdex
Re: Javascript charts and Graphs
« Reply #1 on: October 03, 2007, 06:32:13 PM »
Founder of www.slipdex.com

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #2 on: October 04, 2007, 07:23:53 AM »
Thanks Jason! This is what I found which is pretty cool but I can't find any javascript doing Pie charts which I want to use. I don't know if thats even possible...


http://www.gerd-tentler.de/tools/

Uniting Bands
www.unitingbands.com

Offline Paul

  • Hero Member
  • *****
  • Posts: 162
Re: Javascript charts and Graphs
« Reply #3 on: October 04, 2007, 05:28:17 PM »
I've used these before Aaron.
http://www.lutanho.net/diagram/index.html

http://www.howtocreate.co.uk/tutorials/jsexamples/multigraphExample.html

The second site is probably the better.

There are some useful pie graph ajax examples here
http://miniajax.com/


Plotkit is probably the best that I've used for pie graphs, although for some reason they don't print well
http://www.liquidx.net/plotkit/

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #4 on: October 04, 2007, 09:23:19 PM »
Hey Paul that last one looks great! I have yet to get it to work but looks like exactly what I'm wanting! I may hae some questions for you down the road.

Thanks for all the suggestions!
Uniting Bands
www.unitingbands.com

Offline Paul

  • Hero Member
  • *****
  • Posts: 162
Re: Javascript charts and Graphs
« Reply #5 on: October 04, 2007, 11:34:31 PM »
No problem Aaron.

To save you some time with Plotkit, I've pasted some of the important template stuff below.

This example makes a pie chart showing grades A to E


Hope you find it helpful.

Paul


Code: [Select]
<script type="text/javascript" src="javascripts/mochikit/MochiKit.js"></script>
<script type="text/javascript" src="javascripts/plotkit/Base.js"></script>
<script type="text/javascript" src="javascripts/plotkit/Layout.js"></script>
<script type="text/javascript" src="javascripts/plotkit/excanvas.js"></script>
<script type="text/javascript" src="javascripts/plotkit/Canvas.js"></script>
<script type="text/javascript" src="javascripts/plotkit/SweetCanvas.js"></script>
</HEAD>


<template>

<!--extra javascript stuff to create unique variable names -->

<SCRIPT type=text/javascript>
<!--

var e[[ID]] = [[field1]];


var d[[ID]] = [[field2]];



var c[[ID]] = [[field3]];


var b[[ID]] = [[field4]];


var a[[ID]] = [[field5]];
// -->
</script>


<div><canvas id="graph[[ID]]" height="300" width="500"></canvas></div>
<script type="text/javascript">

function drawGraph() {


    var xTicks = [{label: "A", v: 0}, {label: "B", v: 1},
                      {label: "C", v: 2}, {label: "D", v: 3},
                      {label: "E", v: 4}];


    var layout = new Layout("pie", {"xTicks": xTicks} );
 
    layout.addDataset("sqrt", [[0, a[[ID]] ], [1, b[[ID]] ], [2, c[[ID]] ], [3, d[[ID]] ], [4, e[[ID]] ]]);
    layout.evaluate();
    var canvas = MochiKit.DOM.getElement("graph[[ID]]");
    var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
    plotter.render();
}
MochiKit.DOM.addLoadEvent(drawGraph);
</script>

</template>

« Last Edit: October 05, 2007, 07:22:44 PM by Paul »

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #6 on: October 05, 2007, 05:59:57 AM »
Thanks Paul this will help so much! I will give this a try today.

How do you dynamically fill in the numbers into your graphsa?
Is the [[field1]] ect... your fields that have numbers that make up the chart?
Uniting Bands
www.unitingbands.com

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #7 on: October 05, 2007, 08:17:52 AM »
Not having much luck getting these to work. Is there any other files that I need besides the ones you showed in your example above in the <head> section?
Uniting Bands
www.unitingbands.com

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #8 on: October 05, 2007, 02:37:24 PM »
Hey Paul I'm looking at your source code and don't understand these lines. ex:

var e101014 = 0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+1+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+1+0;

What is this?
Uniting Bands
www.unitingbands.com

Offline Paul

  • Hero Member
  • *****
  • Posts: 162
Re: Javascript charts and Graphs
« Reply #9 on: October 05, 2007, 03:59:03 PM »
In the grade example, I have to add up percentage fields to get the total number of students for each grade

e.g.
var d[[ID]] = [[45]]+[[46]]+[[47]]+[[48]]+[[49]]+[[50]]+[[51]]+[[52]]+[[53]]+[[54]]+[[55]]+[[56]]+[[57]]+[[58]]+[[59]];


Grade D Students: Percentage Fields 45 - 59%

You probably don't have to worry about that i.e.

var aaron_variable1[[ID]] = [[aaron_field1]];
« Last Edit: October 05, 2007, 04:01:10 PM by Paul »

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #10 on: October 05, 2007, 06:02:13 PM »
Thanks Paul. I still have a javascript error problem and I'm not sure if its my windows server or not. I wouldn't think these javascripts would work any differently but here is what happens.

I copied your code to my server and I'm using your js scripts on your server and it works fine.

I downloaded your actual scripts and uploded them into the same folder structure on my server as yours and now I get an error.

Nothing has changed in my html file just that its getting the js scripts from my server.

Any ideas on this one, this is very frustrating why it won't work on my server...

Here is my test url:
***EDIT
« Last Edit: October 07, 2007, 04:59:13 PM by ADalby »
Uniting Bands
www.unitingbands.com

Offline Paul

  • Hero Member
  • *****
  • Posts: 162
Re: Javascript charts and Graphs
« Reply #11 on: October 05, 2007, 07:17:26 PM »
Not sure why Aaron.

Why dont we just get rid of the javascript & make it simpler?

(I only used it to add up student numbers)

Code: [Select]
<script type="text/javascript" src="javascripts/mochikit/MochiKit.js"></script>
<script type="text/javascript" src="javascripts/plotkit/Base.js"></script>
<script type="text/javascript" src="javascripts/plotkit/Layout.js"></script>
<script type="text/javascript" src="javascripts/plotkit/excanvas.js"></script>
<script type="text/javascript" src="javascripts/plotkit/Canvas.js"></script>
<script type="text/javascript" src="javascripts/plotkit/SweetCanvas.js"></script>
</HEAD>


<template>

<div><canvas id="graph[[ID]]" height="300" width="500"></canvas></div>
<script type="text/javascript">

function drawGraph() {


    var xTicks = [{label: "A", v: 0}, {label: "B", v: 1},
                      {label: "C", v: 2}, {label: "D", v: 3},
                      {label: "E", v: 4}];


    var layout = new Layout("pie", {"xTicks": xTicks} );
 
    layout.addDataset("sqrt", [[0, [[field1]] ], [1, [[field2]] ], [2, [[field3]] ], [3, [[field4]] ], [4, [[field5]] ]]);
    layout.evaluate();
    var canvas = MochiKit.DOM.getElement("graph[[ID]]");
    var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
    plotter.render();
}
MochiKit.DOM.addLoadEvent(drawGraph);
</script>

</template>


Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #12 on: October 05, 2007, 08:03:30 PM »
Again thanks for the help paul. I have tried this with no luck. I have 2 pages.

Page 1. My scripts on my server- does not work
***EDIT

page 2. same EXACT page but using your scripts on your server - WORKS
***EDIT

Did you have to modify any scripts first? Do the scripts have to be installed a certain way.

I've never had this kind of problem before...
« Last Edit: October 07, 2007, 04:59:55 PM by ADalby »
Uniting Bands
www.unitingbands.com

Offline Paul

  • Hero Member
  • *****
  • Posts: 162
Re: Javascript charts and Graphs
« Reply #13 on: October 05, 2007, 08:20:10 PM »
Nice test-strange isn't it.

Try using the full url to the javascripts Aaron.

Also, ftp them in ascii mode.

Also, when you downloaded them, save them as a file directly (i.e. do not open them and "save as")

I don't recall having to modify the scripts...

Offline ADalby

  • Moderator
  • Hero Member
  • *****
  • Posts: 241
    • Uniting Bands - Where Talents Unite! - Music Promotion, Musician Classifieds
Re: Javascript charts and Graphs
« Reply #14 on: October 05, 2007, 09:25:49 PM »
I have done all that already with no luck. I've been around awhile and have ran into many things but this I have never experienced before. Not sure what the issue is...

Let me know if you have any other ideas.

Thanks for all the help!
Aaron
« Last Edit: October 05, 2007, 09:29:20 PM by ADalby »
Uniting Bands
www.unitingbands.com