A Bar chart with rounded tops
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px; display: inline-block">
<canvas id="cvs" width="750" height="250">[No canvas support]</canvas>
</div>
This is the code that generates the chart:
<script>
window.roundedCorners = 10;
/**
* This adds a roundedRect(x, y, width, height, radius) function to the drawing context.
* The radius argument dictates how severe the corners are rounded.
*
* @param number x The X coordinate
* @param number y The Y coordinate
* @param number width The width of the rectangle
* @param number height The height of the rectangle
* @param number radius The radius of the corners. Bigger values mean more rounded corners
*/
CanvasRenderingContext2D.prototype.rect = function (x, y, width, height)
{
var radius = window.roundedCorners;
// Because the function is added to the context prototype
// the 'this' variable is actually the context
// Save the existing state of the canvas so that it can be restored later
this.save();
// Translate to the given X/Y coordinates
this.translate(x, y);
// Move to the center of the top horizontal line
this.moveTo(width / 2,0);
// Draw the rounded corners. The connecting lines in between them are drawn automatically
this.arcTo(width,0,width,height, Math.min(height / 2, radius));
this.arcTo(width, height, 0, height, Math.min(width / 2, 0));
this.arcTo(0, height, 0, 0, Math.min(height / 2, 0));
this.arcTo(0, 0, radius, 0, Math.min(width / 2, radius));
// Draw a line back to the start coordinates
this.lineTo(width / 2,0);
// Restore the state of the canvas to as it was before the save()
this.restore();
};
new RGraph.Bar({
id: 'cvs',
data: [12,18,10,9,6,20,18,5,9,13,15,11],
options: {
xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
yaxisScaleUnitsPost: 'k',
shadow: false,
colors: ['red'],
colorsStroke: 'rgba(0,0,0,0)',
textSize: 14,
title: 'A Bar chart with rounded tops',
titleSize: 14,
yaxisTickmarksCount: 5,
axes: false,
marginLeft: 50
}
}).wave();
</script>