<script src="../libraries/rgraph.common.core.js" ></script> <script src="../libraries/rgraph.common.dynamic.js" ></script> <script src="../libraries/rgraph.common.tooltips.js" ></script> <script src="../libraries/rgraph.line.js" ></script>Put this where you want the chart to show up:
<canvas id="cvs" width="800" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> years = [1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996]; data = [4,8,6,5,6,5,3,2,3,1,0,1,0,3,2,5,4,5,4,6,5,3,8,7]; tooltips = []; color = '#D10A11'; data.forEach(function (v, k, arr) { tooltips[k] = '{1}<p align="center"><b>Deaths:</b> {2}</p>'.format( years[k], RGraph.random(300,500) ); }); new RGraph.Line({ id: 'cvs', data: data, options: { labels: [ 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec', 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ], textSize: 10, colors: [color], noaxes: true, gutterLeft: 50, backgroundGridColor: '#ddd', backgroundGridVlines: false, backgroundGridBorder: false, backgroundGridAutofitNumhlines: 3, ylabelsCount: 3, unitsPost: 'k', tickmarks: null, shadow: false, linewidth: 3, textColor: '#888', ymax: 12, tooltips: function (index) { return tooltips[index]; }, highlightStyle: 'halo' } }).draw().on('tooltip', function (obj) { var tooltip = RGraph.Registry.get('chart.tooltip'); tooltip.style.borderColor = obj.get('colors')[0]; }); // Change some of the CSS that gets applied to the tooltips RGraph.tooltips.style.padding = '10px'; RGraph.tooltips.style.paddingBottom = '5px'; RGraph.tooltips.style.backgroundColor = 'white'; RGraph.tooltips.style.textAlign = 'left'; RGraph.tooltips.style.border = '3px solid black'; </script>