This is the same Scatter chart that can be seen on the front page. It's a Scatter chart but as well as X and Y points it also has a Z point as well which makes the chart into a Bubble chart. The Scatter chart X axis labels aren't tied to specific points - they're just spread evenly across the X axis.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.scatter.js"></script>Put this where you want the chart to show up:
<div style="width: 650px; height: 350px; border: 1px solid #ddd" id="chart-container"></div>This is the code that generates the chart:
<script> dataset1 = [ {x: 10, y: 5, z: 10, color: 'red'}, {x: 20, y: 8, z: 8, color: 'yellow'}, {x: 30, y: 2, z: 3, color: 'blue'}, {x: 40, y: 5, z: 5, color: 'pink'}, {x: 50, y: 3, z: 6, color: 'black'}, {x: 60, y: 8, z: 1, color: 'magenta'}, {x: 70, y: 9, z: 2, color: 'cyan'}, {x: 80, y: 4, z: 8, color: 'red'} ]; var scatter = new RGraph.SVG.Scatter({ id: 'chart-container', data: [dataset1], options: { marginTop: 50, xaxisScaleMax: 100, xaxisLabels: ['Lower half','Upper half'], bubble: true, bubbleMaxValue: 10, bubbleMaxRadius: 50, bubbleColorsSolid: false, backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, colors: ['blue', 'red'], title: 'A Scatter/Bubble chart' } }).draw(); </script>