<div>
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript">

function formatNum(num) {
	return (num | 0) < 10 ? '0' + num : num;
}

function toRGB(hexcode){
	var rgb, seplen = 2;
	
	hexcode = hexcode.replace('#', '');
	
	seplen = (hexcode.length / 3) | 0;

	rgb = [parseInt(hexcode.substr(0, seplen), 16), parseInt(hexcode.substr(seplen * 1, seplen), 16), parseInt(hexcode.substr(seplen * 2, seplen), 16), 0.6];
	return 'rgba(' + rgb.join(',') + ')';
}

function makeAxisXLabels(jsondata) {
	var i, len = jsondata.length
			, labels = []
			, d
			;
	for (i = 0; i < len; i++) {
		d = new Date(jsondata[i].date_time);
		labels[i] = jsondata[i].year;
//		labels[i] = formatNum(d.getMonth() + 1) + '.' + formatNum(d.getDate()) + '. ' + formatNum(d.getHours()) + ':' + formatNum(d.getMinutes());
	}
	return labels;
}

function makeDatasets(jsondata, labels) {
	var sets = [], i, y, cat
			, d, label, dlabels, dstyle
			;
			
	for(i = 0; i < labels.length; i++){
		d = [];
		dlabels = [];
		cat = labels[i];
		label = categoriesParams[cat].label;
		dstyle = categoriesParams[cat].dash;
		for (y = 0; y < jsondata.length; y++) {
//			d[y] = jsondata[y][label];
			d[y] = jsondata[y][cat];
			dlabels[y] = d[y];
		}
		sets[i] = {
			label: label
			, data: d
			, backgroundColor: categoriesParams[cat]['background-color']
			, borderColor: dstyle ? categoriesParams[cat]['background-color'] : bordercolor
			, borderWidth: 2
			, borderDash: dstyle ?  [4, 2] : []
			, fill: !dstyle
//			, showLine: false
			, pointRadius: 0
		};
	}
	return sets;
}

function chartDataToArraySheet(data, labels, xLabels, xLabelTitle, yLabelTitle){
	var i, d, dlabels, cat, label
		, y, sets = []
	;
	//翻訳済みラベル
	d = [];
	d.push(xLabelTitle);
	for(i = 0; i < labels.length; i++){
		cat = labels[i];
		label = categoriesParams[cat].label;
		d.push(label + ' ' + yLabelTitle);
	}
	sets.push(d);
	
	//データ追加
	for (y = 0; y < data.length; y++) {
		d = [];
		d.push(xLabels[y]);
		for(i = 0; i < labels.length; i++){
			cat = labels[i];
			d.push(+data[y][cat]);
		}
		sets.push(d);
	}
	return sets;
};


var ctx = document.getElementById("myChart").getContext("2d")
	, rawResult = JSON.parse('[{"year":"1990","solar":"32","wind":"1","geothermal":"270","biomass":"483","hydro":"3060","total":"3845","disable_flg":"0"},{"year":"1991","solar":"40","wind":"3","geothermal":"270","biomass":"492","hydro":"3072","total":"3875","disable_flg":"0"},{"year":"1992","solar":"48","wind":"3","geothermal":"270","biomass":"512","hydro":"3110","total":"3940","disable_flg":"0"},{"year":"1993","solar":"55","wind":"5","geothermal":"296","biomass":"602","hydro":"3130","total":"4083","disable_flg":"0"},{"year":"1994","solar":"63","wind":"7","geothermal":"379","biomass":"725","hydro":"3135","total":"4302","disable_flg":"0"},{"year":"1995","solar":"74","wind":"10","geothermal":"504","biomass":"822","hydro":"3137","total":"4547","disable_flg":"0"},{"year":"1996","solar":"94","wind":"14","geothermal":"530","biomass":"987","hydro":"3157","total":"4782","disable_flg":"0"},{"year":"1997","solar":"128","wind":"22","geothermal":"530","biomass":"1107","hydro":"3176","total":"4962","disable_flg":"0"},{"year":"1998","solar":"171","wind":"38","geothermal":"533","biomass":"1363","hydro":"3197","total":"5302","disable_flg":"0"},{"year":"1999","solar":"252","wind":"83","geothermal":"533","biomass":"1407","hydro":"3192","total":"5467","disable_flg":"0"},{"year":"2000","solar":"369","wind":"144","geothermal":"533","biomass":"1560","hydro":"3205","total":"5811","disable_flg":"0"},{"year":"2001","solar":"493","wind":"313","geothermal":"533","biomass":"1640","hydro":"3209","total":"6188","disable_flg":"0"},{"year":"2002","solar":"679","wind":"464","geothermal":"533","biomass":"1905","hydro":"3218","total":"6799","disable_flg":"0"},{"year":"2003","solar":"904","wind":"681","geothermal":"533","biomass":"1940","hydro":"3219","total":"7277","disable_flg":"0"},{"year":"2004","solar":"1178","wind":"925","geothermal":"534","biomass":"2430","hydro":"3228","total":"8296","disable_flg":"0"},{"year":"2005","solar":"1483","wind":"1085","geothermal":"534","biomass":"2616","hydro":"3221","total":"8939","disable_flg":"0"},{"year":"2006","solar":"1752","wind":"1490","geothermal":"535","biomass":"2913","hydro":"3223","total":"9913","disable_flg":"0"},{"year":"2007","solar":"1961","wind":"1674","geothermal":"535","biomass":"3012","hydro":"3227","total":"10409","disable_flg":"0"},{"year":"2008","solar":"2198","wind":"1882","geothermal":"535","biomass":"3083","hydro":"3226","total":"10924","disable_flg":"0"},{"year":"2009","solar":"2821","wind":"2186","geothermal":"538","biomass":"3159","hydro":"3235","total":"11939","disable_flg":"0"},{"year":"2010","solar":"3884","wind":"2475","geothermal":"540","biomass":"3252","hydro":"3241","total":"13391","disable_flg":"0"},{"year":"2011","solar":"5288","wind":"2556","geothermal":"540","biomass":"3277","hydro":"3252","total":"14913","disable_flg":"0"},{"year":"2012","solar":"7263","wind":"2642","geothermal":"515","biomass":"3312","hydro":"3258","total":"16991","disable_flg":"0"},{"year":"2013","solar":"14306","wind":"2707","geothermal":"515","biomass":"3404","hydro":"3264","total":"24196","disable_flg":"0"},{"year":"2014","solar":"23698","wind":"2921","geothermal":"520","biomass":"3510","hydro":"3275","total":"33924","disable_flg":"0"},{"year":"2015","solar":"32858","wind":"3078","geothermal":"525","biomass":"3804","hydro":"3327","total":"43592","disable_flg":"0"},{"year":"2016","solar":"39089","wind":"3378","geothermal":"530","biomass":"4137","hydro":"3406","total":"50540","disable_flg":"0"}]')
	, jsonval = rawResult
	, sortLabels = JSON.parse('["solar","wind","geothermal","biomass","hydro"]').reverse()
	, bordercolor = 'rgba(255,255,255,0)'
	
//	, categoriesParams = {}
	, categoriesParams = JSON.parse('{"demand":{"background-color":"#040001","dash":true,"label":"demand"},"nuclear":{"background-color":"#83888B","dash":false,"label":"nuclear"},"thermal":{"background-color":"#573F28","dash":false,"label":"thermal"},"hydro":{"background-color":"#1181C8","dash":false,"label":"small_hydraulic"},"geothermal":{"background-color":"#D88A41","dash":false,"label":"geothermal"},"biomass":{"background-color":"#128766","dash":false,"label":"biomass"},"solar_performance":{"background-color":"#FFD700","dash":false,"label":"solar_performance"},"solar_suppression":{"background-color":"#FFF2AA","dash":true,"label":"solar_suppression"},"wind_performance":{"background-color":"#B5EECB","dash":false,"label":"wind_performance"},"wind_suppression":{"background-color":"#D9EEE1","dash":true,"label":"wind_suppression"},"pumped":{"background-color":"#72C1F3","dash":false,"label":"pumped"},"interconnection":{"background-color":"#D3BFFF","dash":false,"label":"interconnection"},"total":{"background-color":"#000000","dash":false,"label":"total"},"renewables":{"background-color":"#dddd22","dash":false,"label":"renewables"},"nonrenewables":{"background-color":"#dddddd","dash":false,"label":"nonrenewables"},"solar":{"background-color":"#FFD700","dash":false,"label":"solar"},"wind":{"background-color":"#B5EECB","dash":false,"label":"wind"},"solar_water_heater":{"background-color":"#FFD700","dash":false,"label":"solar_water_heater"},"solar_system":{"background-color":"#E67A65","dash":false,"label":"solar_system"},"woody_biomass_boiler":{"background-color":" #128766","dash":false,"label":"woody_biomass_boiler"},"closed_loop":{"background-color":"#FC8A10","dash":false,"label":"closed_loop"},"open_loop":{"background-color":"#FECE9A","dash":false,"label":"open_loop"},"combined":{"background-color":"#B05C02","dash":false,"label":"combined"}}')
	, myChart
	, xAxesLabel = 'Fiscal Year'
	, yAxesLabel = 'Power installed[MW]'
	, makedData = makeDatasets(jsonval, sortLabels)
	, makedLabels = makeAxisXLabels(jsonval)
	, sheet = chartDataToArraySheet(jsonval, sortLabels, makedLabels, xAxesLabel, yAxesLabel)
;
registArraySheet(sheet, 'sheet 1');

//ダウンロードの非表示エリア登録
setSSDisables(['.not-print-area']);

//エクセルダウンロード用データの登録

var myChart = new Chart(ctx, {
	type: 'bar',
	data: {
		labels: makedLabels,
		datasets: makedData,

	},
	options: {
		title:{
			display:true,
			text:'Installed Power - all'
		},
		scales: {
			xAxes: [{
				display: true,
				stacked: true,
				scaleLabel: {
					display: true,
					labelString: xAxesLabel
				},
				ticks: {
					stepSize: 5

				},
				gridLines: {
					display: false
				}
			}],
			yAxes: [{
				display: true,
				stacked: true,
				scaleLabel: {
					display: true,
					labelString: yAxesLabel
				},
				ticks: {
					beginAtZero: true,
					callback: function(v){
						return (v | 0).toLocaleString();
					}
				},
			}]
		},
		tooltips: {
			mode: 'index',
			intersect: true,
			custom: function(tooltipModel){
				if(tooltipModel.body){
					tooltipModel.body.map(function(b){
						b.lines = b.lines.map(function(l){
							var d = l.replace(/[^\d]*: \-?(\d+)/, '$1') | 0;
							l = l.replace(/\d+/, d.toLocaleString());
//							console.log(l)
							return l;
						});
						return b;
					});

				}
			}
		}		
		
	}	
});


</script><br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/isep/isep-energychart.com/public_html/wp-content/themes/salient-child/template-parts/canvas-installed_amount.php:127) in <b>/home/isep/isep-energychart.com/public_html/wp-includes/rest-api/class-wp-rest-server.php</b> on line <b>1896</b><br />
<br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/isep/isep-energychart.com/public_html/wp-content/themes/salient-child/template-parts/canvas-installed_amount.php:127) in <b>/home/isep/isep-energychart.com/public_html/wp-includes/rest-api/class-wp-rest-server.php</b> on line <b>1896</b><br />
{"id":27,"date":"2017-11-30T16:09:22","date_gmt":"2017-11-30T07:09:22","guid":{"rendered":"https:\/\/isep-energychart.com\/?page_id=27"},"modified":"2018-11-21T10:46:01","modified_gmt":"2018-11-21T01:46:01","slug":"installedpower","status":"publish","type":"page","link":"https:\/\/isep-energychart.com\/en\/graphics\/installedpower\/","title":{"rendered":"Cumulative Installed Capacity (Electricity)"},"content":{"rendered":"[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; bottom_padding=&#8221;50&#8243; class=&#8221;not-print-area&#8221; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; shape_type=&#8221;&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][toggles style=&#8221;minimal&#8221;][toggle color=&#8221;Default&#8221; title=&#8221;Notes&#8221;][vc_column_text]\n<h6><span style=\"color: #00428d;\">Select power source to display<\/span><\/h6>\n<ul>\n<li>By clicking on any power source in the legend at the top of the graph, you can hide or show the power generation of that power source from the graph. You can select multiple power sources to hide or to show.<\/li>\n<\/ul>\n<h6><span style=\"color: #00428d;\">About each energy source<\/span><\/h6>\n<ul>\n<li>&#8220;Solar PV&#8221; data is estimated from the domestic shipment data by the Japan Photovoltaic Energy Association (JPEA) until FY2011, and is collected from FIT policy website by METI after FY2012.<\/li>\n<li>&#8220;Wind power&#8221; data is collected from the reports by the Japan Wind Power Association (JWPA).<\/li>\n<li>&#8220;Geothermal&#8221; data is collected from the report &#8220;Current situation and trend of geothermal power generation&#8221; by the Thermal and Nuclear Power Engineering Society until FY2011, and is collected from FIT policy website by METI after FY2012.<\/li>\n<li>&#8220;Biomass&#8221; data is collected from RPS law database until FY 2011, and is collected from FIT policy website by METI after FY2012.(excluding coal co-firing of biomass ratio of 60% or less).<\/li>\n<li>&#8220;Small hydro&#8221; data is collected from RPS law database and &#8220;Hydro Power Plant Database&#8221; by Japan Electric Power Civil Engineering Association about waterway type with a flow-in type or regulated reservoir with output of 10 MW or less until FY2011, and is collected from FIT policy website by METI after FY2012.<\/li>\n<\/ul>\n[\/vc_column_text][\/toggle][\/toggles][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;full_width_background&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; bottom_padding=&#8221;50&#8243; class=&#8221;not-print-area&#8221; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; shape_type=&#8221;&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":141,"parent":10,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-chart-2column.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-27","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":3,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":950,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/27\/revisions\/950"}],"up":[{"embeddable":true,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/10"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/media\/141"}],"wp:attachment":[{"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}