<script src="RGraph.common.core.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> bar = new RGraph.Bar({ id: 'cvs', data: [[17,14,9,16,28,2], [22,15,19,16,12,6], [18,15,21,13,11,13], [17,12,12,14,22,3]], options: { noaxes: true, backgroundGridVlines: false, backgroundGridBorder: false, backgroundGridAutofitNumhlines: 3, ylabelsCount: 3, textColor: '#666', textSize: 10, hmargin: 55, hmarginGrouped: 2, colors: ['#E30513', '#1C1C1B', '#86BC24', '#E5007D', '#2F8DCD', '#F9D900'], labels: ['Arbeiter','Angestellte','Selbststandige','Arbeitslose'], unitsPost: ' %', gutterLeft: 50, gutterBottom: 65, gutterTop: 65, title: 'AfD unter Arbeitern und Arbeitslosen starkste Kraft', titleX: 50, titleHalign: 'left', titleColor: 'gray', key: ['SPD','CDU','Grune','Linke','AfD','FDP'], keyPosition: 'gutter', keyPositionY: 320, keyTextSize: 12, tooltipsHighlight: false } }).grow({frames:60}, function (obj) { for (var i=0,tooltips=[]; i<bar.data.length; i++) { tooltips.push('{1}: <b>{2} %</b><br />{3}: <b>{4} %</b><br />{5}: <b>{6} %</b><br />{7}: <b>{8} %</b><br />{9}: <b>{10} %</b><br />11: <b>{12} %</b><br />'.format( key[0], bar.data[i][0], key[1], bar.data[i][1], key[2], bar.data[i][2], key[3], bar.data[i][3], key[4], bar.data[i][4], key[5], bar.data[i][5] )); } bar.set({ tooltips: tooltips, tooltipsEvent: 'mousemove' }); RGraph.tooltips.style.backgroundColor = 'rgba(255,255,255,0.85)'; RGraph.tooltips.style.padding = '10px'; RGraph.tooltips.style.paddingLeft = '20px'; RGraph.tooltips.style.border = '2px solid red'; RGraph.tooltips.style.textAlign = 'left'; // Add the drawing API rect objects that are used to trigger // the tooltips for (var i=0,j=0; i<bar.coords.length; i+=6,j++) { new RGraph.Drawing.Rect({ id: 'cvs', x: bar.coords[i][0], y: bar.get('gutterTop'), width: (bar.coords[i][2] * 6) + (10 * bar.get('hmarginGrouped')), height: bar.canvas.height - bar.get('gutterTop') - bar.get('gutterBottom'), options: { colors: ['red'], fillstyle: 'transparent', tooltips: [tooltips[j]], highlightStroke: 'transparent' } }).draw(); } }); </script>