The RGraph and SVG/canvas news and updates blog for the year 2018
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:
- A dynamic scrolling SVG Line chart
This chart is initially given an empty array of data and then new data is appended to it and the array is shift()ed (one element is removed from the front of the array). This way the Line appears to be scrolling from the right to the left. The data is random, and new values are generate using the last value as a starting point.
- A segmented Bar chart
Here's a segmented SVG Bar chart that's made using two regular SVG Bar charts. The first chart is used to draw the chart, and the second chart adds the background grid (so that the grid lines are visible after drawing the white lines that create the segmented effect).
- An SVG 100% Bar chart
Here's an SVG Bar chart that has a single array of data (just numbers) which is then altered to convert it into a stacked chart where all of the bits of data add up to 100 - making it a 100% chart.It uses gradients for the colors.
- A Line chart using gradients
Here's a canvas based Line chart that uses a gradient for the background color and a graduated dark color for the line itself. The gradients are created by using the RGraph gradient syntax.
- An SVG Horizontal Bar/Bar/Pie dashboard
Here's an example of an SVG fashboard that makes use of the Bar chart, the HBar chart and the Pie chart. All the colors are coordinated so that they relate to each other
The Meter chart now has some new propertiesWritten by Richard Heyes, 9th September 2018
I've just added a few new properties to the canvas Meter chart to allow you to better control the valueText setting (the text that appears in the center of the chart). The properties that ontrol the text are now (defaults in brackets):
valueTextFont: (falls back to the textFont option)
valueTextColor (falls back to the textColor option)
valueTextUnitsPost (an empty string),
valueTextUnitsPre: (an empty string),
New canvas HOWTO document: How to get rounded corners on a Bar chartWritten by Richard Heyes, 23rd August 2018
I've added a new canvas HOWTO odocument to the website that deals with getting rounded corners on your Bar chart bars.The process involves redefining the standard canvas 2D API rect() function so that instead of it drawing a normal recttangle it draws one with rounded corners. All of the necessary code is demonstrated for you and you can adjust the severity of the rounding effect on the bars quite easily.
Finally! A new version of RGraph is now available.Written by Richard Heyes, 14th August 2018
That time has come - I've dusted off the release script - tidied up the download section - and finally gone through with it and released a new version of RGraph. Wooo! Yes calm down people (all 2 of you...) - version 4.67 is now available for download from the website. There's nothing particularly massive in it but there are bug fixes to the canvas Bipolar chart, new documentation for getting RGraph charts through PhantomJS (ie via the command line), a new SVG Gauge chart, the Google Sheets import utility can now be used without the rest of RGraph (ie standalone; in your own apps) and angled X axis text for SVG charts. You can read the changelog and download the new version with these links:
A new navigation bar for the websiteWritten by Richard Heyes, 7th August 2018
As you may have noticed the website now has a dark, more compact navigation bar. What was the motivation behind this change? Well, if I said anything other than "I got bored" then I would be telling you a blatant lie. I think that the old design was showing its age (despite only being approximately a year old - if that). I also watch a lot of Youtube videos and have become quite taken by their toolbar which has a very similar design. For some reason.Still, it's less complicated code-wise which makes it faster and easier to maintain. Because it's more compact it provides more screen real estate to the content of the page. The mobile side of things benefits from this too for obvious reasons. The hardest part was making the logo anti-aliased for a black background instead of a white one - because as far as graphics skills go I'm sadly rather lacking. If you have any feedback then you can use the support page to send it to me.
The RGraph site now has a shiny new HTML sitemapWritten by Richard Heyes, 3rd August 2018
As of yesterday the RGraph website has a brand new, shiny(ish) HTML sitemap. As is usually the case it lists all of the URLS that are available on the RGraph website from documentation pages to blog articles.Previously the script that generated the sitemap was a bit of a monster with lots of redundant code that wasn't very well organised. Now, however, the code is better organised, smaller and way more manageable. It gets all of the URLs from the main sitemap.txt, which now that it's just a text file, is a simple affair. Then, based on the file name, it categorizes them all and the last thing it does is print the URLs. Those categories are defined first, in the correct order so that the URLs can just be added to the relevant category.
So how does the script determine the correct category?Well fortunately I'm quite particular/anal (it's not often that that can be said to be a good thing!) so this has resulted in good naming conventions for files. For example all of the HOWTO document URLs start with 'howto-' and other files are in specific directories so its quite easy to pick these things up. And so on for other types. You can see the various filenames if you look through the sitemap. So once the sitemap has been read and processed and the URLs categorised it's just a matter of printing those categories and the associated URLs.
How are the categories determined?This was largely a straight-forward job that tends to jump out at you. For example all of the URLs in the root of the website are grouped together, all of the blog URLs are grouped together and all of the canvas reference URLs are grouped together. And so on for other categories too.
What about descriptions for each of the URLs?Adding descriptions would mean two things - the first would the extraction process. You can't have the sitemap page look at over 330 URLs on the fly to get the meta descriptions for every single request - that would be ridiculous and would put mountains of unnecessary strain on the web server. The second would be speed. If someone looked at the sitemap HTML page and it tried to get all of the descriptions from various files it would just be far too slow and people wouldn't use the sitemap at all. A possible solution would be to have the script that extracts the titles from each page also extract the meta description. But simply having the descriptions for all 330 pages listed as well as the titles would mean that the page would be unnecessarily large and cumbersome. So just having the titles listed suffices - and the titles are pretty descriptive anyhow.
As of version 4.67, the Google Sheets connector works in a standalone fashionWritten by Richard Heyes, 28th July 2018
As promised previously,I've now made a change to both the canvas and he SVG versions of the Google Sheets import library that removes a dependency on the RGraph core library.This means that you can, if you so choose, use the code without including the RGraph core library. So you can use it for whatever purpose you choose - with or without the RGraph core library. By following the above link you'll be taken to a page on which there's a demo page linked that shows using it without RGraph. With regards to licensing - It's part the RGraph software which is licensed using the MIT license. Which basically means: 'Do whatever you like with it'!
A spotlight on the CSV connectorWritten by Richard Heyes, 26th July 2018
This blog article is the last in the series of 'Spotlight on...' posts and it concentratesd on the dedicated CSV importing object. This object is more comprehensive than the basic getCSV() AJAX function.Think of the getCSV() function as a quick and dirty function whereas the CSV import object is more comprehensive and versatile. If you have your own CSV imort facility then by all means use that - you shouldn't have any trouble using it with RGraph.
A spotlight on the AJAX connector functionsWritten by Richard Heyes, 24th July 2018
This blog article is a continuation from yesterdays spotlight on the Google Sheets connector and this one focuses on the AJAX functionality that RGraph comes with. There are two seperate sets of AJAX functions - one for SVG and one for canvas.They do anything from fetch a single number to fetching and parsing a JSON file. There's also a general AJAX fetch function so you can get hold of any page you wish to.When using RGraph you're not limited to the AJAX functions that come with RGraph - you can quite happily use your own (or the jQuery AJAX functions for example).
A spotlight on the Google Sheets connectorWritten by Richard Heyes, 23rd July 2018
This blog article shines a spotlight on the SVG Google Sheets connector (there's one for canvas too). Using this you can connect the charts that are displayed on your website directly to a spreadsheet in the online Google Sheets application - without any intervention on your part or having to export it first. This way you can update a value in your spreadsheet and your website is updated immediately.Initially the Google Sheets connector was created for use with RGraph but it's designed so that there are few dependencies - only a few functions in the RGraph core library and for the next release this will be removed from both the canvas and the SVG versions of the library so if you want to use this connector with your own code then you can - and it's going to be easier as of the next release.
A new HOWTO document about making your charts without a web browser (from the command line using PhantomJS)Written by Richard Heyes, 20th July 2018
I've just added a new HOWTO document, that applies to both the canvas and SVG chart types, that explains how you can create your charts using PhantomJS - the Webkit based command line browser. This allows you to create charts from a scheduled task (or cron task) so that you can, for example, make images of charts available for download so that they can be included in PDF or Word documents.The PhantomJS project appears to be stalled at he moment so I've added the downloadables to the RGraph website so if you wish you can download them from here as well as the PhantomJS website.
A new plain text sitemap for the websiteWritten by Richard Heyes, 8th July 2018
I've just switched the sitemap.xml file to a sitemap.txt file. It won't affect you but is marginally interesting regardless.If you didn't know then it might come as a bit of a surprise for you to learn that sitemaps for websites don't have to be in an XML format. There a few different formats supported by Google (and possibly other search engines too) and you can read about them here.For me, the XML format for sitemaps didn't offer any benefit over the plain text version so that was the reason for the switch. The main reason at least. Plain text files are also easier to create and manage and the plain text format is easier to manipulate by hand if necessary. If bandwidth is an issue for you then that also may be something to consider too, though keep in mind that using gzip compression can render this a non-point.You can see the plain text sitemap here.All the new plain text format is is a simple list of URLs. It did give me a chance to employ some new spidering code that I was bored enough to write. And it works well too I'll have you know.Anyway, have a look at the Google documentation that's linked above and the sitemap text file too and then you can think about whether it would be beneficial for you too on your own website.
New HOWTO document added: How to dynamically add points to your Line chartWritten by Richard Heyes, 24th June 2018
I've just added a new HOWTO document that shows the code necessary to implement the dynamic adding of new points by clicking in the left or right gutters. The code that\'s necessary to accomplish this is small and consists of a single event listener.
A new HOWTO document showing angled labels on your Line chartWritten by Richard Heyes, 13th June 2018
This new HOWTO document shows you the code that's necessary in order to implement labels that follow the up and down directions of your line. There's a demo here of a straight forward implementation and also a chart that uses adjusting as well, where the labels change when the line is moved up or down.Here the labels are simply stating the direction of the Line segment that they decorate but they could be all distinct if that's what you wanted.With the adjustable chart the labels will change as you move the points of the line up and down - adding a degree of interactivity.
A change to various charts background gridsWritten by Richard Heyes, 7th June 2018
This is an update to let you know that the SVG chart background grids now have their CSS pointer-events property set to none. This means that you can combine charts and still have tooltips on both charts. This affects the Bar, Horizontal Bar, Line, Scatter, Waterfall and also the Rose charts. There's a demo called svg-rose-grouped.html in the latest beta archive that demonstrates this by combining two SVG Rose charts in order to create a grouping effect.
Some recently added demosWritten by Richard Heyes, 3rd May 2018
Not a lot has happened recently in the world of RGraph (small may that world be...) - I've been busy with other things. So here's a few examples of demos that I've added that you may not have seen yet.
A mockup of Google Analytics chartsWritten by Richard Heyes, 8th January 2018
Somebody got bored! Here's a novel SVG based demo of a bunch of Line charts that have been configured to look like a dashboard from Google Analytics. There's a large main chart that shows page views and 6 smaller sparkline-style charts. The code to create this is not that large. It uses the RGraph.SVG.GLOBALS object to set some defaults to reduce the amount of code that there is. And because of this the code to create the whole thing isn't that big.