This is an SVG version of a canvas Line chart.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.line.js"></script>Put this where you want the chart to show up:
<div id="cc" style="width:700px; height: 300px"></div>This is the code that generates the chart:
<script> var line = new RGraph.SVG.Line({ id: 'cc', data: [0,10,46,13,74,100,51], options: { linewidth: 7, colors: ['black'], shadow: false, xaxisTickmarks: false, xaxisLinewidth: 7, yaxisTickmarks: false, yaxisLinewidth: 7, yaxisLabelsCount: 2, yaxisScaleUnitsPost: '%', tickmarksStyle: 'filledcircle', tickmarksSize: 15, marginLeft: 125, marginRight: 5, marginBottom: 25, marginTop: 20, backgroundGrid: false, textSize: 24, textFont: 'Verdana', hmargin: 35, yaxisLabelsOffsetx: -25 } // Draw the "tails" to the axes }).on('draw', function (obj) { var prop = obj.properties, size = 20; var path = RGraph.SVG.create({ svg: obj.svg, type: 'path', parent: obj.svg.all, attr: { d: 'M {1} {2} L {3} {4} L {5} {6}'.format( prop.marginLeft - size, obj.height - prop.marginBottom, prop.marginLeft, obj.height - prop.marginBottom, prop.marginLeft, obj.height - prop.marginBottom + size ), stroke: 'black', 'stroke-width': 7, fill: 'rgba(0,0,0,0)' } }); $cl(path); }).trace({frames: 60}); </script>