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
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.