9 Good looking charts that you can find in the demosShare RGraph:
Posted on 16th August 2015
In the demos that are part of the RGraph download there are examples of the features of RGraph - including these good looking charts.
Creating good looking charts isn't terribly difficult - for some people. If like me you're rather (very) limited in graphical abilities then creating attractive charts is not always as straight-forward as it sounds. If you have a graphical designer on hand it can be easy - simply ask them for a mock-up that you can copy the graphical styling from or present them with a chart and say "Make it look pretty!". But if you're not fortunate enough to have a graphical designer to hand then you're on your own. Almost, (by the way, on a completely unrelated side-note did you know that Google Image Search is a very good tool). Just thought I would throw that in to the mix.
Back to the point of this post though - RGraph gives you the tools to create great looking charts - and here's some examples. Out of the box RGraph charts look pretty standard - but using the configuration options you can create some pretty good looking things! And by combining things like the meters/gauges/progress bars you can create some good looking dashboards too. So - to the charts:
A Line chart with a custom line
A customised Line chart that shows revenue up to a certain point in the year and then projected income after that. The chart has a vertical line indicating where we are in the year and is animated (the tickmarks grow from nothing to their full size.
A customised Gauge chart
A significantly customised black colored Gauge chart with dual pointers. Having dual pointers can eliminate the need for multiple charts and save space on your page.
A customised Pie chart
A Pie chart eith custom colors and segment seperation. The segment separation is achieved using the exploded property. To accomodate the length of the labels the anvas tag needs to be specified on your page with a width attribute of 480 (or more).
An adjustable (black) Meter chart
An animated adjustable Meter chart. The chart has been significantly customised from the defaults and would suit a dark background colored page. The animated effect when you click on the chart is achieved by a custom click handler (because the built in adjusting is not animated) - it's not difficult and can be achieved with just a few lines of code.
Bar chart Wave effect
Not a particularly stunning chart - but the Wave effect is a nice Bar chart effect. Out of all of the effects it's one of the more intensive animations - so it may not be the best choice if you have to support ancient computers!
3D donut chart
As well as the 3D effect (which is accomplished with a canvas transformation before drawing) the various segments can be clicked to "explode" them even further - so that they can be highlighted as required.
A combined Bar and Line chart
A combined Bar and Line dark coloured chart. There is a specific class to help you when producing this type of chart which sets the gutters and hmargin settings appropriately for you.
A stacked Radar chart
This large stacked Radar chart shows three separate datasets and uses semi-transparent colors to good effect.
A non-filled Radar chart
A Radar chart that's not filled and has tooltips. The background grid has been set to be polygons instead of circles.