# A combined bar/line chart

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.line.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            /**
            * Create the data and colors
            */
            var barData = [];
            var lineData = [];
            var colors = [];
            for (var i=0; i<60; ++i) {
                if (i < 30) {
                    barData[i] = RGraph.random(-100, 0);
                    colors[i] = '#318CBD';
                } else {
                    barData[i] = RGraph.random(0, 100);
                    colors[i] = '#BD3929';
                }

                lineData[i] = (((i/60) * 200) - 100) * RGraph.random(0, 10);
            }

            var bar = new RGraph.Bar({
                id: 'cvs',
                data: barData,
                options: {
                    shadowBlur: 1,
                    shadowOffsetx: 1,
                    shadowOffsety: 1,
                    hmargin: 1,
                    gutterLeft: 35,
                    colors: colors,
                    colorsSequential: true,
                    xaxispos: 'center',
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    noyaxis: true,
                    ymax: 100,
                    gutterBottom: 50,
                    strokestyle: 'rgba(0,0,0,0)',
                    textAngle: 30,
                    xlabelsOffset: 8,
                    labels: [
                        '1987', '\n1988','1989','\n1990','1991',
                        '\n1992', '1993','\n1994','1995','\n1996',
                        '1997', '\n1998','1999','\n2000','2001',
                        '\n2002','2003','\n2004','2005','\n2006',
                        '2007','\n2008','2009','\n2010','2011',
                        '\n2012','2013','\n2014','2015','\n2016'
                    ],
                    textAccessible: true
                }
            })

            /**
            * Now add the line chart
            */
            var line = new RGraph.Line({
                id: 'cvs',
                data: lineData,
                options: {
                    colors: ['#FFD600'],
                    xaxispos: 'center',
                    linewidth: 3,
                    shadowOffsetx: 0,
                    shadowOffsety: 0,
                    shadowBlur: 5,
                    tickmarks: false,
                    gutterLeft: 35,
                    combinedchartEffect: 'trace',
                    combinedchartEffectOptions: '{frames: 30}'
                }
            })

            /**
            * Create the combined class
            */
            combo = new RGraph.CombinedChart([bar, line]);
            combo.draw();
        };
    </script>

« Back