Zend Certified Engineer

phpguru.org

Quality PHP and Javascript code
Download RGraph: HTML5 canvas graph library... Home ~ Downloads ~ FAQs ~ Licensing
RSS Feed RSS Feed
Follow me on Twitter Follow me on Twitter

Add to Google...

HTML5 & CSS3

Articles

Javascript

PHP5

PHP4






Bookmark with delicious tweet this site Post to Google Buzz! Stumble! this site

28th August STABLE RGraph release


28th August 2010

[Direct URL for this article]

Todays STABLE release includes the following updates:

  • RGraph is moving towards DOM 2 event handler functions (ie the .addEventListener function). This will further improve interoperability with other code
  • More custom events have been added
  • The Progress bar has been split into the Hprogress and VProgress chart types
  • Added the contract effect for tooltips (like expand, but in reverse)
  • More MSIE9 compatibility work
  • Noted suitability for Chrome extensions
  • Noted the DOMContentLoaded event for performance purposes

For a more complete list of changes, see the docs/.CHANGELOG.txt file (the last stable release was the 31st July). Please tweet this.

Your continued support is appreciated!

21st August RGraph release


21st August 2010

[Direct URL for this article]

As it starts getting warmer again, just in time for Winter (?), here's the latest RGraph changes (theres not too many this week):

  • Added chart.units.ingraph to the HBar (for when your units are quite long)
  • Fixed various bugs in circular charts with Chrome 6
  • Added note to front page about suitability for Chrome extensions
  • More fixes for MSIE 9

You can get the latest beta and stable releases on the RGraph website: http://www.rgraph.net

14th August RGraph release


14th August 2010

[Direct URL for this article]

Todays changes include:

  • Added chart.tooltips.coords.adjust to the Bar chart which allows you to adjust tooltip coordinates (when you translate for example)
  • HBar shadow is now "unified", so you can have an upwards shadow with a large offset and it still looks OK
  • The HBar "chart.labels.abovebar" labels are now left aligned if they would go off the end of the canvas
  • Fixed a bug with the HBar chart.strokecolor - renamed to chart.strokestyle
  • Added chart.tooltips.coords.adjust to the line chart (for when you translate for example)
  • Tweaked filled/stepped line charts - stepped line charts show trailing line again
  • Tickmarks, as well as a string, can now also be an array of different tickmark styles
  • Added chart.ylabels.invert to the Line chart
  • You can now specify in-graph labels like this: line.Set('chart.labels.ingraph', [6,'July', 3, 'November']); If you have a lot of empty spaces, this will help.
  • Added type property to common objects
  • Improved the appearance of the Odometer border
  • Scatter chart tickmarks are no longer drawn when the ticks are boxplots
  • Scatter chart boxplots are now usable when the X axis is in the center
  • Added chart.xmin to the Scatter chart (upgrade cautiously)
  • Chrome 6 appears to have an issue with canvas shadows. Other browsers are fine. A workaround has been added to the Line chart library, however it won't be a solution for all cases. In these cases, simply turn off shadow blurring.
Go to the RGraph website »

7th August RGraph release


7th August 2010

[Direct URL for this article]

Now that summer is officially over it seems and it's just humid (which is so much more comfortable...), here's this weeks changes:

  • Changed the Bar chart over to the DOM2 .addEventListener() function for tooltips
  • The Bar chart can now have an arbitrary number of labels (example)
  • Added chart.ylabels.inside to the Bar chart
  • Bar chart labels can now be at any angle
  • Changed the Bipolar default colors to just one - green
  • Added more events:
    • onmodaldialog
    • onresize
    • onadjust
    • onannotate
  • Multiple segments are now supported in the Horizontal Progress Bar
  • Added the ability to configure the number of inner tickmarks for the Horizontal Progress Bar
  • Line chart labels can now be at any angle
  • Changed the Line chart to use the DOM2 .addEventListener() for tooltips
  • Added isRGraph property to common objects
  • Added chart.title.hpos to all graph libraries
  • Added onmodaldialog event
  • The Odometer outer shadow is now configurable
  • The Odometer inner shadow is now configurable
  • The Progress bar has been split into the Horizontal Progress bar and the Vertical Progress bar
  • The Scatter chart labels can now be at any angle
  • Added contract effect for tooltips. This is similar to expand but in reverse
  • The Tradar background grid now matches the RScatter in terms of width etc
  • Multiple segments are now supported in the VProgress
  • Added the ability to configure the number of inner tickmarks with thee VProgress
Go to the RGraph website »

31st July stable RGraph release


31st July 2010

[Direct URL for this article]

Today marks the start of more frequent, monthly, stable releases, which will mean a quicker turn-around for new features. This release includes the following notable updates:

  • You can see a few screenshots of RGraph in MSIE9 here.
  • Added "snap" tooltip effect for graphs where the tooltips are triggered using the onmousemove event
  • Added custom event support. There's just a small number of events at the moment, the most useful of which perhaps is the ontooltip event. This makes showing graphs in tooltips much easier than it previously was.

Further detail is available in the docs/.CHANGELOG.txt file, and there are a few things that you should be aware of in the docs/.BC.txt file. Be sure to read BOTH of these files before upgrading.

Going forward, more custom events will be added, the Progress bar will be split into two types (horizontal & vertical), further new "guage" style graph types will be added, further graph types will be converted to the DOM 2 .addEventListener() for tooltips, inverted Y axis on the Line chart, "more than 5" Y label points for the Bar chart and more.

Your continued support is appreciated!

24th July RGraph release


25th July 2010

[Direct URL for this article]

Not a lot of changes this month. Only two in fact:

  • The line chart can now have labels at any angle. Other chart types to follow.
  • The minify script now accepts mutiple arguments: ./minify file1 file2 file3 ...
Go to the RGraph website »

A canvas "Please wait..."


20th July 2010

[Direct URL for this article]

Haven't you seen this before? If not you should stay in more. Or something like that. This, it seems, is a common "Please wait..." component for Flash, and now here it is in a <canvas> version. It's quite simple to use, simply call the function:

<script src="PleaseWait.js"></script>

<script>
    PleaseWait(id);
</script>
The library is here: Bear in mind that you may need to clear the canvas before and/or after using it. You can do this by setting the width or height to itself. Eg:
document.getElementById("myCanvas").width = document.getElementById("myCanvas").width;

[Article index]


RGraph: HTML5 canvas graph library

Example graph made using RGraph

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.