you might set your x-axis labels (values, to be precise) to

<a href=”http://www.prototypejs.org”>jquery</a>

<a href=”http://www.jquery.com”>jquery</a>

<a href=”http://www.mootools.com”>jquery</a>

The links get rendered in a <div> outside the canvas, but you cannot click them because the chart’s canvas extends over them.

solve it this way (using jquery for example):

$(’.jqplot-xaxis-tick’).css(’z-index’, 1000);

That sets your labels above the canvas and they can now be clicked.

Also reported at http://groups.google.com/group/jqplot-users/browse_thread/thread/bd9b9c49e609167e

There is a very similar initiative at Microsoft: websandbox at Microsoft livelabs. I have no idea if these are one and the same initiatives, or competitors, or somewhere in the middle.

My prediction is that beyond mashups and many other fantastic applications, this kind of technology will at last make the Semantic Web a reality. Why? because now data and its closely associated code (just like an object in OOP) can safely travel together from any source to any web application. The code is what gives the data some meaning even when the “mashup” does not know the semantics.  As long as we can apply this idea to as *small* a piece of data as we (architects and developers) want, we can build web 3.0.

As a result of this new technology, expect the start of a very dynamic phase of web 2.0 advances.

Read the OpenAjax Hub 2.0 Specification here.

The widget is just a box which starts with a limited height, and then can be expanded by the user by a specified increment, or collpased entirely.

Try a DEMO:

The CODE for the above example:

<div style="border: 1px solid #ff0000; width: 200px;">
<div id="demo_box" style="padding: 10px; overflow: hidden; width: 200px; max-height: 80px;">
<p>AAAAAAA$lt;/p>
<p>BBBBBBBB$lt;/p>
<p>CCCCCCC$lt;/p>
<p>DDDDDDD$lt;/p>
<p>EEEEEEEE$lt;/p>
<p>FFFFFFFF$lt;/p>
</div>
<div id="demo_expand"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: left;">+</div>
<div id="demo_collapse"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: right;">-</div>
</div>

<script type="text/javascript"><!--
document.write(unescape("%3Cscript src='http://www.bugzappy.com/js/jquery.js' type='text/javascript'%3E%3C/script%3E"));
document.write(unescape("%3Cscript src='http://www.bugzappy.com/wp-content/uploads/2009/04/jqueryexpandbox.js' type='text/javascript'%3E%3C/script%3E"));
// --></script>

<script type="text/javascript"><!--
var $j = jQuery.noConflict();
$j("#demo_box").expandBox('#demo_expand', '#demo_collapse', {shrunkHeight: 80, expandHeightInc: 40, expandText: 'expand', expandDelay: 100, shrinkText: 'collapse'});
// --></script>

DOWNLOAD: jquery.expandbox.js

A bit of documentation coming later.