An SVG black and white Line chart

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:

<script>
    // This function draws the tails to the axes. It gets the linewidth directly from the
    // line chart object whilst the tailsize is hardcoded to 20.
    function drawTails (obj)
    {
        var prop      = obj.properties,
            linewidth = prop.linewidth;

        // A single path command that draws both of the overhangs on both axes
        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 - 20 + 5,
                    obj.height - prop.marginBottom,
                    prop.marginLeft,
                    obj.height - prop.marginBottom,
                    prop.marginLeft,
                    obj.height - prop.marginBottom + 20 - 5
                ),
                stroke: 'black',
                'stroke-width': linewidth,
                fill: 'rgba(0,0,0,0)'
            }
        });
    }

    // Create the Line chart. Nothing special is done here though note
    // that the background grid is disabled and the number of Y-axis
    // labels is reduced.
    line = new RGraph.SVG.Line({
        id: 'cc',
        data: [0,10,46,13,74,100,51],
        options: {
            linewidth: 7,
            colors: ['black'],
            shadow: false,
            xaxisTickmarks: false,
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            yaxisTickmarks: false,
            
            // Reduce the amount of Y labels. The number of Y labels does not
            // include zero so you'll get three labels here in total
            yaxisLabelsCount: 2,

            yaxisScaleUnitsPost: '%',
            tickmarksStyle: 'filledcircle',
            tickmarksSize: 12,
            marginRight: 10,
            marginTop: 20,
            backgroundGrid: false,
            textFont: 'Verdana',
            responsive: [
                {maxWidth: null,width: 650,height: 250,options: {yaxisLabelsOffsetx: -25,marginLeft: 105,marginBottom: 55,marginInner: 35,tickmarksSize: 12,linewidth: 7,textSize: 18,xaxisLinewidth: 7,yaxisLinewidth: 7},parentCss: {'float':'right', textAlign:'center'}},
                {maxWidth: 900,width: 500,height: 175,options: {yaxisLabelsOffsetx: -10,marginLeft: 65,marginBottom: 30,marginInner: 20,tickmarksSize: 8,linewidth: 5,textSize: 12,xaxisLinewidth: 5,yaxisLinewidth: 5},parentCss: {'float':'none', textAlign:'center'}}
            ]
        }
    
    // The draw event adds the overhang to each of the axes
    }).on('draw', drawTails)
    
    // Use the trace() effect to draw the chart setting the number of
    // frames used by the animation to 60
    .trace({frames: 60});
</script>