HOWTO: Create a Bar/Line/Pie chart
- Introduction
- Define the canvas
- Define the Bar chart
- Define the Line chart
- Define the Pie chart
- Create and draw the Combination chart
- The whole thing
Introduction
To create a combined chart you can use the specific class which is a part of the RGraph.bar.js
file.
You first create a Bar chart
object, which can be thought of as the master, and then the Line chart
object (and then
the Pie chart
if required). You don't
call the draw
method of any of them - instead,
you create a CombinedChart
object and call its draw method. This in turn
draws the charts. It sets the margin settings to be the same as the first chart (which is usually a Bar chart
) and also sets
a few other things (eg the marginInner
and yaxisLabels
for the Line chart
).
Define the canvas
First things first, as normal, define the canvas
tag. Nothing special
here - it's just like normal.
<canvas id="cvs" width="600" height="250">[No canvas support]<canvas>
Define the Bar chart
Next, define the Bar chart
. It's defined first so that the Line chart
is subsequently drawn "on top" of the Bar chart
.
Note that the draw
method isn't called - that's done later.
<script> bar = new RGraph.Bar({ id: 'cvs', data: [4,3,8,9,5,6], options: { xaxisLabels: ['Fred','John','Jake','Lou','Hoolio','Jemima'], tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'], colors: ['#555'], colorsStroke: 'rgba(0,0,0,0)', textSize: 14, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false } }).draw(); </script>
Define the Line chart
Now define the Line chart
. The margin*
and the marginInner
are set by the RGraph.CombinedChart
object
so no need to be concerned with those. If you want to set them for the whole chart, then you can set them on the Bar chart
object.
<script> line = new RGraph.Line({ id: 'cvs', data: [8,4,5,6,3,3], options: { linewidth: 9, marginInner: 35, tickmarksStyle: 'filledendcircle', tickmarksSize: 10, xaxis: false, yaxis: false, tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'], textSize: 14, backgroundGrid: false, xaxis: false, yaxis: false } }).draw(); </script>
Define the Pie chart
Now add the Pie chart
. This is positioned by hand to be in the top
right corner of the chart. Even though the Pie chart
is positioned by hand it uses the main charts margin settings (ie
the Bar chart
). This means that if you change the Bar chart
margins, the Pie chart
will be updated automatically.
<script> radius = 30; pie = new RGraph.Pie({ id: 'cvs', data: [4,8,5,4,3,6,2], options: { radius: radius, centerx: bar.canvas.width - radius - bar.get('marginRight') - 10, centery: radius + bar.get('marginTop') + 5, tooltips: ['John','Hoolio','Olga','Pete','Lou','Fred','John'], shadowOffsetx: 0, shadowOffsety: 0, shadowBlur: 15, textSize: 14, colorsStroke: 'transparent', exploded:[10] } }).draw(); </script>
Create and draw the Combination chart
Now all there is to do is create the CombinationChart
. This is a
special object that handles all of the required settings
for you.
<script> combo = new RGraph.CombinedChart(bar, line, pie); combo.draw(); </script>
The whole thing
That's all there is to it. You can add more
configuration options to the Bar chart
or
Line chart
objects
if you wish - eg tooltips.
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas> <script> // First create the Bar chart but don't call the draw() method. Only configure the margin // settings and add some labels. bar = new RGraph.Bar({ id: 'cvs', data: [4,3,8,9,5,6], options: { xaxisLabels: ['Fred','John','Jake','Lou','Hoolio','Jemima'], tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'], colors: ['#ccc'], colorsStroke: 'rgba(0,0,0,0)', textSize: 14, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false } }); // Create the line chart with no axes or labels line = new RGraph.Line({ id: 'cvs', data: [8,4,5,6,3,3], options: { linewidth: 9, marginInner: 35, tickmarksStyle: 'filledendcircle', tickmarksSize: 10, xaxis: false, yaxis: false, tooltips: ['Fred','John','Jake','Lou','Hoolio','Jemima'], textSize: 14, backgroundGrid: false, xaxis: false, yaxis: false } }); // Create the Pie chart and position it on the right of the chart. The CombinedChart class doesn't // do anything with the Pie - so position it ourselves. radius = 30; pie = new RGraph.Pie({ id: 'cvs', data: [4,8,5,4,3,6,2], options: { radius: radius, centerx: bar.canvas.width - radius - bar.get('marginRight') - 10, centery: radius + bar.get('marginTop') + 5, tooltips: ['John','Hoolio','Olga','Pete','Lou','Fred','John'], shadowOffsetx: 0, shadowOffsety: 0, shadowBlur: 15, textSize: 14, colorsStroke: 'transparent', exploded:[10] } }); // Now create the CombinedChart object and draw() it. This will draw all // of the charts. combo = new RGraph.CombinedChart(bar, line, pie); combo.draw(); </script>