9 Good looking charts

Written by Richard, on 16th August 2015

Summary: 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 styling from or present them with a chart and say "Make it look pretty!". But if you're not fortunate enough to have a designer to hand then you're on your own (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 into the mix).

Back to the point of this post though - RGraph gives you the tools to create great looking charts - and here are 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 charts like the meters/gauges/progress bars you can create some good looking dashboards too. So - on to the charts:

A Line chart with a custom line

An example of a Line chart
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

An example of a 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

An example of a Pie chart
A Pie chart with custom colors and segment separation. The segment separation is achieved using the exploded property. To accommodate the length of the labels the canvas tag needs to be specified on your page with a width attribute of 480 (or more).

 

An adjustable (black) Meter chart

An example ofa Meter chart
An animated and adjustable Meter chart. The chart has been significantly customised from the defaults and would suit a page which has a dark background. The animation effect when you click on the chart is achieved by a custom click handler (because the built in adjusting feature is not animated) - it's not difficult and can be achieved with just a few lines of code.

 

Bar chart Wave effect

An example of a Bar chart
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

An example of a 3d donut chart
As well as the 3D effect (which is achieved 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 chart
A combined Bar and Line, pink and blue colored chart. There is a specific class to help you when producing this type of chart which sets the margins and the marginInner settings appropriately for you.

 

A stacked Radar chart

A filled and 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 red and black Radar chart
A Radar chart that's not filled and has tooltips. The background grid has been set to be polygons instead of circles.

 

Read more