This is a sales dashboard - essentially just a couple of Bar charts along with a couple of Horizontal Bar charts. The charts are 300px wide each for a total of 600px and when the screen size shrinks they go to 300px wide. If you wanted to you could probably cut the size of the code down by using the RGraph.SVG.GLOBALS
object to set some default values.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script> <script src="RGraph.svg.hbar.js"></script>Put this where you want the chart to show up:
<div style="width: 300px; float: left"> <div style="width: 300px; height: 180px" id="cc1"></div> <div style="width: 300px; height: 250px" id="cc2"></div> </div> <div style="width: 300px; float: left"> <div style="width: 300px; height: 180px" id="cc3"></div> <div style="width: 300px; height: 250px" id="cc4"></div> </div> <div style="clear: both"></div>This is the code that generates the chart: