Donor_Age.csv

## bar.js
$.get('Donor_Age.csv', function(data) {
    $('#chart1').highcharts({
        "data": {
            csv: data
            },

	"chart": {
		"type": "column",
		"inverted": true,
		"height": 400,
		"zoomType": "x",
        "style": {
			"fontFamily": "Palatino Linotype"
		}
	},
	"plotOptions": {
		"series": {
			"stacking": "percent"
		}
	},
	"title": {
		"text": "Deceased Donors Recovered in the U.S. by Donor Age"
	},
	"yAxis": {
		"title": {
			"text": "Percentage"
		}
	},
	"xAxis": {
		"title": {
			"text": "Year"
		},
		"type": "category"
	},
	"legend": {
		"y": 6,
		"x": 2,
		"borderColor": "rgba(144, 144, 144, 0.81)"
	},
	"series": [
		{
			"index": 7,
			"color": "#e5f2ff",
			"name": "< 1 Year",
		},
		{
			"index": 6,
			"color": "#99ccff",
			"name": "1-5 Years",
		},
		{
			"index": 5,
			"color": "#66b2ff",
			"name": "6-10 Years",
		},
		{
			"index": 4,
			"color": "#3399ff",
			"name": "11-17 Years",
		},
		{
			"index": 3,
			"color": "#007fff",
			"name": "18-34 Years",
		},
		{
			"index": 2,
			"color": "#0066cc",
			"name": "35-49 Years",
		},
		{
			"index": 1,
			"color": "#004c99",
			"name": "50-64 Years",
		},
		{
			"index": 0,
			"color": "#003366",
			"name": "65 +",
		}
	]
});                             });


## bar2.js
$.get('Living_Age.csv', function(data) {
    $('#chart2').highcharts({
        "data": {
            csv: data
            },

	"chart": {
		"type": "column",
		"inverted": true,
		"height": 400,
        "zoomType": "x",
                "style": {
			"fontFamily": "Palatino Linotype"
		}
	},
	"plotOptions": {
		"series": {
			"stacking": "percent"
		}
	},
	"title": {
		"text": "Living Donors Recovered in the U.S. by Donor Age"
	},
	"yAxis": {
		"title": {
			"text": "Percentage"
		}
	},
	"xAxis": {
		"title": {
			"text": "Year"
		},
		"type": "category"
	},
	"legend": {
		"y": 6,
		"borderColor": "rgba(144, 144, 144, 0.81)",
		"x": 2,
		"align": "right"
	},
	"series": [
		{
			"index": 7,
			"color": "#9fff80",
			"name": "18-34 Years",
		},
		{
			"index": 6,
			"color": "#40ff00",
			"name": "35-49 Years",
		},
		{
			"index": 5,
			"color": "#2db300",
			"name": "50-64 Years",
		},
		{
			"index": 4,
			"color": "#208000",
			"name": "65 +",
}
        ],

    });
});

## Donor_Age.csv

        
        Year
         < 1 Year
         1-5 Years
         6-10 Years
         11-17 Years
         18-34 Years
         35-49 Years
         50-64 Years
         65 +

        
        1995
        1.7
        4.1
        3.4
        13.2
        28.8
        24.4
        19.3
        5.2

        
        1999
        1.3
        3.4
        2.8
        9.2
        25.2
        27.3
        21.9
        9

        
        2003
        1.4
        2.6
        1.7
        8.1
        26
        26.6
        24.9
        8.9

        
        2007
        1.5
        2.3
        1.5
        6.1
        26.4
        26.2
        26.4
        9.5

        
        2011
        1.4
        2.8
        1.4
        5.3
        27.6
        26.7
        27.6
        7.3

        
        2015
        1.7
        2.8
        1.4
        4.4
        30
        25.8
        27.4
        6.6

## Donors_Type.csv

        
        Year
        Deceased Donor
        Living Donor

        
        1988
        4080
        1829

        
        1989
        4011
        1918

        
        1990
        4509
        2123

        
        1991
        4526
        2427

        
        1992
        4520
        2571

        
        1993
        4861
        2905

        
        1994
        5099
        3104

        
        1995
        5363
        3496

        
        1996
        5418
        3804

        
        1997
        5479
        4066

        
        1998
        5793
        4569

        
        1999
        5824
        5047

        
        2000
        5985
        5957

        
        2001
        6080
        6622

        
        2002
        6190
        6631

        
        2003
        6457
        6828

        
        2004
        7150
        7004

        
        2005
        7593
        6904

        
        2006
        8017
        6733

        
        2007
        8085
        6315

        
        2008
        7989
        6218

        
        2009
        8022
        6609

        
        2010
        7943
        6561

        
        2011
        8126
        6023

        
        2012
        8143
        5867

        
        2013
        8268
        5988

        
        2014
        8596
        5819

        
        2015
        7587
        4923

## index.html
<html>
     <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Exercise</title>
     <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
    <link rel="stylesheet" href="style.css">

    </head>

     <body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    <div class='content'>
        <div class='btn-group clearfix'>
            <button id='button2' class='btn'>Living Donors</button>
            <button id='button1' class='btn selected'>Deceased Donors</button>

        </div>

        <div id='chart1' class='show'></div>
        <div id='chart2' class='hide'></div>
    </div>


     </body>

     <script type="text/javascript" src="line.js"></script>
     <script type="text/javascript" src="bar.js"></script>
     <script type="text/javascript" src="bar2.js"></script>
     <script type="text/javascript" src="switch.js"></script>

</html>


## line.js
$.get('Donors_Type.csv', function(data) {
   $('#container').highcharts({
         "data": {
            csv: data
            },

	"chart": {
		"type": "spline",
		"zoomType": "x",
		"height": 380,
		"style": {
			"fontFamily": "Palatino Linotype"
		}
	},

	"title": {
		"text": "Donors Recovered in the U.S. by Donor Type"
	},

	"yAxis": {
		"title": {
			"text": "Number of Donors"
		}
	},
	"xAxis": {
		"labels": {
			"format": null
		}
	},

	"plotOptions": {
		"series": {
			"dataLabels": {
				"style": {
					"fontSize": 14
				}
			}
		}
	},
	"legend": {
		"itemStyle": {
			"fontSize": 14
		}
	},
	"series": [
		{
			"index": 0,
			"color": "#7187d8",
			"dashStyle": "ShortDash",
			"name": "Deceased Donor",

		},
		{
			"index": 1,
			"color": "#2bdf79",
			"marker": {
				"symbol": "circle"
			},
			"name": "Living Donor",
		}
	]

            });
            });

## Living_Age.csv

        
        Year
         18-34 Years
         35-49 Years
         50-64 Years
         65 +

        
        1995
        37.80
        46.10
        15.00
        1.10

        
        1999
        35.10
        46.60
        17.50
        0.80

        
        2003
        33.50
        47.20
        18.30
        1.00

        
        2007
        31.50
        44.20
        23.10
        1.30

        
        2011
        29.40
        42.10
        26.90
        1.60

        
        2015
        29.00
        39.20
        28.00
        3.60

## style.css
<style>
    .content {
        background: #f9f9f9;
        margin: 20px;
        width:100%;
    }

    .btn {
        display: inline;
        font-size: 14px;
        padding: 14px;
        cursor: pointer;
        border: none;
        color: white;
        background-color: #1696d2;
        display: block;
        line-height: 12px;
        text-transform: uppercase;
        text-align: center;
        float: right;
        margin: 5px;
    }

    .btn selected {
        background-color: #ccc;
        border: black;
    }

 .show, .hide {
        margin: 0 auto;
        margin-top: 0px;
        position: relative;
        width: 100%;
        height: 400px;
    }

    .btn:hover {
        background-color: white;
         color:#1696d2;
        border:#1696d2;
    }


    .clearfix:before,
    .clearfix:after {
        content: ' ';
        display: block;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    .hide {
        display: none;
    }
    .show {
        display: block;
    }

</style>

## switch.js
$('#button1').click(function () {

            document.getElementById('chart2').className = 'hide';
            document.getElementById('chart1').className = 'show';
            document.getElementById('button1').className = 'btn selected';
            document.getElementById('button2').className = 'btn';


        });

        $("#button2").click(function () {

            document.getElementById('chart2').className = 'show';
            document.getElementById('chart1').className = 'hide';
            document.getElementById('button1').className = 'btn';
            document.getElementById('button2').className = 'btn selected';

        });


## Week2: Two Charts.
homework