A Line chart with a highlighted section

Here we have an example of a dark-themed SVG Line chart that has a section of it highlighted. The standard Line is a filled Line object that does NOT use the filledAccumulative option - it uses transparency in the colors instead so that you can see datasets at the back of other datasets.

The thing that differentiates this demo is the fact that once rendered there are two rectangles placed over the chart - one on the left-hand-side and one on the right-hand-side. This leaves a section in the middle of those two rectangles, that has a highlighted appearance.

As it is on this chart, the section that's highlighted has no real meaning - but this doesn't have to be the case and it could highlight certain entries or a range on the chart (for example, it could be a horizontal highlight rectangle).

The responsive function simply changes the SVG tag from being floated right to not having any float at all.

Because adding the responsive function means that the chart is redrawn whenever the window size changes (ie when you resize the browser) the two covers are drawn in the draw event and the nodes are assigned to global variables. These coverings are removed before the chart is redrawn so they don't accumulate on top of each other.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="float: right">
    <div style="width: 450px; height: 200px; display: inline-block; background-color: black" id="cc"></div>
</div>

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

<script>
    new RGraph.SVG.Line({
        id: 'cc',
        data: [
            [22,45,56,53,45,23,12,19,43,56,56,76,64,35,22],
            [13,18,33,23,43,45,56,43,45,12,45,53,56,56,51],
            [48,56,45,35,21,56,48,45,45,56,53,65,35,22,21],
            [12,23,25,22,21,32,24,21,12,53,12,32,22,33,12]
        ],
        options: {
            spline: true,
            filled: true,
            colors: [
                'rgba(146,223,179,0.75)',
                'rgba(109,194,189,0.75)',
                'rgba(173,136,190,0.75)',
                'rgba(84,112,133,0.75)'
            ],
            backgroundGridColor: '#666',
            textColor: 'white',
            xaxisLabels: ['Rich','\nTerry','Fay','\nHoolio','Bob','\nCarl','Pob','\nNeil','Matt','\nKev','Jill','\nLou','Luis','\nPete','John'],
            key: ['H67','JK89','GB88','SX95'],
            keyLabelsColor: 'white',
            keyLabelsBackground: 'black',
            textSize: 10,
            //xaxisLabelsAngle: 45,
            marginBottom:45,
            marginTop:25
        }
    }).on('draw', function (obj)
    {
        // Remove previous rect tags from the SVG tag
        if (typeof r1 === 'object') r1.parentNode.removeChild(r1);
        if (typeof r2 === 'object') r2.parentNode.removeChild(r2);

        var x1 = obj.coords[5][0];
        var x2 = obj.coords[8][0];

        // These cover the left and right sides of the chart in a dark,
        // semi-transparent rect
        r1 = RGraph.SVG.create({
            svg: obj.svg,
            type: 'rect',
            attr: {
                x: 35,
                y: 35,
                width: x1 - 35,
                height: 130,
                fill: 'rgba(0,0,0,0.35)'
            }
        });

        r2 = RGraph.SVG.create({
            svg: obj.svg,
            type: 'rect',
            attr: {
                x: x2,
                y: 35,
                width: 200,
                height: 130,
                fill: 'rgba(0,0,0,0.3)'
            }
        });
    }).draw().responsive([
        {maxWidth: null,parentCss: {'float':'right',textAlign:'none'}},
        {maxWidth: 700,parentCss: {'float':'none',textAlign:'center'}}
    ]);
</script>