A simple SVG Line chart

Here's a nice, simply-presented svg Line chart. It has no background grid, a large marginInner setting (which was, until version 5.01, called hmargin - but is now called marginInner) larger than usual text and an extra little bit of text that's added using the labelsAboveSpecific property. The previous way of adding this text was to use the RGraph api, and because it's an svg chart it did not need to be added in the draw event. Now though, it's added using the much simpler labelsAboveSpecific property and the label is styled using the labelsAbove* properties. Using the RGraph properties also makes the text easier to manipulate when you're making use of the responsive function.

The chart has a responsive section that reduces the size of a few properties and also removes the css float from the svg tag.

This goes in the documents header:

<script src="../libraries/RGraph.svg.common.core.js" ></script>
<script src="../libraries/RGraph.svg.line.js" ></script>

Put this where you want the chart to show up:

<div style="float: right">
    <div style="width:650px; height: 250px" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<script>    
        // This is the data for the Line chart. A simple JavaScript array.
        data = [500,600,800,720,900,1100];
        
        // Create the labelsAboveSpecific array based on the data
        labelsAbove = RGraph.SVG.arrayPad([],data.length,' ');
        labelsAbove[labelsAbove.length - 1] = data[data.length - 1];

        // Create the Line chart. Give it the data that's defined above.
        // There's nothing notable about the configuration.
        line = new RGraph.SVG.Line({
            id: 'chart-container',
            data: data,
            options: {
                colors: ['#00AD4B'],
                backgroundGrid: false,
                xaxisLabels: ['February','March','April','May','June','July'],
                xaxisTickmarks: false,
                yaxisTickmarks: false,
                backgroundGridColor: '#999',
                tickmarksStyle: 'circle',
                marginLeft: 75,
                labelsAbove: true,
                labelsAboveSpecific: labelsAbove,
                labelsAboveBold: true,
                labelsAboveOffsety:-25,
                responsive: [
                    {maxWidth:null,width:650,height:250,options:{linewidth:5,tickmarksSize: 8,textSize: 16,marginInner: 50,'data-textsize': 20,labelsAboveSize: 20,labelsAboveOffsety:-25},parentCss:{'float':'right',textAlign:'none'}},
                    {maxWidth:900,width:400,height:200,options:{linewidth:3,tickmarksSize: 4,textSize: 10,marginInner: 30,'data-textsize': 14,labelsAboveSize: 12,labelsAboveOffsety:-15},parentCss:{'float':'none',textAlign:'center'}}
                ]
            }
        }).draw();
    </script>