/home/mip/public_html/template/AdminLTE/plugins/RGraph/demos/waterfall-grow.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.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.waterfall.js" ></script>
    
    <title>A Waterfall chart with Grow effect</title>

    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Waterfall chart using the Grow effect" />
     
</head>
<body>

    <h1>A Waterfall chart with Grow effect</h1>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    <script>
        window.onload = function ()
        {
            var waterfall = new RGraph.Waterfall({
                id: 'cvs',
                data: [50,12,-50,-19, -130, -30],
                options: {
                    backgroundGridAutofitNumhlines: 5,
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    title: 'A chart showing income/expenditure',
                    titleY: 10,
                    colors: ['black','red','blue'],
                    strokestyle: 'white',
                    unitsPre: '$',
                    total: true,
                    labels: ['Sales', 'Misc', 'Wages','Fees','Supplies','Food','Gross'],
                    tooltips: [
                        'Total sales of product and services rendered',
                        'Miscellaneous income',
                        'Wages provided to the staff',
                        'Fees (eg bank, transaction)',
                        'Supplies to the office and daily running costs',
                        'Food to keep the staff alive and running at peak efficiency',
                        'Gross income before any taxes have been paid'
                    ],
                    highlightStroke: 'rgba(0,0,0,0)',
                    
                    // In older versions of Firefox this seriously slows down the Grow animation
                    shadow: !RGraph.ISFF,
                    shadowColor: '#aaa',
                    shadowBlur: 5,
                    shadowOffsetx: 0,
                    shadowOffsety: 0,
                    gutterLeft: 70,
                    textSize: 12,
                    xaxispos: 'center'
                }
            }).grow();
        };
    </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.common.dynamic.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.tooltips.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.effects.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.waterfall.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;
    window.onload = function ()
    {
        var waterfall = new RGraph.Waterfall({
            id: 'cvs',
            data: [50,12,-50,-19, -130, -30],
            options: {
                backgroundGridAutofitNumhlines: 5,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                title: 'A chart showing income/expenditure',
                titleY: 10,
                colors: ['black','red','blue'],
                strokestyle: 'white',
                unitsPre: '$',
                total: true,
                labels: ['Sales', 'Misc', 'Wages','Fees','Supplies','Food','Gross'],
                tooltips: [
                    'Total sales of product and services rendered',
                    'Miscellaneous income',
                    'Wages provided to the staff',
                    'Fees (eg bank, transaction)',
                    'Supplies to the office and daily running costs',
                    'Food to keep the staff alive and running at peak efficiency',
                    'Gross income before any taxes have been paid'
                ],
                highlightStroke: 'rgba(0,0,0,0)',
                
                <span>// In older versions of Firefox this seriously slows down the Grow animation</span>
                shadow: !RGraph.ISFF,

                shadowColor: '#aaa',
                shadowBlur: 5,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                gutterLeft: 70,
                textSize: 12,
                xaxispos: 'center',
                
            }
        }).grow();
    };
&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