/home/mip/public_html/template/AdminLTE/plugins/RGraph/demos/bipolar-world-population.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.bipolar.js" ></script>
    
    <title>A basic Bipolar chart</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A straight-forward Bipolar chart" />
     
</head>
<body>

    <h1>A Bipolar chart showing world population by age</h1>

    <canvas id="cvs" width="800" height="1000">[No canvas support]</canvas>
    
    <script>
        window.onload = function ()
        {
            //
            // Create some data
            //
            var female   = RGraph.arrayReverse([0.63,0.62,0.62,0.64,0.65,0.64,0.64,0.64,0.64,0.63,0.65,0.66,0.65,0.65,0.65,0.65,0.68,0.68,0.68,0.70,0.72,0.72,0.69,0.68,0.67,0.67,0.68,0.66,0.68,0.68,0.68,0.69,0.65,0.64,0.63,0.61,0.63,0.62,0.63,0.66,0.70,0.71,0.67,0.66,0.66,0.67,0.72,0.73,0.74,0.74,0.75,0.75,0.73,0.73,0.73,0.70,0.70,0.67,0.65,0.63,0.61,0.60,0.58,0.58,0.60,0.45,0.45,0.44,0.45,0.40,0.37,0.35,0.33,0.32,0.30,0.29,0.28,0.26,0.25,0.25,0.24,0.24,0.22,0.21,0.20,0.18,0.17,0.15,0.14,0.12,0.10,0.09,0.07,0.06,0.04,0.03,0.03,0.02,0.01,0.01,0.02]);
            var male     = RGraph.arrayReverse([0.66,0.65,0.65,0.67,0.68,0.67,0.67,0.67,0.66,0.66,0.68,0.69,0.68,0.68,0.68,0.68,0.70,0.71,0.73,0.74,0.75,0.75,0.72,0.71,0.69,0.70,0.70,0.68,0.69,0.69,0.68,0.70,0.65,0.64,0.63,0.61,0.63,0.61,0.62,0.65,0.69,0.70,0.66,0.65,0.65,0.66,0.70,0.72,0.72,0.71,0.72,0.73,0.71,0.70,0.69,0.67,0.66,0.63,0.61,0.58,0.57,0.55,0.54,0.53,0.56,0.41,0.40,0.39,0.40,0.35,0.32,0.30,0.28,0.27,0.25,0.24,0.22,0.20,0.19,0.18,0.17,0.17,0.15,0.14,0.12,0.11,0.10,0.08,0.07,0.06,0.05,0.04,0.03,0.02,0.02,0.01,0.01,0.01,0.00,0.00,0.00]);
            var tooltips = [];
            var colors   = [];

            for (var i=0; i<male.length; i+=1) {tooltips.push('Age ' + String(100 - i) + ': ' +  String(male[i]));colors.push('#f66');}
            for (var i=0; i<female.length; i+=1) {tooltips.push('Age ' + String(100 - i) + ': ' +  String(female[i]));colors.push('blue');}

            //
            // Create and show the chart
            //
            var bipolar = new RGraph.Bipolar({
                id: 'cvs',
                left: male,
                right: female,
                options: {
                    textAccessible: true,
                    gutterBottom: 50,
                    backgroundGrid: false,
                    scaleDecimals: 1,
                    numyticks: 0,
                    labels: [
                        100,'','','','','','','','','',
                        80,'','','','','','','','','',
                        60,'','','','','','','','','',
                        40,'','','','','','','','','',
                        20,'','','','','','','','','',
                        '0'
                    ],
                    textSize: 26,
                    textColor: '#bbb',
                    tooltips: tooltips,
                    tooltipsEvent: 'onmousemove',
                    colors: colors,
                    colorsSequential: 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.common.dynamic.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.tooltips.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.bipolar.js"&gt;&lt;/script&gt;
</pre>
    
    Put this where you want the chart to show up:
    <pre class="code">
&lt;canvas id="cvs" width="800" height="1000"&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 female   = RGraph.arrayReverse([0.63,0.62,0.62,0.64,0.65,0.64,0.64,0.64,0.64,0.63,0.65,0.66,0.65,0.65,0.65,0.65,0.68,0.68,0.68,0.70,0.72,0.72,0.69,0.68,0.67,0.67,0.68,0.66,0.68,0.68,0.68,0.69,0.65,0.64,0.63,0.61,0.63,0.62,0.63,0.66,0.70,0.71,0.67,0.66,0.66,0.67,0.72,0.73,0.74,0.74,0.75,0.75,0.73,0.73,0.73,0.70,0.70,0.67,0.65,0.63,0.61,0.60,0.58,0.58,0.60,0.45,0.45,0.44,0.45,0.40,0.37,0.35,0.33,0.32,0.30,0.29,0.28,0.26,0.25,0.25,0.24,0.24,0.22,0.21,0.20,0.18,0.17,0.15,0.14,0.12,0.10,0.09,0.07,0.06,0.04,0.03,0.03,0.02,0.01,0.01,0.02]);
        var male     = RGraph.arrayReverse([0.66,0.65,0.65,0.67,0.68,0.67,0.67,0.67,0.66,0.66,0.68,0.69,0.68,0.68,0.68,0.68,0.70,0.71,0.73,0.74,0.75,0.75,0.72,0.71,0.69,0.70,0.70,0.68,0.69,0.69,0.68,0.70,0.65,0.64,0.63,0.61,0.63,0.61,0.62,0.65,0.69,0.70,0.66,0.65,0.65,0.66,0.70,0.72,0.72,0.71,0.72,0.73,0.71,0.70,0.69,0.67,0.66,0.63,0.61,0.58,0.57,0.55,0.54,0.53,0.56,0.41,0.40,0.39,0.40,0.35,0.32,0.30,0.28,0.27,0.25,0.24,0.22,0.20,0.19,0.18,0.17,0.17,0.15,0.14,0.12,0.11,0.10,0.08,0.07,0.06,0.05,0.04,0.03,0.02,0.02,0.01,0.01,0.01,0.00,0.00,0.00]);
        var tooltips = [];
        var colors   = [];

        for (var i=0; i&lt;male.length; i+=1) {tooltips.push('Age ' + String(100 - i) + ': ' +  String(male[i]));colors.push('#f66');}
        for (var i=0; i&lt;female.length; i+=1) {tooltips.push('Age ' + String(100 - i) + ': ' +  String(female[i]));colors.push('blue');}

        var bipolar = new RGraph.Bipolar({
            id: 'cvs',
            left: male,
            right: female,
            options: {
                textAccessible: true,
                gutterBottom: 50,
                backgroundGrid: false,
                scaleDecimals: 1,
                numyticks: 0,
                labels: [
                    100,'','','','','','','','','',
                    80,'','','','','','','','','',
                    60,'','','','','','','','','',
                    40,'','','','','','','','','',
                    20,'','','','','','','','','',
                    '0'
                ],
                textSize: 26,
                textColor: '#bbb',
                tooltips: tooltips,
                tooltipsEvent: 'onmousemove',
                colors: colors,
                colorsSequential: true
            }
        }).draw();
    };
&lt;/script&gt;
</pre>

    <p>
        <a href="./">&laquo; Back</a>
    </p>
    <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