DanielJWood/index.html

## index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html>
<head>
	<meta charset="utf-8" />
	<title>Falling Price of Utility-Scale PV Projects</title>

	<style type="text/css">
        #container {
        height: 600px;
        margin: 0 auto
    }


@media (max-width: 570px) {
    #container {
        height: 320px !important;
    }
    #scroll-area {
      width: 40px;
      height: 100%;
      position: absolute;
      z-index: 20000;
      right: 0px;
    }
}
@media (max-width: 480px) {
    #container {
        height: 255px !important;
    }

}
@media (max-width: 320px) {
    #container {
        height: 320px !important;
    }

}

.highcharts-tooltip span {
    height:auto;
    width:140px;
    overflow:auto;
    white-space:normal !important; // add this line...
}
	</style>

</head>

<body>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id='scroll-area'></div>

<div id="container"></div>
<script type="text/javascript">
//updated 11/13/13

var items = [
[11,10.9,5.9,3.7],
[1.6,1.6,1.4,1],
[2,1.9,1.9,1.9],
[6.8,5.4,4.8,4.6]
];

var cars = ["Module","Inverter","Other Hardware (Wires, Fuses, Mounting Racks)","Soft Costs (Permitting, Inspection, Installation)"];

var date = ["2010","2011","2012","2013"];

(function ($) {
$(document).ready(function() {

        $('#container').highcharts({
            chart: {
                type: 'column',
                borderRadius: 0,
	            backgroundColor: '#FFFFFF'
            },
            title: {
	            style: {
	            	color: '#333333',
					fontSize: '16px'
	            },
	          	text: 'The Falling Price of Utility-Scale Solar Photovoltaic (PV) Projects'
	        },
            colors: [
			   '#E1408C',
			   '#FF8849',
			   '#37C197',
			   '#ADF145'
			],
            legend: {
            	layout: 'vertical',
            	verticalAlign: 'top',
            	align: 'right',
            	floating: true,
            	x: -10,
            	y: 45,
            	backgroundColor: '#ffffff',
            	borderRadius: 1,
            	width: 160,
                itemStyle: {
                    width: 160
                },
            	title: {
            		style: {
            			fontStyle: 'italic'
            		}
            	}
            },
            xAxis: {
                categories: date,
                labels: {
					x: 10,
					y:15,
                	align: "right"
                },
                tickInterval: 1
            },
            yAxis: {
            	tickInterval: 2,
                title: {
                    text: 'Cost of Electricity, cents per kWh',
                    style: {
						color: '#555555',
						fontWeight: 'bold'
					}
                },
                plotLines : [{
					value : 6,
					color : '#127E5D',
					zIndex: 5,
					dashStyle : 'shortdash',
					width : 2,
					label : {
						text : '2020 Goal of 6 c/kWh'
					}
				}]
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +' c/kWh<br/>'+
                        'Total: '+ this.point.stackTotal + ' c/kWh<br/>';
                },
                useHTML: true
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                },
				series: {
					pointPadding: .000001
				}
            },
            series: [

				{
                    dataLabels: {
                         enabled: true,
                         formatter: function() {
                              return 'Total: ' + this.total + 'c/kWh';
                          },
                          inside: false,
                          style: {
                            color: "black",
                            fontWeight: 'bold',

                          }
                    },
					name: cars[0],
					data: items[0]
				},
				{
					name: cars[1],
					data: items[1]
				},
				{
					name: cars[2],
					data: items[2]
				},
				{
					name: cars[3],
					data: items[3]
				}
            ]
        });
    });
}(jQuery));


</script>
</body>
</html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
	"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Falling Price of Utility-Scale PV Projects</title>

	<style type="text/css">
	#container {
	height: 600px;
	margin: 0 auto
	}


	@media (max-width: 570px) {
	#container {
	height: 320px !important;
	}
	#scroll-area {
	width: 40px;
	height: 100%;
	position: absolute;
	z-index: 20000;
	right: 0px;
	}
	}
	@media (max-width: 480px) {
	#container {
	height: 255px !important;
	}

	}
	@media (max-width: 320px) {
	#container {
	height: 320px !important;
	}

	}

	.highcharts-tooltip span {
	height:auto;
	width:140px;
	overflow:auto;
	white-space:normal !important; // add this line...
	}
	</style>

	</head>

	<body>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<script src="http://code.highcharts.com/highcharts.js"></script>

	<div id='scroll-area'></div>

	<div id="container"></div>
	<script type="text/javascript">
	//updated 11/13/13

	var items = [
	[11,10.9,5.9,3.7],
	[1.6,1.6,1.4,1],
	[2,1.9,1.9,1.9],
	[6.8,5.4,4.8,4.6]
	];

	var cars = ["Module","Inverter","Other Hardware (Wires, Fuses, Mounting Racks)","Soft Costs (Permitting, Inspection, Installation)"];

	var date = ["2010","2011","2012","2013"];

	(function ($) {
	$(document).ready(function() {

	$('#container').highcharts({
	chart: {
	type: 'column',
	borderRadius: 0,
	backgroundColor: '#FFFFFF'
	},
	title: {
	style: {
	color: '#333333',
	fontSize: '16px'
	},
	text: 'The Falling Price of Utility-Scale Solar Photovoltaic (PV) Projects'
	},
	colors: [
	'#E1408C',
	'#FF8849',
	'#37C197',
	'#ADF145'
	],
	legend: {
	layout: 'vertical',
	verticalAlign: 'top',
	align: 'right',
	floating: true,
	x: -10,
	y: 45,
	backgroundColor: '#ffffff',
	borderRadius: 1,
	width: 160,
	itemStyle: {
	width: 160
	},
	title: {
	style: {
	fontStyle: 'italic'
	}
	}
	},
	xAxis: {
	categories: date,
	labels: {
	x: 10,
	y:15,
	align: "right"
	},
	tickInterval: 1
	},
	yAxis: {
	tickInterval: 2,
	title: {
	text: 'Cost of Electricity, cents per kWh',
	style: {
	color: '#555555',
	fontWeight: 'bold'
	}
	},
	plotLines : [{
	value : 6,
	color : '#127E5D',
	zIndex: 5,
	dashStyle : 'shortdash',
	width : 2,
	label : {
	text : '2020 Goal of 6 c/kWh'
	}
	}]
	},
	tooltip: {
	formatter: function() {
	return '<b>'+ this.x +'</b><br/>'+
	this.series.name +': '+ this.y +' c/kWh<br/>'+
	'Total: '+ this.point.stackTotal + ' c/kWh<br/>';
	},
	useHTML: true
	},
	plotOptions: {
	column: {
	stacking: 'normal'
	},
	series: {
	pointPadding: .000001
	}
	},
	series: [

	{
	dataLabels: {
	enabled: true,
	formatter: function() {
	return 'Total: ' + this.total + 'c/kWh';
	},
	inside: false,
	style: {
	color: "black",
	fontWeight: 'bold',

	}
	},
	name: cars[0],
	data: items[0]
	},
	{
	name: cars[1],
	data: items[1]
	},
	{
	name: cars[2],
	data: items[2]
	},
	{
	name: cars[3],
	data: items[3]
	}
	]
	});
	});
	}(jQuery));


	</script>
	</body>
	</html>