Dashed line

Example of a dashed line

by Amit Vishwakarma

HTML

<script src="http://www.rgraph.net/libraries/RGraph.common.core.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.bar.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.annotate.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.context.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.common.dynamic.js"></script>
<script src="http://www.rgraph.net/libraries/RGraph.line.js"></script>
<script src="https://www.rgraph.net/libraries/combined.html/RGraph.common.tooltips.js/RGraph.common.dynamic.js/RGraph.line.js/RGraph.bar.js/RGraph.pie.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<canvas id="cvs" width="600" height="250" style="width: 100%; float: right">[No canvas support]</canvas>

JavaScript

$(document).ready(func=function ()
    {
        var canvas = document.getElementById("cvs");

        RGraph.Reset(canvas);

        canvas.width  = $(window).width() * 0.6;
        canvas.height = $(window).width() * 0.25;
        var text_size = Math.min(12, ($(window).width() / 1000) * 10 );
        var linewidth = $(window).width() > 500 ? 2 : 1;
            linewidth = $(window).width() > 750 ? 3 : linewidth;

        // Reset the translation fix so that it gets applied again
        canvas.__rgraph_aa_translated__ = false;
        
        var line = new RGraph.Line({
            id: 'cvs',
            data: [4,8,6,6,3,3,5,1,4,8,6,5,9],
            options: {
                labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                textSize: text_size,
                gutterBottom: 35,
                linewidth: linewidth,
                tickmarks: 'endcircle',
                shadow: true,
                tootltips:[4,8,6,6,3,3,5,1,4,8,6,5,9],
                hmargin: 5
            }
        }).draw();
      
    });
		 window.onresize = func;