# A line chart showing US prison population

« Back

Corrections Corporation of America is founded
Sentencing Reform Act passed
Three strikes law enacted in Washington
Three strikes laws enacted in California, Colorado, Connecticut, Indiana, Kansas, Nevada, North Dakota
Three strikes laws enacted in Arkansas, Georgia, Maryland, Montana,
New Jersey, New Mexico, North Carolina, Pennsylvania, South Carolina,
Utah, Vermont, Wisconsin
Three strikes laws enacted in Florida, Tennessee, Virginia
Substance Abuse and Crime Prevention Act passed in California

This goes in the documents header:

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

Put this where you want the chart to show up:

    <div style="display: none">
        <div id="1983"><a href="http://en.wikipedia.org/wiki/Corrections_Corporation_of_America" rel="nofollow">Corrections Corporation of America</a> is founded</a></div>
        <div id="1984"><a href="http://www.enotes.com/major-acts-congress/sentencing-reform-act" rel="nofollow">Sentencing Reform Act</a> passed</a></div>
        <div id="1993"><a href="http://en.wikipedia.org/wiki/Three_strikes_law" rel="nofollow">Three strikes law</a> enacted in Washington</div>
        <div id="1994"><a href="http://en.wikipedia.org/wiki/Three_strikes_law" rel="nofollow">Three strikes laws</a> enacted in California, Colorado, Connecticut, Indiana, Kansas, Nevada, North Dakota</div>
        <div id="1995"><a href="http://en.wikipedia.org/wiki/Three_strikes_law" rel="nofollow">Three strikes laws</a> enacted in Arkansas, Georgia, Maryland, Montana,<br/> New Jersey, New Mexico, North Carolina, Pennsylvania, South Carolina,<br/> Utah, Vermont, Wisconsin</div>
        <div id="1996"><a href="http://en.wikipedia.org/wiki/Three_strikes_law" rel="nofollow">Three strikes laws</a> enacted in Florida, Tennessee, Virginia</div>
        <div id="2000"><a href="http://en.wikipedia.org/wiki/California_Proposition_36_%282000%29" rel="nofollow">Substance Abuse and Crime Prevention Act</a> passed in California</div>
    </div>

    <style>
        .tooltip {
            background-color: #efefef !important;
            font: 10px Arial, sans-serif !important;
            padding: 3px;
            border-color: #999 !important;
        }
    </style>

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

This is the code that generates the chart:

    <script>
        var data = [
            0.140652855, 0.156898821, 0.17392137, 0.181314164, 0.190083403,
            0.204936627, 0.219226948, 0.232290443, 0.248576086, 0.276869432,
            0.297991221, 0.314307072, 0.333516451, 0.352770502, 0.380347379,
            0.410398994, 0.425115587, 0.439371182, 0.45309086, 0.47202617,
            0.466500291, 0.466535618, 0.475166227, 0.478867548, 0.485024967,
            0.489713802, 0.500002324, 0.503305103, 0.500315325, 0.496573444
        ];

        var line = new RGraph.Line({
            id:'cvs',
            data: data,
            options: {
                title: 'Interactive chart of percent U.S. population incarcerated.',
                titleFont: 'Arial',
                titleY: 10,
                textColor: '#333',
                textFont: 'Arial',
                textSize: 12,
                gutterLeft: 45,
                gutterBottom: 55,
                backgroundBarcolor1: 'rgba(255,255,255,1)',
                backgroundBarcolor2: 'rgba(255,255,255,1)',
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                backgroundAutofitNumvlines: 29,
                colors: ['rgb(46,162,200)'],
                filled: true,
                fillstyle: 'Gradient(white:rgba(77,193,231,0.75))',
                linewidth: 0.5,
                labels: ['1980', '\r\n1981', '1982', '\r\n1983', '1984', '\r\n1985','1986','\r\n1987', '1988', '\r\n1989', '1990', '\r\n1991', '1992', '\r\n1993', '1994', '\r\n1995', '1996', '\r\n1997', '1998', '\r\n1999', '2000', '\r\n2001', '2002', '\r\n2003', '2004', '\r\n2005', '2006', '\r\n2007', '2008', '\r\n2009'],
                scaleDecimals: 1,
                tickmarks: myTick,
                tooltips: ['id:1980', 'id:1981', 'id:1982', 'id:1983', 'id:1984', 'id:1985','id:1986','id:1987', 'id:1988', 'id:1989', 'id:1990', 'id:1991', 'id:1992', 'id:1993', 'id:1994', 'id:1995', 'id:1996', 'id:1997', 'id:1998', 'id:1999', 'id:2000', 'id:2001', 'id:2002', 'id:2003', 'id:2004', 'id:2005', 'id:2006', 'id:2007', 'id:2008', 'id:2009'],
                tooltipsCssClass: 'tooltip',
                noxaxis: true,
                numxticks: 29,
                shadow: false,
                textAccessible: true,
                highlightStyle: 'halo'
            }
        }).draw();

        function myTick (obj, data, value, index, x, y, color, prevX, prevY)
        {
            var co = obj.canvas.getContext("2d");
            co.fillStyle = "white";

            if(   index === 3
               || index === 4
               || index === 20
               || (index >= 13 && index<= 16)){
                co.fillStyle = "#4C2288";
            }

            // Draw the custom tickmark
            RGraph.path2(co, 'b a % % % 0 6.2830 false c s null f null',
                x, y, 3
            );

        }
    </script>