An SVG black and white Line chart
View the bare-bones version of this demo with any interactive features or animations enabled

This is an SVG
version of acanvas
Line chart which you can see in
the download archive.
So this Line chart looks like a simple black and white affair - and it is, though to get it looking like it does you need to set a few configuration options.
The linewidth
has been increased (and also the linewidth
of the X-axis
and Y-axis
), the
tickmarks on the axes have been disabled, the number of Y-axis
labels has been reduced
(and units appended), the
margins have been tweaked, the background grid has been disabled and the size and font of the text
on the chart has been altered.
However, this is not all! There's also a draw
event listener that draws the overhang
at the end of the axes. This is done using the RGraph.SVG.create
function (because the
chart isSVG
the draw
event
doesn't have to be used - you could just place the code that draws the overhangs after the main
chart code if you wanted to). The function that does this is:
// The create() function is the main RGraph function used to create SVG elements RGraph.SVG.create({ // Give it the chart object (the obj variable) and // stipulate the type of element to be created svg: obj.svg, type: 'path', // Set the parent of the new element parent: obj.svg.all, // A list of attributes for the new tag attr: { // The d attribute of the path tag is the path that should be drawn. Here // the RGraph format() function is used to create a custom string with // various replacements (so that there's not just a lot of concatenation // and hence the path is a bit more readable. 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 ), // Set the colors and the linewidth stroke: 'black', 'stroke-width': 7, fill: 'rgba(0,0,0,0)' }
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 style="float: right"> <div id="cc" style="width:600px; height: 250px"></div> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag: