This is an SVG version of an, originally canvas based, demo that shows the combination of a Pie and grouped Bar chart. Both are animated - the Pie chart with th roundRobin effect and the Bar chart with the wave effect. The Bar chart has the labelsAbove option enabled.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.pie.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 650px; height: 350px" id="cc"></div></div>This is the code that generates the chart:
<script> var bar = new RGraph.SVG.Bar({ id: 'cc', data: [[50,60,52],[65,30,50],[40,80,70],[115,100,70]], options: { labelsAbove: true, labelsAboveSize: 10, xaxisLabels: ['Bob', 'Jamie', 'Cynthia', 'Peter'], xaxis: false, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false, hmargin: 25, colors: [ 'Gradient(#f11:#f11:white)', 'Gradient(#1cc:#1cc:white)', 'Gradient(#00f:#00f:white)' ], shadow: true, shadowOffsetx: 0, shadowOffsety: 0, shadowBlur: 7 } }).wave(); var pie = new RGraph.SVG.Pie({ id: 'cc', data: [270,270,164], options: { exploded: [7,2,], centerx: 90, centery: 85, radius: 30, shadow: true, shadowBlur: 7, shadowOffsetx: 0, shadowOffsety: 0, shadowOpacity: .25, tooltips: [ 'Total Monday sales: 270', 'Total Tuesday sales: 270', 'Total Wednesday sales: 264' ], tooltipsEvent: 'mousemove', strokestyle: 'rgba(0,0,0,0)', colors: [ 'Gradient(white:red)', 'Gradient(white:#0f0)', 'Gradient(white:blue)' ], labels: ['Mondays results'], labelsSticks: false, textBold: true }, }).roundRobin({frames: 50}); </script>