luluwuluying/Time-spent.csv

## barchart.js
$.get('Time-spent.csv', function(data) {
$('#container2').highcharts({

        data: {
            csv: data
            },

        chart: {
            type: 'bar'
        },
        title: {
            text: 'Time spent in primary activities'
        },
    subtitle: {
            style: {
                position: 'absolute',
                right: '0px',
                bottom: '10px'
            },
            text: 'source: Bureau of Labor Statistics'
        },
        xAxis: {
        },
        yAxis: {
            title: {
                text:'Average hours per day, civilian population'
            }
        },


    });
});


## dotcharts.js
$.get('Time-spent.csv', function(data) {
    $('#container').highcharts({

        data: {
            csv: data
            },
        chart: {
            type: 'area',
            inverted: true
        },
        title: {
            text: 'Time spent in primary activities '
        },
        subtitle: {
            style: {
                position: 'absolute',
                right: '0px',
                bottom: '10px'
            },
            text: 'source: Bureau of Labor Statistics'
        },
        xAxis: {
        },
        yAxis: {
            title: {
                text: 'Average hours per day, civilian population'
            },
        },
        plotOptions: {
            series: {
                marker: {
                    symbol: 'triangle'
                }
            }
        }
    });
});


## index.html
<html lang="en">
	<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Week2 Highcharts</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>


    <style>
        .content {
        background: #f9f9f9;
        margin: 20px;
        width: 100%;
            height:100%;
    }
        .btn:hover {
        background-color: #FFCCCC;
    }

    .clearfix:before,
    .clearfix:after {
        content: ' ';
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
        }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }
        #container{
            width:100%;
            height:100%;
        }
        #container1{
            width:100%;


        }
        </style>
    </head>

    <body>
    <h3>Time spent in primary activities of the civilian population engaging in each activity, averages         per day by sex, 2014 annual averages</h3>
    <h3>The charts shows the different between men and women about how they spent their day.</h3>
    <div id="container2" style="min-width: 500px; height: 600px; margin: 0 auto"></div>

        <div class='content'>
        <div class='btn-group '>

            <button id='buttonOne' class='btn selected'>Chart1</button>
            <button id='buttonTwo' class='btn'>Chart2</button>

        </div>

        <!-- both of the charts are here - we use show/hide to toggle which is visible. -->
        <div id='container' class='chart show'><p>Chart1</p></div>
        <div id='container1' class='chart hide'><p>Chart2</p></div>
    </div>

    <div id="container" style="min-width: 500px; height: 600px; margin: 0 auto"></div>
    <div id="container1" style="min-width: 500px; height: 600px; margin: 0 auto"></div>


    <script type="text/javascript" src="dotcharts.js"></script>
    <script type="text/javascript" src="linechart.js"></script>
    <script type="text/javascript" src="barchart.js"></script>

    <script>
        $('#buttonOne').click(function () {

            document.getElementById('container1').className = 'chart hide';
            document.getElementById('container').className = 'chart show';

            document.getElementById('buttonOne').className = 'btn selected';
            document.getElementById('buttonTwo').className = 'btn';


        });

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

            document.getElementById('container1').className = 'chart show';
            document.getElementById('container').className = 'chart hide';
            document.getElementById('buttonOne').className = 'btn';
            document.getElementById('buttonTwo').className = 'btn selected';

        });
        </script>

    </body>


</html>

## linechart.js
$.get('Time-spent.csv', function(data) {
$('#container1').highcharts({
data: {
            csv: data
            },

        chart: {
            type: 'line',
            inverted: 'true'
        },
        title: {
            text: 'Time spent in primary activities'
        },
    subtitle: {
            style: {
                position: 'absolute',
                right: '0px',
                bottom: '10px'
            },
            text: 'source: Bureau of Labor Statistics'
        },
        xAxis: {
        },
        yAxis: {
            title: {
                text:'Average hours per day, civilian population'
            }
        },

   series:{
       type:'column',
       index:0,
       color:'#df9595',
   }

    });
});


## Time-spent.csv

          
            Activity
            AvgHourMen
            AvgHourWomen

            
              Personal care activities
              9.32
              9.82

            
              Sleeping
              8.69
              8.9

            
              Eating and drinking
              1.21
              1.14

            
              Household activities
              1.38
              2.14

            
              Housework
              0.27
              0.82

            
              Food preparation and cleanup
              0.34
              0.82

            
              Lawn and garden care
              0.25
              0.12

            
              Household management
              0.1
              0.13

            
              Purchasing goods and services
              0.6
              0.87

            
              Consumer goods purchases
              0.27
              0.44

            
              Professional and personal care services
              0.06
              0.12

            
              Caring for and helping household members
              0.35
              0.72

            
              Caring for and helping household children
              0.26
              0.55

            
              Caring for and helping nonhousehold members
              0.15
              0.21

            
              Caring for and helping nonhousehold adults
              0.07
              0.06

            
              Working and work-related activities
              4.29
              2.94

            
              Working
              3.87
              2.68

            
              Educational activities
              0.4
              0.44

            
              Attending class
              0.24
              0.23

            
              Homework and research
              0.12
              0.18

            
              Religious activities
              0.27
              0.37

            
              Religious and spiritual activities
              0.11
              0.17

            
              Volunteering (organizational and civic activities)
              0.12
              0.16

            
              Leisure and sports
              5.71
              4.93

            
              Socializing and communicating
              0.69
              0.73

            
              Watching television
              3.05
              2.61

            
              Sports and exercise
              0.38
              0.21

            
              Telephone calls and email
              0.1
              0.19

            
              Other activities
              0.22
              0.24
	$.get('Time-spent.csv', function(data) {
	$('#container2').highcharts({

	data: {
	csv: data
	},

	chart: {
	type: 'bar'
	},
	title: {
	text: 'Time spent in primary activities'
	},
	subtitle: {
	style: {
	position: 'absolute',
	right: '0px',
	bottom: '10px'
	},
	text: 'source: Bureau of Labor Statistics'
	},
	xAxis: {
	},
	yAxis: {
	title: {
	text:'Average hours per day, civilian population'
	}
	},


	});
	});
	$.get('Time-spent.csv', function(data) {
	$('#container').highcharts({

	data: {
	csv: data
	},
	chart: {
	type: 'area',
	inverted: true
	},
	title: {
	text: 'Time spent in primary activities '
	},
	subtitle: {
	style: {
	position: 'absolute',
	right: '0px',
	bottom: '10px'
	},
	text: 'source: Bureau of Labor Statistics'
	},
	xAxis: {
	},
	yAxis: {
	title: {
	text: 'Average hours per day, civilian population'
	},
	},
	plotOptions: {
	series: {
	marker: {
	symbol: 'triangle'
	}
	}
	}
	});
	});
	<html lang="en">
	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Week2 Highcharts</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>


	<style>
	.content {
	background: #f9f9f9;
	margin: 20px;
	width: 100%;
	height:100%;
	}
	.btn:hover {
	background-color: #FFCCCC;
	}

	.clearfix:before,
	.clearfix:after {
	content: ' ';
	display: table;
	}
	.clearfix:after {
	clear: both;
	}
	.clearfix {
	*zoom: 1;
	}
	.hide {
	display: none;
	}
	.show {
	display: block;
	}
	#container{
	width:100%;
	height:100%;
	}
	#container1{
	width:100%;


	}
	</style>
	</head>

	<body>
	<h3>Time spent in primary activities of the civilian population engaging in each activity, averages per day by sex, 2014 annual averages</h3>
	<h3>The charts shows the different between men and women about how they spent their day.</h3>
	<div id="container2" style="min-width: 500px; height: 600px; margin: 0 auto"></div>

	<div class='content'>
	<div class='btn-group '>

	<button id='buttonOne' class='btn selected'>Chart1</button>
	<button id='buttonTwo' class='btn'>Chart2</button>

	</div>

	<!-- both of the charts are here - we use show/hide to toggle which is visible. -->
	<div id='container' class='chart show'><p>Chart1</p></div>
	<div id='container1' class='chart hide'><p>Chart2</p></div>
	</div>

	<div id="container" style="min-width: 500px; height: 600px; margin: 0 auto"></div>
	<div id="container1" style="min-width: 500px; height: 600px; margin: 0 auto"></div>


	<script type="text/javascript" src="dotcharts.js"></script>
	<script type="text/javascript" src="linechart.js"></script>
	<script type="text/javascript" src="barchart.js"></script>

	<script>
	$('#buttonOne').click(function () {

	document.getElementById('container1').className = 'chart hide';
	document.getElementById('container').className = 'chart show';

	document.getElementById('buttonOne').className = 'btn selected';
	document.getElementById('buttonTwo').className = 'btn';


	});

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

	document.getElementById('container1').className = 'chart show';
	document.getElementById('container').className = 'chart hide';
	document.getElementById('buttonOne').className = 'btn';
	document.getElementById('buttonTwo').className = 'btn selected';

	});
	</script>

	</body>


	</html>
	$.get('Time-spent.csv', function(data) {
	$('#container1').highcharts({
	data: {
	csv: data
	},

	chart: {
	type: 'line',
	inverted: 'true'
	},
	title: {
	text: 'Time spent in primary activities'
	},
	subtitle: {
	style: {
	position: 'absolute',
	right: '0px',
	bottom: '10px'
	},
	text: 'source: Bureau of Labor Statistics'
	},
	xAxis: {
	},
	yAxis: {
	title: {
	text:'Average hours per day, civilian population'
	}
	},

	series:{
	type:'column',
	index:0,
	color:'#df9595',
	}

	});
	});
Activity	AvgHourMen	AvgHourWomen
Personal care activities	9.32	9.82
Sleeping	8.69	8.9
Eating and drinking	1.21	1.14
Household activities	1.38	2.14
Housework	0.27	0.82
Food preparation and cleanup	0.34	0.82
Lawn and garden care	0.25	0.12
Household management	0.1	0.13
Purchasing goods and services	0.6	0.87
Consumer goods purchases	0.27	0.44
Professional and personal care services	0.06	0.12
Caring for and helping household members	0.35	0.72
Caring for and helping household children	0.26	0.55
Caring for and helping nonhousehold members	0.15	0.21
Caring for and helping nonhousehold adults	0.07	0.06
Working and work-related activities	4.29	2.94
Working	3.87	2.68
Educational activities	0.4	0.44
Attending class	0.24	0.23
Homework and research	0.12	0.18
Religious activities	0.27	0.37
Religious and spiritual activities	0.11	0.17
Volunteering (organizational and civic activities)	0.12	0.16
Leisure and sports	5.71	4.93
Socializing and communicating	0.69	0.73
Watching television	3.05	2.61
Sports and exercise	0.38	0.21
Telephone calls and email	0.1	0.19
Other activities	0.22	0.24