/home/mip/public_html/template/AdminLTE/plugins/RGraph/demos/bar-background-grid-dotted.html
<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />

    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    
    <title>A Bar chart with a dotted and dashed background grid</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="This Bar chart shows a dotted and a dashed background grid. Dotted/dashed lines are currently only supported in Chrome" />
    
</head>
<body>

    <h1>A demo of the Chrome-only dotted or dashed background grid</h1>
    
    <p>
        This uses the relatively new Chrome only addition to canvas from the canvas v5 specification - dotted and dashed lines with
        HTML5 canvas. As browsers add support you will be able to use the option in them too but currently (May 2013) it's only
        supported in Chrome.
    </p>
    
    <pre class="code">
obj.Set('background.grid.dashed', true);
obj.Set('background.grid.dotted', true);
</pre>

    <canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>
    <script>
        window.onload = function ()
        {
            var bar = new RGraph.Bar({
                id:'cvs1',
                data: [4,5,3,8,4,9,6,5,3],
                options: {
                    backgroundGridDashed: true,
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                    title: 'A dashed background grid',
                    strokestyle: 'rgba(0,0,0,0)',
                    textAccessible: true
                }
            }).draw();
    
            var bar2 = new RGraph.Bar({
                id: 'cvs2',
                data: [4,5,3,8,4,9,6,5,3],
                options: {
                    labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                    backgroundGridDotted: true,
                    title: 'A dotted background grid',
                    strokestyle: 'rgba(0,0,0,0)',
                    textAccessible: true
                }
            }).draw();
        };
    </script>







    <p></p>

    This goes in the documents header:
    <pre class="code">
&lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.bar.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;canvas id="cvs1" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
&lt;canvas id="cvs2" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;
</pre>

    This is the code that generates the chart:
    <pre class="code">
&lt;script&gt;
    window.onload = function ()
    {
        var bar = new RGraph.Bar({
            id:'cvs1',
            data: [4,5,3,8,4,9,6,5,3],
            options: {
                backgroundGridDashed: true,
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                title: 'A dashed background grid',
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true
            }
        }).draw();

        var bar2 = new RGraph.Bar({
            id: 'cvs2',
            data: [4,5,3,8,4,9,6,5,3],
            options: {
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                backgroundGridDotted: true,
                title: 'A dotted background grid',
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true
            }
        }).draw();
    };
&lt;/script&gt;
</pre>



    <p>
        <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=http://www.rgraph.net', null, 'top=50,left=50,width=600,height=368'); return false"><img src="../images/facebook-large.png" width="200" height="43" alt="Share on Facebook" border="0" title="Visit the RGraph Facebook page" /></a>
        <a href="https://twitter.com/_rgraph" target="_blank" onclick="window.open('https://twitter.com/_rgraph', null, 'top=50,left=50,width=700,height=400'); return false"><img src="../images/twitter-large.png" width="200" height="43" alt="Share on Twitter" border="0" title="Mention RGraph on Twitter" /></a>
        
    </p>

</body>
</html>
Path: home/mip/public_html/template/AdminLTE/plugins/RGraph/demos