# A green Line chart with indicator lines

This goes in the documents header:

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

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250" style="background-color: #70AD47">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var line = new RGraph.Line({
                id: 'cvs',
                data: [
                    1.2,1.5,1.4,1.6,1.3,1.2,1.4,1.45,1.6,1.4,
                    1.23,1.33,1.29,1.5,1.4,1.43,1.2,1.1,1.09,1.4,
                    22.5,20.5,29.63,23.44,27.54,51.23,60.23
                ],
                options: {
                    title: 'A green line chart with custom drawing (the vertical lines)',
                    titleColor: 'white',
                    backgroundColor: '#70AD47',
                    backgroundGrid: false,
                    colors: ['white'],
                    tickmarks: null,
                    noyaxis: true,
                    textColor: 'white',
                    unitsPost: ',000k',
                    gutterLeft: 70,
                    gutterTop: 35,
                    gutterRight: 35,
                    gutterBottom: 55,
                    noxicks: true,
                    axisColor: '#ddd',
                    numxticks: 0,
                    textSize: 12,
                    labels: [
                        '10-Sep','\n11-Sep','12-Sep','\n13-Sep','14-Sep','\n15-Sep','16-Sep','\n17-Sep','18-Sep','\n19-Sep',
                        '20-Sep','\n21-Sep','22-Sep','\n23-Sep','24-Sep','\n25-Sep','26-Sep','\n27-Sep','28-Sep','\n29-Sep',
                        '30-Sep','\n1-Oct','2-Oct','\n3-Oct','4-Oct','\n5-Oct','6-Oct','\n7-Oct'
                    ],
                    textAccessible: true
                }
            }).on('draw', function (obj)
            {
                var co = obj.context;

                for (var i=0; i<obj.coords.length; ++i) {

                    var grad,
                        coords = obj.coords[i],
                        y2 = obj.canvas.height - obj.get('gutterBottom'),
                        co = obj.context

                    grad = RGraph.LinearGradient(
                        obj,
                        coords[0], coords[1],coords[0], y2,
                        'white', 'rgba(255,255,255,0)'
                    );
                    co.strokeStyle = grad;

                    RGraph.path2(
                        co,
                        'b m % % l % % s',
                        coords[0], coords[1],
                        coords[0], y2
                    );
                }
            }).draw();
        };
    </script>