9 Good looking charts in the demos
Written by Richard Heyes, RGraph author, on 16th August 2015- A Line chart with a custom line
- A customised Gauge chart
- A customised Pie chart
- An adjustable (black) Meter chart
- Bar chart Wave effect
- Donut chart
- A combined Bar and Line chart
- A stacked Radar chart
- A non-filled Radar chart
- Read more
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 straightforward 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
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.
File: demos/line-orange2.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.line.js"></script>
<canvas id="cvs1" width="750" height="250">[No canvas support]</canvas>
<script>
color = '#E9B34E';
line = new RGraph.Line({
id: 'cvs1',
// Define the data such that the first dataset has a bit
// missing at the end whilst the second dataset continues
// the first (ie the first part is null values)
data: [
[7000,26000,11000,16000,28000,13000,23000,28500,null,null,null,null],
[null,null,null,null,null,null,null,28500,11000,14000,9000,10000],
],
options: {
colors: ['black',color],
shadow: false,
axes: false,
backgroundGridVlines: false,
backgroundGridHlinesCount: 3,
backgroundGridBorder: false,
yaxisTickmarksCount: 3,
yaxisLabelsCount: 3,
yaxisScaleMax: 30000,
yaxisScaleUnitsPre: '$',
marginTop: 50,
marginLeft: 100,
linewidth: 3,
xaxisLabels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
tickmarksStyle: 'dot',
tickmarksStyleDotStroke: 'white',
tickmarksStyleDotLinewidth: 0,
tickmarksStyleDotStroke: 'white',
tickmarksSize: 0,
textSize: 14,
textFont: 'Segoe UI',
shadow: true,
shadowOffsetx: 0,
shadowOffsety: 0,
shadowBlur: 0
}
// The draw event handles drawing the text and the vertical
// lines on the chart
}).on('draw', function (obj)
{
// Draw the vertical line
var x = obj.coords2[1][7][0];
var y = obj.coords2[1][7][1];
// Draw the vertical line above and below the 8th point
obj.path(
'b m % 25 l % % s %',
x,
x, y - 10,
color
);
obj.path(
'b m % % l % 230 s %',
x, y + 10,
x,
color
);
obj.context.fillStyle = color;
// Draw the text above the vertical line
RGraph.text(obj,
{
x: x,
y: 25,
text: 'TODAY',
size: 8,
halign: 'center',
bold: true
});
// Draw the text above the Y axis labels
RGraph.text(obj, {
color: 'black',
x: 65,
y: 30,
text: 'REVENUE',
size: 14,
halign: 'center',
bold: true
});
}).trace({frames: 50}, function (obj)
{
// The animate functionenlarges the tickmarks to 10
obj.animate({
frames: 7,
tickmarksSize: 10,
tickmarksStyleDotLinewidth: 3,
shadowOffsetx: 1,
shadowOffsety: 1,
shadowBlur: 2
}, function ()
{
// When the above animate function finishes this
// animate function then reduces the tickmarksSize
// property to 7
obj.animate({
frames: 7,
tickmarksSize: 7
});
});
});
</script>
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.
File: demos/gauge-customised.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.gauge.js"></script>
<canvas id="cvs" width="300" height="300">[No canvas support]</canvas>
<script>
new RGraph.Gauge({
id: 'cvs',
min: 0,
max: 200,
value: [184,12],
options: {
marginLeft: 15,
marginRight: 15,
marginTop: 15,
marginBottom: 15,
// Configure the top titles appearance
titleTop: 'Air Speed',
titleTopFont: 'Impact',
titleTopColor: '#fff',
titleTopSize: 24,
titleTopItalic: true,
// Configure the bottom titles appearance
titleBottom: 'Knots',
titleBottomSize: 14,
titleBottomItalic: true,
titleBottomFont: 'Impact',
titleBottomColor: '#ccc',
titleBottomPos: 0.4,
colorsRanges: [[160,200,'rgba(255,0,0,1)'], [120,160,'rgba(255,255,0,0.95']],
backgroundColor: 'black',
backgroundGradient: true,
centerpinColor: '#666',
needleSize: [null, 50],
needleColors: ['Gradient(transparent:white:white:white:white:white)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],
textColor: 'white',
tickmarksLargeColor: 'white',
tickmarksMediumColor: 'white',
tickmarksSmallColor: 'white',
borderOuter: '#666',
borderInner: '#333',
textAccessible: true
}
}).draw();
</script>
A customised 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).
File: demos/pie-customised.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.pie.js"></script>
<canvas id="cvs" width="700" height="250"></canvas>
<script>
data = [20,13.43,2.83,4.24,7.42,13.43,38.65];
labels = ['Miscellaneous','Cooking','Office equipment','Refridgeration','Cooling','Ventilation','Lighting'];
new RGraph.Pie({
id: 'cvs',
data: data,
options: {
labels: labels,
tooltips: '%{property:labels[%{index}]}: %{value}%',
colors: ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0'],
colorsStroke: 'white',
linewidth: 0,
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 3,
exploded: 7,
labelsSize: 18,
tooltipsCss: {
fontSize: '20pt'
}
}
}).draw();
</script>
An adjustable (black) Meter chart
An animated and adjustable Meter chart. The chart has been significantly
customised from
the defaults and would suit a page that 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.
File: demos/meter-black.html
<script src="RGraph.common.core.js"></script> <script src="RGraph.meter.js"></script> <!-- Set the CSS background color of the canvas tag --> <canvas id="cvs" width="500" height="300" style="background-color: black">[No canvas support]</canvas> <script> meter = new RGraph.Meter({ id: 'cvs', min: 0, max: 100, value: 75, options: { marginLeft: 100, marginRight: 100, marginTop: 15, marginBottom: 15, // There's various configuration options here so that the Meter looks // quite different to the default. backgroundColor: 'black', anglesStart: RGraph.PI - 0.55, anglesEnd: RGraph.TWOPI + 0.5, centery: 150, textSize: 14, textColor: 'white', textValign: 'center', colorsGreenColor: '#0a0', segmentsRadiusStart: 95, border: 0, tickmarksSmallCount: 0, tickmarksLargeCount: 0, needleRadius: 70, needleColor: '#ddd', needleHeadWidth: 0.1, needleHeadLength: 20, centerpinStroke: 'black', centerpinFill: '#ddd' } }).draw(); // Now add a click event listener so that when the canvas is clicked on // the Meter chart needle animates to show the new value. meter.canvas.onclick = function (e) { var newvalue = meter.getValue(e); meter.value = newvalue; meter.grow(); } </script>
Bar chart Wave effect
Not a particularly stunning chart - but the Wave effect is a nice Bar chart effect.
The 3D effect is easy to implement in RGraph and is as simple
as setting a property: variant: '3d'
File: demos/effects-bar-wave.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
<canvas id="cvs" width="650" height="300">[No canvas support]</canvas>
<script>
data = [4,8,6,3,5,2,6,8,4,5,7,8];
new RGraph.Bar({
id: 'cvs',
data: data,
options: {
backgroundGridVlinesCount: 0,
linewidth: 0,
shadow: false,
marginInner: 7,
// Create a gradient using the RGraph-specific gradient
// syntax
colors: ['Gradient(pink:red:#f33)'],
labelsAbove: true,
labelsAboveOffsety: 5,
xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
clearto: 'white',
variant: '3d',
marginBottom: 90,
xaxis: false,
yaxis: false
}
// Animate the Bar chart using the wave effect
}).wave({frames: 60});
</script>
Donut chart
A Donut chart can be created by using the Pie chart library.
It has numerous options that you can see by looking through
the Pie chart and Donut chart demos in
the download archive.
File: demos/donut-custom-highlight.htmlA Donut chart can be created by using the Pie chart library.
It has numerous options that you can see by looking through
the Pie chart and Donut chart demos in
the download archive.
File: demos/donut-custom-highlight.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.pie.js"></script>
<canvas id="cvs" width="650" height="300">[No canvas support]</canvas>
<script>
labels = ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'];
// Create the Pie chart, set the donut variant and the rest of the
// configuration. The variant property is what sets the chart to
// be a Donut chart instead of a regular Pie chart.
new RGraph.Pie({
id: 'cvs',
data: [4,8,6,3,5,2,5],
options: {
shadow: true,
shadowOffsetx: 0,
shadowOffsety: 5,
shadowColor: '#aaa',
variant: 'donut3d',
labels: labels,
labelsSticksLength: 15,
labelsSticksLinewidth: 2,
colorsStroke: 'transparent',
tooltipsCss:{
fontSize:'16pt'
}
}
}).draw().responsive([
{maxWidth: null,width:600,height:350,options:{radius: 100,labelsList: true, labels:labels,title:'',tooltips:null}},
{maxWidth: 900,width:400,height:250,options:{radius: 90,labels: null,title: '(Click for labels)',tooltips:labels}}
]);
</script>
A combined Bar and Line chart
A combined Bar and Line, pink and blue colored chart. With
canvas charts there's a specific class to help you
when producing this type of chart that sets the margins and the
marginInner settings appropriately for you but with
svg, as it is here, the settings most be set
manually.
File: demos/svg-bar-combined.html
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.line.js"></script>
<div id="chart-container" style="width: 750px; height: 300px">
<script>
new RGraph.SVG.Bar({
id: 'chart-container',
data: [[60,5],[84,98],[-20,-23],[-16,24],[72,35],[49,-22],[-15,15]],
options: {
colors: ['#FF6384','#4BC0C0'],
yaxisScaleMax: 100,
yaxisScaleMin: -75,
yaxis: false,
yaxisLabelsCount: 7,
backgroundGridHlinesCount: 7,
marginInner: 10,
marginLeft: 31
}
}).wave();
new RGraph.SVG.Line({
id: 'chart-container',
data: [35,89,53,16,56,40,18],
options: {
tickmarksStyle: 'circle',
tickmarksSize: 4,
linewidth: 2,
marginInner: 41,
colors: ['#36A2EB'],
spline: true,
backgroundGrid: false,
yaxis: false,
yaxisScaleMax: 100,
yaxisScaleMin: -75,
yaxisScale: false,
xaxis: false
}
}).trace({frames: 30});
</script>
A stacked Radar chart
This large stacked Radar chart shows three separate datasets
and uses semi-transparent colors to good effect.
File: demos/radar-stacked.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.radar.js"></script>
<canvas id="cvs" width="750" height="600"></canvas>
<script>
new RGraph.Radar({
id: 'cvs',
data: [
[31,33,32,31,34,31,32,32,36,33,32,30,31,33,32,31,33,31,32,32,33,30,32,29,31,32,32,31,34,31,32,32,31,32,32,33],
[16,12,13,15,14,12,16,13,15,12,14,16,13,18,15,17,14,14,16,12,13,15,14,12,16,13,15,12,14,16,13,18,15,17,14,14],
[13,15,12,14,13,12,12,13,15,16,15,15,13,15,13,12,14,15,17,16,14,15,13,14,13,12,14,15,18,16,14,15,13,15,13,12],
[13,15,12,14,13,12,12,13,15,16,15,15,13,15,13,12,14,15,17,16,14,15,13,14,13,12,14,15,18,16,14,15,13,15,13,12]
],
options: {
backgroundcirclesPoly: false,
backgroundcirclesPolySpokes: 36,
fillTooltips: ['Johns figures','Freds figures','Josephs figures','Ricardos figures'],
tooltipsPositionStatic: false,
accumulative: true,
colors: ['#0f0','red','cyan','blue'],
colorsStroke: 'rgba(0,0,0,0)',
colorsAlpha: .3,
textSize: 12,
labels: [
'1/1/2012','1/2/2012','1/3/2012','1/4/2012','1/5/2012','1/6/2012','1/7/2012','1/8/2012','1/9/2012','1/10/2012','1/11/2012','1/12/2012',
'1/1/2013','1/2/2013','1/3/2013','1/4/2013','1/5/2013','1/6/2013','1/7/2013','1/8/2013','1/9/2013','1/10/2013','1/11/2013','1/12/2013',
'1/1/2014','1/2/2014','1/3/2014','1/4/2014','1/5/2014','1/6/2014','1/7/2014','1/8/2014','1/9/2014','1/10/2014','1/11/2014','1/12/2014'
]
}
}).draw();
</script>
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.
File: demos/radar-non-filled.html
<script src="RGraph.common.core.js"></script>
<script src="RGraph.radar.js"></script>
<canvas id="cvs" width="750" height="600"></canvas>
<script>
// Create and configure the Radar chart so that it's not filled and
// only has the labels on the north axis. The text size has been
// slightly increased.
new RGraph.Radar({
id: 'cvs',
data: [
[8,7,6,7,8,6],
[8,9,4,6,6,8]
],
options: {
backgroundCirclesPoly: true,
backgroundCirclesSpacing: 30,
colors: ['transparent'],
axesColor: 'transparent',
highlights: true,
colorsStroke: ['red', 'black'],
linewidth: 3,
labels: ['', 'Barry', 'Gary','Dave','Paul','Rich'],
labelsAxes: 'n',
textSize: 16
}
}).trace().responsive([
{maxWidth: null, width: 500, height: 400,parentCss:{textAlign:'center'}},
{maxWidth: 700, width: 300, height: 300,parentCss:{textAlign:'center'}}
]);
</script>
Read more
- You can find all of the demos here and lots more (over 1000!) in the download archive