jashcny/index.html

## index.html
<html>
  <head>
    <style>
    body {
      font-family: Arial, sans-serif;
      font-size: 12px;}

    .highcharts-tooltip h3 {
       margin: 0.3em 0;
       }

    table, th, td {
        font-size: 12px;
       }

    th {
        height: 30px;
       }

    table {
        width: 160px;
        text-align:center;
       }

    .aside-content {
        margin:auto;
        width: 800px;
       }

    p {
      margin-left: 20px;
      font-size: 15px;
      }

    #container1 {
  padding-top: 40px;
      }

    a,b {
    color: rgb(51,	51,	51);
      }

    a:hover {
    color:  rgb(233, 42, 58);
      }

    </style>


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

      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>
      <script src="https://code.highcharts.com/highcharts-more.js"></script>

  </head>
      <body>
        <div class='aside-content'>
          <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
          <p ><b>Source: </b><a href="http://www.fapri.iastate.edu/tools/outlook.aspx"> Food and Agricultural Policy Research Institute (2010).</a></p>
          <div id="container1" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
          <p ><b>Source: </b><a href="http://www.fapri.iastate.edu/tools/outlook.aspx"> Food and Agricultural Policy Research Institute (2010).</a></p>
        </div>
      </body>

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Meat Consumption by Different Types and Countries'
        },

        xAxis: {
            categories: ['United States','China','Russia','Europe Union','Japan','South Korea','Brazil']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total Consumption in 2010 (Thousand Metric Tons)'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Beef and veal',
            data: [11865,5528,2235,8200,1207,625,8008]
        }, {
            name: 'Pork',
            data: [8526,50050,3119,20580,2437,1524,2667]
        }, {
            name: 'Broiler',
            data: [13552,12496,2466,8760,2020,730,8234]
        }]
    });
});

</script>


<script type="text/javascript">

$(function () {
    $('#container1').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        legend: {
            enabled: false
        },

        title: {
            text: 'Meat Consumption by Different Types and Countries'
        },

        xAxis: {
            gridLineWidth: 1,
            title: {
                text: 'Beef and veal (Thousand Metric Tons)'
            },

        },

        yAxis: {
            startOnTick: false,
            endOnTick: false,
            title: {
                text: 'Pork (Thousand Metric Tons)'
            },
            maxPadding: 0.2,
        },

        tooltip: {
                   useHTML: true,
                   headerFormat: '<table>',
                   pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
                       '<tr><th>Beef and veal:</th><td>{point.x}</td></tr>' +
                       '<tr><th>Pork:</th><td>{point.y}</td></tr>' +
                       '<tr><th>Broiler:</th><td>{point.z}</td></tr>',
                   footerFormat: '</table>',
                   followPointer: true
               },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },

        series: [{
            data: [
                { x: 11865, y: 8526, z: 13552, name: 'USA', country:'United States'},
                { x: 5528, y: 50050,	z:12496, name: 'China', country:'China' },
                { x: 2235,	y:3119,	z:2466, name:'RUS', country:'Russia' },
                { x: 8200,	y:20580, z:8760, name:'EU', country:'Europe Union'},
                { x: 1207,	y:2437,	z:2020, name:'Japan', country:'Japan'},
                { x: 625, y:1524,	z:730, name:'SK', country:'South Korea'},
                { x:8008, y:2667, z:8234, name:'Brazil', country:'Brazil'}
            ]
        }]

    });
});


</script>
</html>
	<html>
	<head>
	<style>
	body {
	font-family: Arial, sans-serif;
	font-size: 12px;}

	.highcharts-tooltip h3 {
	margin: 0.3em 0;
	}

	table, th, td {
	font-size: 12px;
	}

	th {
	height: 30px;
	}

	table {
	width: 160px;
	text-align:center;
	}

	.aside-content {
	margin:auto;
	width: 800px;
	}

	p {
	margin-left: 20px;
	font-size: 15px;
	}

	#container1 {
	padding-top: 40px;
	}

	a,b {
	color: rgb(51, 51, 51);
	}

	a:hover {
	color: rgb(233, 42, 58);
	}

	</style>


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

	<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script src="https://code.highcharts.com/highcharts-more.js"></script>

	</head>
	<body>
	<div class='aside-content'>
	<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
	<p ><b>Source: </b><a href="http://www.fapri.iastate.edu/tools/outlook.aspx"> Food and Agricultural Policy Research Institute (2010).</a></p>
	<div id="container1" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
	<p ><b>Source: </b><a href="http://www.fapri.iastate.edu/tools/outlook.aspx"> Food and Agricultural Policy Research Institute (2010).</a></p>
	</div>
	</body>

	<script type="text/javascript">
	$(function () {
	$('#container').highcharts({
	chart: {
	type: 'bar'
	},
	title: {
	text: 'Meat Consumption by Different Types and Countries'
	},

	xAxis: {
	categories: ['United States','China','Russia','Europe Union','Japan','South Korea','Brazil']
	},
	yAxis: {
	min: 0,
	title: {
	text: 'Total Consumption in 2010 (Thousand Metric Tons)'
	}
	},
	legend: {
	reversed: true
	},
	plotOptions: {
	series: {
	stacking: 'normal'
	}
	},
	series: [{
	name: 'Beef and veal',
	data: [11865,5528,2235,8200,1207,625,8008]
	}, {
	name: 'Pork',
	data: [8526,50050,3119,20580,2437,1524,2667]
	}, {
	name: 'Broiler',
	data: [13552,12496,2466,8760,2020,730,8234]
	}]
	});
	});

	</script>




	<script type="text/javascript">

	$(function () {
	$('#container1').highcharts({

	chart: {
	type: 'bubble',
	plotBorderWidth: 1,
	zoomType: 'xy'
	},

	legend: {
	enabled: false
	},

	title: {
	text: 'Meat Consumption by Different Types and Countries'
	},

	xAxis: {
	gridLineWidth: 1,
	title: {
	text: 'Beef and veal (Thousand Metric Tons)'
	},

	},

	yAxis: {
	startOnTick: false,
	endOnTick: false,
	title: {
	text: 'Pork (Thousand Metric Tons)'
	},
	maxPadding: 0.2,
	},

	tooltip: {
	useHTML: true,
	headerFormat: '<table>',
	pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
	'<tr><th>Beef and veal:</th><td>{point.x}</td></tr>' +
	'<tr><th>Pork:</th><td>{point.y}</td></tr>' +
	'<tr><th>Broiler:</th><td>{point.z}</td></tr>',
	footerFormat: '</table>',
	followPointer: true
	},

	plotOptions: {
	series: {
	dataLabels: {
	enabled: true,
	format: '{point.name}'
	}
	}
	},

	series: [{
	data: [
	{ x: 11865, y: 8526, z: 13552, name: 'USA', country:'United States'},
	{ x: 5528, y: 50050, z:12496, name: 'China', country:'China' },
	{ x: 2235, y:3119, z:2466, name:'RUS', country:'Russia' },
	{ x: 8200, y:20580, z:8760, name:'EU', country:'Europe Union'},
	{ x: 1207, y:2437, z:2020, name:'Japan', country:'Japan'},
	{ x: 625, y:1524, z:730, name:'SK', country:'South Korea'},
	{ x:8008, y:2667, z:8234, name:'Brazil', country:'Brazil'}
	]
	}]

	});
	});


	</script>
	</html>