Here's a 3D Bar chart that has the X axis position set to be in the middle instead of at the bottom of the chart. It has a title and also uses the wave()
animation effect. Other than that it's quite basic.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 550px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<script> data = [[-4,-5,-3],[-5,-2,-1], [-4,-4,-2],[8,16,11],[15,11,13],[2,5,1],[1,2,3]]; tooltips = RGraph.SVG.arrayLinearize(data); tooltips.forEach(function (v,k,arr) { arr[k] = 'Result: {1},000m'.format( arr[k] ); }); var bar = new RGraph.SVG.Bar({ id: 'chart-container', data: data, options: { variant: '3d', colorsStroke: 'rgba(0,0,0,)', colors: [ 'Gradient(#faa:#fbb)', 'Gradient(#aaa:#bfb)', 'Gradient(#aaf:#bbf)' ], marginTop: 30, marginLeft: 45, marginBottom: 80, xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'], xaxisColor: '#ddd', xaxisTickmarks: false, yaxisColor: '#ddd', yaxisScaleUnitsPost: 'km', yaxisScaleMax: 20, yaxisScaleMin: -5, yaxisTickmarks: false, tooltips: tooltips, shadow: false, backgroundGridColor: '#eee', title: 'Distance run in the past week', titleY: 10, marginInner: 7 } }).wave().on('tooltip', function (obj) { var tooltip = RGraph.SVG.REG.get('tooltip'), idx = RGraph.SVG.sequentialIndexToGrouped(tooltip.__index__, obj.data), colors = ['red','#0f0','blue']; tooltip.style.borderColor = colors[idx[1]]; }); // Some CSS that gets used for the tooltips RGraph.SVG.tooltips.style.fontSize = '105%'; RGraph.SVG.tooltips.style.fontFamily = 'Arial, sans-serif'; RGraph.SVG.tooltips.style.fontWeight = 'bold'; RGraph.SVG.tooltips.style.paddingRight = '10px'; RGraph.SVG.tooltips.style.paddingLeft = '10px'; RGraph.SVG.tooltips.style.paddingTop = '10px'; RGraph.SVG.tooltips.style.paddingBottom = '10px'; RGraph.SVG.tooltips.style.textAlign = 'center'; RGraph.SVG.tooltips.style.backgroundColor = 'white'; RGraph.SVG.tooltips.style.border = '3px black solid'; RGraph.SVG.tooltips.style.borderWidth = '3px'; </script>