<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 jsonval = JSON.parse('[{"year":"1990","solar_water_heater":"10052","solar_system":"1568","disable_flg":"0"},{"year":"1991","solar_water_heater":"10239","solar_system":"1631","disable_flg":"0"},{"year":"1992","solar_water_heater":"10283","solar_system":"1681","disable_flg":"0"},{"year":"1993","solar_water_heater":"10285","solar_system":"1734","disable_flg":"0"},{"year":"1994","solar_water_heater":"10235","solar_system":"1794","disable_flg":"0"},{"year":"1995","solar_water_heater":"9948","solar_system":"1822","disable_flg":"0"},{"year":"1996","solar_water_heater":"9467","solar_system":"1809","disable_flg":"0"},{"year":"1997","solar_water_heater":"8735","solar_system":"1743","disable_flg":"0"},{"year":"1998","solar_water_heater":"7786","solar_system":"1612","disable_flg":"0"},{"year":"1999","solar_water_heater":"6878","solar_system":"1449","disable_flg":"0"},{"year":"2000","solar_water_heater":"6192","solar_system":"1315","disable_flg":"0"},{"year":"2001","solar_water_heater":"5616","solar_system":"1204","disable_flg":"0"},{"year":"2002","solar_water_heater":"5116","solar_system":"1134","disable_flg":"0"},{"year":"2003","solar_water_heater":"4708","solar_system":"1095","disable_flg":"0"},{"year":"2004","solar_water_heater":"4440","solar_system":"1088","disable_flg":"0"},{"year":"2005","solar_water_heater":"4206","solar_system":"1086","disable_flg":"0"},{"year":"2006","solar_water_heater":"4009","solar_system":"1069","disable_flg":"0"},{"year":"2007","solar_water_heater":"3815","solar_system":"1043","disable_flg":"0"},{"year":"2008","solar_water_heater":"3672","solar_system":"1016","disable_flg":"0"},{"year":"2009","solar_water_heater":"3457","solar_system":"982","disable_flg":"0"},{"year":"2010","solar_water_heater":"3219","solar_system":"956","disable_flg":"0"},{"year":"2011","solar_water_heater":"2990","solar_system":"924","disable_flg":"0"},{"year":"2012","solar_water_heater":"2766","solar_system":"889","disable_flg":"0"},{"year":"2013","solar_water_heater":"2557","solar_system":"852","disable_flg":"0"},{"year":"2014","solar_water_heater":"2381","solar_system":"811","disable_flg":"0"},{"year":"2015","solar_water_heater":"2233","solar_system":"763","disable_flg":"0"},{"year":"2016","solar_water_heater":"2123","solar_system":"707","disable_flg":"0"}]')
	, ctx = document.getElementById("myChart").getContext("2d")

	, sortLabels = JSON.parse('["solar_water_heater","solar_system"]')
	, 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":"hydro"},"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: makeAxisXLabels(jsonval),
		datasets: makeDatasets(jsonval, sortLabels),

	},
	options: {
		title:{
			display:true,
			text:''
		},
		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-installedamount_thermal.php:147) 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-installedamount_thermal.php:147) 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":494,"date":"2018-03-27T15:20:50","date_gmt":"2018-03-27T06:20:50","guid":{"rendered":"https:\/\/isep-energychart.com\/?page_id=494"},"modified":"2018-11-21T10:46:28","modified_gmt":"2018-11-21T01:46:28","slug":"installedheat","status":"publish","type":"page","link":"https:\/\/isep-energychart.com\/en\/graphics\/installedheat\/","title":{"rendered":"Cumulative Installed Capacity (Heat)"},"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;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; 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;\">Solar water heating system<\/span><\/h6>\n<ul>\n<li>Data is collected from the &#8220;Solar System Data Book&#8221; researched by JSSDA (Japan Solar System Development Association) and ISEP<\/li>\n<\/ul>\n<h6><span style=\"color: #00428d;\">Wood biomass boiler<\/span><\/h6>\n<ul>\n<li>Data is collected from the wood biomass energy usage investigation by Ministry of Agriculture, Forestry and Fisheries.<\/li>\n<\/ul>\n<h6><span style=\"color: #00428d;\">Geothermal heat pump<\/span><\/h6>\n<ul>\n<li>Data is collected from thermal energy usage survey of 2016 by Ministry of Environment.<\/li>\n<\/ul>\n[\/vc_column_text][vc_column_text][\/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;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; 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;&#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-494","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/494","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=494"}],"version-history":[{"count":4,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/494\/revisions"}],"predecessor-version":[{"id":954,"href":"https:\/\/isep-energychart.com\/en\/wp-json\/wp\/v2\/pages\/494\/revisions\/954"}],"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=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}