An SVG Line and Bar chart
This is an example of a mixed Line/
spline and also a Bar chart.
It's all drawn on the same
svg tag so
tooltips will work if you need them as well.
There are three chart objects - one for the red Line chart, one for the gray Line chart and one for the Bar chart.
The data for one of the Lines - the
spline chart - is created dynamically and is two units
lower than the angular Line. This is what the
forEach loop does in the code
The second Line chart along with the Bar chart have their
Y-axis labels turned off as these are drawn by the
first Line chart. Similarly, the
X-axis labels are also
drawn by the first Line chart.
responsive configuration that simply reduces the size of the chart and removes the
float that is applied to the
This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.line.js"></script> <script src="RGraph.svg.common.bar.js"></script>Put this where you want the chart to show up:
<div style="float: right"> <div id="cc" style="width: 600px; height: 250px"></div> </div>This is the code that generates the chart - it should be placed AFTER the