The RGraph and SVG/canvas news and updates blog for the year 2017
Syndicate the RGraph blog
The RGraph blog contains information about canvas, SVG, RGraph and demonstrates things that can be done with canvas and SVG.View blog entries from:
Version 4.65 of RGraph is now availableWritten by Richard Heyes, 25th November 2017
HTML5 Effects: How to lazy load images to make pages fasterWritten by Richard Heyes, 3rd October 2017
Got lots of traffic to your website? Need to give it a speed boost? Why not consider not loading your images? Or more to the point, lazy-loading them. ie Only loading them when the user scrolls to the part of the page that shows them?. This results in smaller page weights, faster pages and, if you pay for your bandwidth, reduced costs! And with Google rendering complete pages now there's no SEO loss either. It's win-win. Read on and start learning how to get faster pages...
How to use AJAX to update forms without pressing a submit buttonWritten by Richard Heyes, 12th September 2017
This is a blog post that demonstrates how to use AJAX to automatically save the contents of form inputs without having to press the a submit button. It shows you an example of it in action along with sample code. It also details a few things to look out for when using this method.
An example of a bar-in-bar chartWritten by Richard Heyes, 1st September 2017
This is an example of a bar-in-bar effect where there is one Bar chart inside another. In this case it's being used to represent vehicle sales versus production. The inner Bar chart has a larger hmargin value than the outer chart and it uses the labelsAbove option to indicate the concrete values.
Inner shadow/bevel with the globalCompositeOperation settingWritten by Richard Heyes, 1st September 2017
Again, I've resurrected an older post that I seem to have taken offline - this time regarding the canvas globalCompositeOperation setting being used to add an inner shadow to a shape - giving the appearance of a bevel.
A Line chart trace effect post has been resurrectedWritten by Richard Heyes, 1st September 2017
Not entirely sure why I took this page offline - but here it is again for posterities sake. It illustrates the Line chart trace effect which was a new thing at the time. It also uses CSS 3D transformations which, now, are not only supported by Google Chrome but also by Firefox and even (!) MSIE 11 too. Fancy that.
A new stable release of RGraphWritten by Richard Heyes, 27th August 2017
The time has finally come! Yes finally I've added version 4.63 to the website so you can download it from the download page (www.rgraph.net/download.html) if you want to. Since the gap between this and version 4.62 has been approximately 3 months there's a little bit more in this release than there previously has been so the full list of changes is on the changelog page if you want to read it (www.rgraph.net/changelog.html). Since the gap has been so long there may well be things that I've overlooked or forgotten to check so if you find anything - please let me know. Worthy of note though, I think, is the fact that I've used the Xenus Link Sleuth tool (home.snafu.de/tilman/xenulink.html) to try to find as many broken links on the site as I can and clean them (and there were A LOT!) so maybe Google now will see my site as higher quality and move me up the rankings... Or perhaps I'm just destined to rot at the bottom of page 2 for ever. Hopefully it's the former though!
Happy birthday me!Written by Richard Heyes, 24th August 2017
Happy birthday me! And today's is rather special - I'm 40 years old! Gifts and donations are always welcome - let's see if we get to a billion pounds eh?! I'm sure Paypal would put a stop to it though... :-/ I've already scoffed a whole Toblerone bar and it's not even 10am here. Start as you mean to go on eh...? (though thanks to Brexit they're not as big as they used to be. Perhaps Mondelez (the maker) is just concerned about my waistline...) Despite the day I'm still going to be (fruitlessly) working on my sites SEO. See the dedication I have to RGraph? It's like a mother/child bond. Yeah - *just* the same... :-/
Xenus's Link SleuthWritten by Richard Heyes, 22nd August 2017
Looking for bad links on your website? You could do a lot (lot) worse than Xenus's Link Sleuth. It's a wonderful little piece of software that spiders your website and gives you a list of bad or questionable links that it finds. It enabled me to find around 50 bad links on this very website. It's most definitely a time-saver and will help you root out those niggly little 404 errors. And best of all - it's free!
A new HOWTO document about creating a Bar chart thats capable of multiple selectionWritten by Richard Heyes, 2nd August 2017
I've just added a new canvas HOWTO document that shows you how you can add selection functionality to a Bar chart, optionally using the HTML5 storage API (to store the information between page refreshes) or AJAX (to communicate the selection data back to the server).
A new example of touch-friendly Line chart adjustingWritten by Richard Heyes, 8th July 2017
I've just(ish) added a new demo of an adjustable Line chart that was co-written by Xingjian Duan. It's a Line chart that has custom-made adjusting that makes adjusting the Line possible on touch devices (eg the iPad). The adjusting is a one-touch style system with no need to hold your finger on the screen or continually hold down the mouse button. It's animated too.
HTML5 Effects: A canvas based rotating starburst effect - StarBurst.jsWritten by Richard Heyes, 25th June 2017
Ever wanted a canvas based star burst effect? Perhaps its a bit of a niche thing - but here's such an effect that you could download and use as part of your own - whatever.
HTML5 effects: How to create an underline effect like TwitterWritten by Richard Heyes, 23rd June 2017
Are you looking at Twitter and drooling over the little underline effect? No, perhaps not eh? But it's pretty easy to accomplish - here's 3 options for implementing it on your own website.
HTML5 Effects: How to create a simple menubarWritten by Richard Heyes, 21st June 2017
This is a quick post that guides you through the steps that are necessary to create a simple menu bar like the one that you can see above, here on the RGraph website. There's not a lot to it and the required CSS is broken down for you into little chunks.
HTML5 Effects: An example of a popup using CSS transitionsWritten by Richard Heyes, 19th June 2017
This is an example of using CSS transitions to animate a small DIV appear in the corner of the page - in this case the bottom right-hand side. You can see this in use across the whole RGraph website
HTML5 Effects: An example of an expanding, animated underline effectWritten by Richard Heyes, 17th June 2017
Here's another in the new series of HTML5 effects demonstrations - it's a menu bar where the individual items are underlined when you hover the mouse over them. The underline grows out from the center of the item.
An example of the SVG bezier curve path optionWritten by Richard Heyes, 15th June 2017
Similar to the quadratic curve explanation that I posted the other day this is an interactive demo of the SVG bezier curve path option. You can drag the points around and see the effect that it has on the curve. It also shows you the path command that is necessary to generate the curve.
HTML5 Effects: Graduated textWritten by Richard Heyes, 14th June 2017
The first of a new series of HTML5 effects descriptions (or at least a few articles) - this shows you how to create the graduated text effect like the "new SVG charts" text banner above.
An example of the SVG quadratic curve path optionWritten by Richard Heyes, 13th June 2017
An interactive example of the SVG bezier curve path option. You can drag the points of the curve around and the code that's displayed is automatically updated.
10 example charts to get you started with RGraphWritten by Richard Heyes, 5th June 2017
Here's 10 examples of SVG charts that you can make with RGraph to get you started and up and running. With these you can take the code and add your own configuration as required to help you cut the time required to get your charts looking the way you want. There's Bar, Line and Pie charts amongst others, so like the demos that are in the download, feel free to take the code, adapt it (or don't!) and use it yourself.
A new SVG Funnel chartWritten by Richard Heyes, 16th May 2017
Will wonders never cease? No Google hasn't ranked me on page one (hah - I should be so lucky!) - no I've found it in myself (somewhere) to create an SVG Funnel chart, and you can see a screenshot of it if you look at the picture. (if you don't look at the picture, you won't see it). The Funnel doesn't taper to a point like the canvas version did when I first made it - it makes more sense I think if it doesn't. I still have some options to add regarding the labels and their positioning but as you can see from the screenshot, and like an aging bottle of Sauvignon blanc, it's already pretty damned fine.
New stable version of RGraphWritten by Richard Heyes, 10th May 2017
On Sunday I added the latest version (4.62 stable) of RGraph to the website. You can download it from the download page (www.rgraph.net/download.html#stable). There's a new SVG Rose chart which has four distinct modes, various fixes to the SVG libraries. You can read the full changelog here: www.rgraph.net/changelog.html
A new beta of RGraph is now availableWritten by Richard Heyes, 7th May 2017
I've just released a new beta version of RGraph. This version has the new SVG Rose chart which has regular, stacked, non-equi-angular and stacked non-equi-angular variations. There are demos in the archive of each so you'll be able to see examples of the various modes quite easily. The 3D Bar chart also now has support for having the X axis either in the center or offset. You can download it from the download page.
A new mode for the SVG non-equi-angular Rose chartWritten by Richard Heyes, 30th April 2017
It was years in the making - not quite the 65 million of the Jurassic Park film (cough) - but now it's here regardless. Possibly the greatest thing since sliced bread - and that was pretty damn good! The SVG Rose chart now supports a mode that the canvas Rose chart doesn't - the stacked, non-equi-angular variation. Behold its wonder... And the pinkness too. And it actually only took me a day to make - not years. But hey ho. Not only are there stacked segments, but each set of values can be configured to take a varying segment size (in terms of angle). This lets you show multiple dimensions of data. It will be available in the next release of RGraph - which should be soon I'm hoping. (Follow the link to see the image on the Facebook page)
There's now an SVG Rose chartWritten by Richard Heyes, 24th April 2017
I've added an SVG Rose chart to RGraph which supports regular and stacked segments, like the example image that I've linked to here. You can see an example of it by clicking the link and viewing it on the RGraph Facebook page.
10 good looking SVG charts that will set your pants on fire!Written by Richard Heyes, 6th March 2017
As with the canvas chart libraries creating good looking charts with the SVG libraries is not difficult at all. This is an article that shows you 10 examples of nice looking charts that have been made with the SVG libraries. You can find more good looking examples by browsing the demos that are included in the download archive.
A new stable release of RGraph is now availableWritten by Richard Heyes, 18th February 2017
I've just released a new version of RGraph - version 4.61. You can read the changelog by clicking on the link. This release adds a new SVG based Scatter chart and Waterfall chart. To go with the Scatter chart there's a new RGraph.SVG.parseDate() function that accepts a wide variety of formats - eg: 2012-01-06 12:14:12 , 6 Jan 2012 12:14 , 31st , January 2012 12:14:12 , 31st January 2012 , 31st January , January 31 , 2012 January 31 . You can read the full list of changes on the changelog.
New RGraph betaWritten by Richard Heyes, 6th February 2017
I've just released a new RGraph beta. This beta includes two new SVG chart types - the Waterfall chart and the Scatter chart. To see how to use them there are a few demos that you can look over. The Scatter chart also supports date/time values instead of numeric X values and the date/time parsing supports many different formats. This makes date/time charts far easier. The SVG Bar chart has had a wave effect added. And with tooltips, if a tooltip is already visible then new tooltips will slide into the correct position using a CSS transition. You can download it here: www.rgraph.net/download.html
The RGraph website is now secured with SSLWritten by Richard Heyes, 7th January 2017
The RGraph website is now entirely SSL. And it was quite a smooth transition too. As for the boost from Google - I've not noticed anything as yet, but neither has there been a drop - so that's nice (I suppose...). It's only a basic SSL certificate that was bundled with my hosting, but if you're worried about nasty hackers snooping on what RGraph documentation pages you're reading. then you can now rest easy!