A floating Line chart

This is a demo of a Line chart that was inspired by an example that was showcased on the NVD website.

It's a filled Line chart that has the filledAccumulative and the spline options enabled.

And importantly, the first color for the chart is transparent - making it seem like the rest of the datasets are "floating".

The rest of the configuration is quite straightforward - the vertical grid lines are turned off and the colors are a custom set. There are also labels specified (the labels are numbers - though this does NOT make it a scale. The Line chart x-axis is NOT scaled).

The responsive configuration reduces the size of the svg tag and removes the css float.

Note: There's a canvas version of this chart in the download (called demos/line-nvd.html) where the datasets are traced sequentially (so the datasets are traced one at a time and when one dataset finishes tracing the next starts).

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: 600px; height: 250px" id="chart-container"></div>
</div>

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

<script>
    // Create the Line chart and give it all of the data that's to be shown
    // on the chart. There's four datasets but so that the lines appear to
    // be 'floating' the first dataset has a transparent color. The first
    // line is the bottom edge of the set of lines.
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [84,65,3,15,12,22,95,5,35,45,85,85,23,45,62,52,45,31,53,66],
            [64,12,56,25,20,80,85,61,81,56,45,32,91,52,86,23,45,56,51,48],
            [48,5,23,12,16,36,49,130,52,95,45,21,65,35,28,75,59,74,86,23],
            [95,65,32,12,100,8,152,63,52,54,85,45,12,13,15,32,64,84,54,66]
        ],
        options: {
            marginLeft: 45,
            filled: true,
            filledAccumulative: true,
            
            // Here's the colors being set - note the first is transparent
            // so we don't see it.
            colors: ['transparent', '#FDA354', '#C4D6ED', '#609EC8'],

            spline: true,

            // Turn off the background grid vertical lines and its border
            backgroundGridVlines: false,
            backgroundGridBorder: false,

            xaxis: false,
            yaxis: false,
            textSize: 14,
            xaxisLabels: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20'],
            responsive: [
                {maxWidth:null,width:600,height:250,parentCss:{'float':'right',textAlign: 'none'}},
                {maxWidth:850, width:450,height:200,parentCss:{'float':'none',textAlign:'center'}}
                
            ]
        }
    
    // Animate the chart with the trace() effect and add some responsive capability to
    // accommodate both large and small screens
    }).trace();
</script>