/home/mip/public_html/template/AdminLTE/plugins/RGraph/demos/bar-segmented.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 segmented Bar chart</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A basic Bar chart" />
</head>
<body>

    <h1>A segmented Bar chart</h1>
    
    <p>
        This isn't supported natively but is quite easy to achieve with two
        canvas tags that are positioned so that one is on top of the other (as you can see below).
        The rear canvas draws the same Bar chart as the front one but without
        any data - so you just see the grid. The front canvas draws the bar chart -
        and then a custom ondraw event uses the standard canvas clearRect() function
        is used to return bits of the top canvas back to transparency - so that the
        grid on the rear canvas shows through.
    </p>

    
    <div style="padding: 15px; display: inline-block; position: relative; width: 750px; height: 350px; ">
        <canvas id="cvs1" width="750" height="350" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas>
        <canvas id="cvs2" width="750" height="350" style="position:absolute; top: 0; left: 0">[No canvas support]</canvas>
    </div>



    <script>
        // This is the data for the chart
        var data = [4,5,2,1,3,4,4];
        

        data.forEach(function (v, k, arr)
        {
            arr[k] = RGraph.arrayPad([], v, 1);
        });




        // This will become the background. Then the white lines that create the
        //segmentation are drawn on the top canvas (which has the full Bar chart on).
        new RGraph.Bar({
            id: 'cvs1',
            data: [0,0,0,0,0,0,0],
            options: {
                colors: ['rgba(0,0,0,0)'],
                noaxes: true,
                ylabels: false,
                gutterLeft: 75
            }
        }).draw();




        new RGraph.Bar({
            id: 'cvs2',
            data: data,
            options: {
                gutterLeft: 75,
                grouping: 'stacked',
                shadow: false,
                colors: [
                    'red',
                    'rgba(255,0,0,0.5)',
                    'rgba(255,0,0,0.25)',
                    'rgba(255,0,0,0.125)',
                    'rgba(255,0,0,0.0625)'
                ],
                colorsReverse: true,
                noaxes: true,
                backgroundGrid: false,
                scaleZerostart: false,
                ylabelsOffsety: 33,
                ylabelsOffsetx: -3,
                ylabelsSpecific: ['Level 5','Level 4','Level 3','Level 2','Level 1',''],
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
            }
        }).on('draw', function (obj)
        {
            var co = obj.context;
            RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(0) - 5);
            RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(1) - 5);
            RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(2) - 5);
            RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(3) - 5);
            RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(4) - 5);
            RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(5) - 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.bar.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;div style="padding: 15px"&gt;
    &lt;canvas id="cvs1" width="750" height="250" style="position:absolute; top: 0; left: 0"&gt;[No canvas support]&lt;/canvas&gt;
    &lt;canvas id="cvs2" width="750" height="250" style="position:absolute; top: 0; left: 0"&gt;[No canvas support]&lt;/canvas&gt;
&lt;/div&gt;
</pre>

    This is the code that generates the chart:
    <pre class="code">
&lt;script&gt;
    <span>// This is the data for the chart</span>
    var data = [4,5,2,1,3,4,4];
    

    data.forEach(function (v, k, arr)
    {
        arr[k] = RGraph.arrayPad([], v, 1);
    });




    <span>// This will become the background. Then the white lines that create the
    // segmentation are drawn on the top canvas (which has the full Bar chart on).</span>
    new RGraph.Bar({
        id: 'cvs1',
        data: [0,0,0,0,0,0,0],
        options: {
            colors: ['rgba(0,0,0,0)'],
            noaxes: true,
            ylabels: false,
            gutterLeft: 75
        }
    }).draw();




    new RGraph.Bar({
        id: 'cvs2',
        data: data,
        options: {
            gutterLeft: 75,
            grouping: 'stacked',
            shadow: false,
            colors: [
                'red',
                'rgba(255,0,0,0.5)',
                'rgba(255,0,0,0.25)',
                'rgba(255,0,0,0.125)',
                'rgba(255,0,0,0.0625)'
            ],
            colorsReverse: true,
            noaxes: true,
            backgroundGrid: false,
            scaleZerostart: false,
            ylabelsOffsety: 33,
            ylabelsOffsetx: -3,
            ylabelsSpecific: ['Level 5','Level 4','Level 3','Level 2','Level 1',''],
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    }).on('draw', function (obj)
    {
        var co = obj.context;
        RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(0) - 5);
        RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(1) - 5);
        RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(2) - 5);
        RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(3) - 5);
        RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(4) - 5);
        RGraph.path2(co, 'cr 0 % 1000 10', obj.getYCoord(5) - 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