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: