/home/mip/mip/public/template/AdminLTE/plugins/RGraph/demos/bar-millionaire.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 customised to look like the millionaire bar chart</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A Bar chart customised to look like the millionaire bar chart" />
    
</head>
<body>

    <h1>A Bar chart customised to look like the millionaire bar chart</h1>

    
    <canvas id="cvs" width="300" height="250" style="border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px">[No canvas support]</canvas>



    <script>
        labels = [50,20,15,15];
        data   = RGraph.arrayClone(labels);
    
        var bar = new RGraph.Bar({
            id: 'cvs',
            data: data,
            options: {
                textAccessible: true,
                backgroundGridAutofitAlign: false,
                backgroundGridAutofitNumvlines: 8,
                backgroundGridAutofitNumhlines: 10,
                backgroundGridColor: '#6A93CA',
                backgroundGridWidth: 3,
                colors:['Gradient(#EC06D8:#FEB2FB:#FEB2FB)'],
                ymax: 100,
                gutterLeft: 10,
                gutterRight: 10,
                gutterTop: 30,
                gutterBottom: 45,
                ylabels: false,
                labels: ['A','B','C','D'],
                labelsColor: 'yellow',
                noaxes: true,
                textSize: 22,
                textColor: 'rgba(0,0,0,0)',
                textFont: 'Verdana',
                strokestyle: 'rgba(0,0,0,0)'
            }                
        }).grow().on('draw', function ()
        {
            // Add the labels
            for (var i=0; i<4; i++) {
                RGraph.text2(bar.context, {
                    text: labels[i] + '%',
                    x:bar.coords[i][0] + (bar.coords[i][2] / 2),
                    y:30,
                    color: 'white',
                    size: 18,
                    halign: 'center',
                    font: 'Verdana'
                });
            }
        });
    </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="cvs" width="300" height="250" style="border-radius: 6px; background-image: linear-gradient(45deg, black, blue, black); box-shadow: #aaa 2px 2px 2px"&gt;[No canvas support]&lt;/canvas&gt;
    [No canvas support]
&lt;/canvas&gt;
</pre>

    This is the code that generates the chart:
    <pre class="code">
&lt;script&gt;
    labels = [50,20,15,15];
    data   = RGraph.arrayClone(labels);

    var bar = new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            textAccessible: true,
            backgroundGridAutofitAlign: false,
            backgroundGridAutofitNumvlines: 8,
            backgroundGridAutofitNumhlines: 10,
            backgroundGridColor: '#6A93CA',
            backgroundGridWidth: 3,
            colors:['Gradient(#EC06D8:#FEB2FB:#FEB2FB)'],
            ymax: 100,
            gutterLeft: 10,
            gutterRight: 10,
            gutterTop: 30,
            gutterBottom: 45,
            ylabels: false,
            labels: ['A','B','C','D'],
            labelsColor: 'yellow',
            noaxes: true,
            textSize: 22,
            textColor: 'rgba(0,0,0,0)',
            textFont: 'Verdana',
            strokestyle: 'rgba(0,0,0,0)'
        }                
    }).grow().on('draw', function ()
    {
        // Add the labels
        for (var i=0; i&lt;4; i++) {
            RGraph.text2(bar.context, {
                text: labels[i] + '%',
                x:bar.coords[i][0] + (bar.coords[i][2] / 2),
                y:30,
                color: 'white',
                size: 18,
                halign: 'center',
                font: 'Verdana'
            });
        }
    });
&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/mip/public/template/AdminLTE/plugins/RGraph/demos