How to draw a vertical line chart

Share RGraph:   

Summary
A guide for drawing a vertical line chart. Vertical line charts aren't one of the supported base types of charts - but can be accomplished by using the Scatter chart

[No canvas support]

Vertical line charts are not supported natively in RGraph however they can be achieved using the Scatter chart. With this chart you can specify the X and Y coordinates and a connecting line can be shown as in the example.

Below is the code that is necessary to achieve the vertical line chart.


<script>
    window.onload = (function ()
    {
        var scatter = new RGraph.Scatter({
            id: 'cvs',
            data: [[76, 6.5],[34,5.5],[12,4.5],[48,3.5],[43,2.5],[14,1.5],[5,0.5]],
            options: {
                xmax: 100,
                ymax: 7,
                line: true,
                lineLinewidth: 3,
                backgroundGridAutofitNumhlines: 14,
                backgroundGridAutofitNumvlines: 5,
                ylabelsSpecific: [
                    '', 'Monday',
                    '', 'Tuesday',
                    '', 'Wednesday',
                    '', 'Thursday',
                    '', 'Friday',
                    '', 'Saturday',
                    '', 'Sunday',
                    ''
                ],
                gutterLeft: 75,
                xscale: true,
                numyticks: 14,
                tickmarks: null,
                textAccessible: true,
                textSize: 14
            }
        }).draw();
    })
</script>

Comments

Add a new comment...