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
A new plain text sitemap for the website8th 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 chartRead more...
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 chartRead more...
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 grids7th 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 demos3rd 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 chartsRead more...
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.