A combined Bar and Line chart
Summary: A red and purple combined Bar and Line chart that illustrates the dynamic nature of RGraph by using an option to switch the Line from a spline to a non-spline.
This demo is an example of a combined Bar and Line. In this case the
Line is a spline but it doesn't have to be. In fact there's a button
beneath the chart that you can use to toggle whether it's a spline (curvy) or
a regular angular Line. All this button does is toggle the
spline setting and then redraw the canvas.
In RGraph combining a Bar chart and a Line chart is made easy by the
CombinedChart class. You can see
this being used in the code below. It simply takes the Bar and the Line
objects and sets the correct settings on them and then draws the chart. But
normally you would want only one set of labels (ie the Bar or the
Line) drawn, however here the Bar charts labels are on one side
and the Line chart labels are on the other. So after the combo class has
been drawn, the Y labels are turned back on for the Line chart object and
everything is redrawn. You can see how this is done in the code below.
CombinedChart class is freely
usable by you in a very similar way to the other RGraph classes. It's
created in the same way and you pass it an array of objects - which usually
is a combination of Bar and Line objects. You can give it more types if you
Apart from this the chart has "larger than the default" text and the Bar
uses a gradient for the fill color:
<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="900" height="250" style="background-color: #555; border: 5px solid black; border-radius: 7px; box-shadow: 2px 2px 3px gray"> [No canvas support] </canvas><br /> <button style="border-radius: 5px; font-size: 20px; margin: 10px; padding: 7px" onclick="line.set('spline', !line.get('spline')); RGraph.redraw()">Toggle spline</button>This is the code that generates the chart: