Javascript Toolkit Comparison

Javascript Toolkit Comparison - Archived Portal Exploration - JA-SIG Wiki

With the increased demand of "WEB 2.0" features such as drag 'n drop, AJAX, and client-side processing, the need for a robust javascript library in uPortal 3 becomes more and more obvious. These pages are dedicated to discussion around the many available javascript libraries*. I will focus mainly on the 6 with the most hype currently: Prototype, Dojo, Mochikit, Yahoo! UI, Google, and JQuery. Feel free to add any others which might be worth considering. For a good article reviewing some of these libraries, visit sitepoint.com.

	Prototype	Dojo	Mochikit	Yahoo!	Google	JQuery
Simple AJAX
Drag n Drop
Basic Visual Effects
Advanced Visual FX
Java integration
Event handling
Back button support with Ajax
Developer tools
Rated Features (0-4 stars)
Minimal Learning Curve
Ease of use (API)
Widget Collection (useful or not)
Documentation
Developer Community
Refined UI effect examples
Filesize Range (KB)	46-137	18-276	5-113	2-300		10-44
Licensing	MIT	AFL / BSD	MIT/AFL	BSD	Apache **	MIT
Demos	http://script.aculo.us	http://www.dojotoolkit.org/	http://www.mochikit.com/demos.html	http://developer.yahoo.com/yui/	GWT	http://www.jquery.com/demos
More Info	Prototype JS Library	Dojo JS Toolkit	Mochikit JS Toolkit	Yahoo UI Library	Google Web Toolkit	JQuery JS Library

Other JS libraries not evaluated here:

• Zimbra Ajax TK (Kabuki)
• DWR

* I will assume that the terms library, toolkit, and framework are inter-changeable. This may merit its own discussion page, just not here.
** Google offers its Java libraries under Apache license, but its Java to Javascript converter is proprietary.

Children Hide Children | View in hierarchy

Dojo JS Toolkit (Archived Portal Exploration)
Google Web Toolkit (Archived Portal Exploration)
JQuery JS Library (Archived Portal Exploration)
Mochikit JS Toolkit (Archived Portal Exploration)
Prototype JS Library (Archived Portal Exploration)
Yahoo UI Library (Archived Portal Exploration)

Chart in DHTML

Web Development, JavaScripts for Download provides WZGrapher Function Graphing and Math Program and JavaScript Vectorgraphics Library to plot chart/graphics.

here list 10 Free CSS Graph Resources

http://dhtmlsite.com/cssgraphs.php

Balamurugan S 's bar graph/pie chart/line chart/multi-line chart javascript library.

http://www.sbmkpm.com/
Bar Graph
pie chart
line chart
multi-line chart

PlotKit - Javascript Chart Plotting is a Javascript graph plotting library. It is aimed at web applications that require plotting series of data in modern web browsers.
PlotKit requires MochiKit. (1.3 or higher)

AjaxMGraph

JavaScript Diagram Builder

OpenLaszlo - the premier open-source platform for rich internet applications.


Graphs and Charts : A collection of JavaScript graph and chart scripts list four possible solution.
CodeThatGrid is an advanced JavaScript grid looking like Microsoft Excel grid that enables a user to display in efficient and fancy way the massifes of data from variety of sources including the CVS and database.

Compare-the-Graphs is an all JavaScript/DHTML, all-open-Web-standards, cross-browser, 500-pixel by 500-pixel 2-variable function grapher. It features completely adjustible axes and up to 12 simultaneous, re-stackable, in-color function plots.

The JavaScript Diagram Builder is a library of some objects and functions, which helps you to display and dynamically modify coordinate diagrams (resp. charts/graphs) in webpages.

XYGraph was created to generate intelligent plots of output data without the need for extensive user input. Take a look at the demo page to see just how useful and proffesional the results are. The script generates an XY Graph using Vector Markup Language (VML) and returns an html string for display via javascript.

javascript +vml -> pie chart /bar chart

這裡

useful links for VML

Here is the official web page for VML from microsoft.

http://msdn2.microsoft.com/en-us/library/bb264280.aspx

Here is the proposal of vml that Microsft submits to W3C, but not accepted.
http://www.w3.org/TR/1998/NOTE-VML-19980513

Here is a interesting example of VML
http://vbnet.aspweb.cz/msie/vml.htm

Another example from codeproject
http://www.codeproject.com/html/vml101.asp

useful links for SVG

There are good example in W3C School

http://www.w3schools.com/svg/svg_examples.asp
http://www.w3schools.com/svg/svg_reference.asp

Here is the W3C SVG standard
http://www.w3.org/Graphics/SVG/

Interesting SVG samples
http://www.carto.net/papers/svg/samples/

http://www.croczilla.com/svg/samples/

http://www.adobe.com/svg/demos/samples.html


http://www.zuccaralloo.de/devgroup/content.php?m=samples

VML

http://msdn2.microsoft.com/en-us/library/bb264280.aspx

try something about vml, and show it over screen.

e.g.

<html>
<head>
<script language=javascript>
function myInit() {
var div = document.getElementById('test');

// for ie only
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
document.createStyleSheet().addRule("v\\:*", "behavior:url(#default#VML)");

var oval = document.createElement('v:oval');
oval.style.width = "0.5in";
oval.style.height = "0.5in";
oval.style.left = "4.62in";
oval.style.top = "9.2in";
oval.fillcolor = "yellow";
div.appendChild(oval);

var rect = document.createElement('v:rect');
rect.style.width = "0.5in";
rect.style.height = "0.5in";
rect.style.left = "4.62in";
rect.style.top = "9.2in";
rect.fillcolor = "blue";
div.appendChild(rect);

var polyline = document.createElement('v:polyline');
polyline.style.position = "absolute";
polyline.style.top = "100";
polyline.points = "0 30,100 19,200 50,300 20,400 22,500 5,600 100,700 80,800 6,900 1";
polyline.filled = 0;
div.appendChild(polyline);

polyline = document.createElement('v:polyline');
polyline.style.position = "absolute";
polyline.style.top = "300";
polyline.points = "0 30,100 19,200 50,300 20,400 22,500 5,600 100,700 80,800 6,900 1";
polyline.filled = 0;
div.appendChild(polyline);
}
</script>
</head>
<body onload="myInit();">
<div id=test style='width:500;height:500;overflow:auto'></div>
</body>
</html>

svg

try something about svg.

I think the key is the document.createElementNS(). it is useful to create svg object in a quirk mode web page.

e.g.
<html>
<head>

<script language=javascript>
var cx = 40, cy = 40;
function doit() {
cx += 20;
cy += 20;
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
}
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
var node = document.createElementNS(svgns, "defs");
svg.setAttribute("width", 500);
svg.setAttribute("height", 500);
svg.appendChild(node);

var cir = document.createElementNS(svgns, "circle");
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
cir.setAttribute("r", 40);
cir.setAttribute("fill", "rgb(9,169,176)");
cir.setAttribute("fill-opacity", 0.49);
cir.setAttribute("stroke", "rgb(93,10,42)");
cir.setAttribute("stroke-opacity", 0.5);
cir.setAttribute("stroke-width", 2);
svg.appendChild(cir);

var g1 = document.createElementNS(svgns, "g");

var rect1 = document.createElementNS(svgns, "rect");
rect1.setAttribute("x", 80);
rect1.setAttribute("y", 60);
rect1.setAttribute("width", 250);
rect1.setAttribute("height", 250);
rect1.setAttribute("rx", 20);
rect1.setAttribute("fill", "#ff0000");
rect1.setAttribute("stroke", "#000000");
rect1.setAttribute("stroke-width", "2px");
g1.appendChild(rect1);

var rect2 = document.createElementNS(svgns, "rect");
rect2.setAttribute("x", 140);
rect2.setAttribute("y", 120);
rect2.setAttribute("width", 250);
rect2.setAttribute("height", 250);
rect2.setAttribute("rx", 40);
rect2.setAttribute("fill", "#0000ff");
rect2.setAttribute("stroke", "#000000");
rect2.setAttribute("stroke-width", "2px");
rect2.setAttribute("fill-opacity", 0.7);
g1.appendChild(rect2);

svg.appendChild(g1);

window.onload = function() {
var div = document.getElementById('test');
div.appendChild(svg);
}
</script>
</head>
<body>
<div id='test' style="width:500px;height:500px;"></div>
<button onclick="doit()"<click me</button>
</body>
</html>