/home/mip/public_html/template/AdminLTE/plugins/RGraph/demos/line-basic.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.drawing.background.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    
    <title>A basic Line chart</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A basic Line chart" />
     
</head>
<body>

    <h1>A basic line chart</h1>
    
    <p>
        This is a basic Line chart - basic except for the background. A drawing API
        background object is drawn first (the small, faint grid) and then the chart
        is drawn on top, which has the larger, darker grid. In Google Chrome, which
        supports dotted/dashed lines on canvas, the darker gridlines are dashed.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    <script>
        new RGraph.Drawing.Background({
            id: 'cvs',
            options: {
                gutterLeft: 55,
                gutterRight: 35,
                gutterTop: 35,
                gutterBottom: 35,
                backgroundGridAutofitNumvlines:48,
                backgroundGridAutofitNumhlines: 20,
                backgroundGridColor: '#eee'
            }
        }).draw();

        new RGraph.Line({
            id: 'cvs',
            data: [5,4,1,6,8,5,3],
            options: {
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                gutterLeft: 55,
                gutterRight: 35,
                gutterBottom: 35,
                gutterTop: 35,
                title: 'A basic line chart',
                backgroundGridColor: '#aaa',
                backgroundGridDashed: true,
                textAccessible: true,
                scaleZerostart: true,
                labelsOffsety: 5
            }
        }).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.drawing.background.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.line.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;canvas id="cvs" 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;
    new RGraph.Drawing.Background({
        id: 'cvs',
        options: {
            gutterLeft: 55,
            gutterRight: 35,
            gutterTop: 35,
            gutterBottom: 35,
            backgroundGridAutofitNumvlines:48,
            backgroundGridAutofitNumhlines: 20,
            backgroundGridColor: '#eee'
        }
    }).draw();

    new RGraph.Line({
        id: 'cvs',
        data: [5,4,1,6,8,5,3],
        options: {
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            gutterLeft: 55,
            gutterRight: 35,
            gutterBottom: 35,
            gutterTop: 35,
            title: 'A basic line chart',
            backgroundGridColor: '#aaa',
            backgroundGridDashed: true,
            textAccessible: true,
            scaleZerostart: true,
            labelsOffsety: 5
        }
    }).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>



    <p>
        <a href="./">&laquo; Back</a>
    </p>

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