am5.ready(function() {




//-------------------------------------------------------------------------- start
// day//--------------------------------------------------------------------------

//random
var param = num = Math.random() * (100000);

//read json
am5.net.load("/trading-data/currency-strength/day.json?"+param).then( function(result) {
	var chart_data;
	chart_data = am5.JSONParser.parse(result.response);


	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element 
	var root = am5.Root.new("chartdiv_day");

	const myTheme = am5.Theme.new(root);

	myTheme.rule("AxisLabel", ["minor"]).setAll({
	  dy:1
	});

	myTheme.rule("Grid", ["x"]).setAll({
	  strokeOpacity: 0.05
	});

	myTheme.rule("Grid", ["x", "minor"]).setAll({
	  strokeOpacity: 0.05
	});

	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
		am5themes_Animated.new(root),
		myTheme
	]);

	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(am5xy.XYChart.new(root, {
		panX: true,
		panY: true,
		wheelX: "panX",
		wheelY: "zoomX",
		maxTooltipDistance: 0,
		pinchZoomX:true
	}));


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
		maxDeviation: 0.2,
		baseInterval: {
			//timeUnit: "day",
			//timeUnit: "hour",
			//timeUnit: "minute",
			timeUnit: "minute",
			count: 1
		},
		renderer: am5xy.AxisRendererX.new(root, {
			minorGridEnabled: true
		}),
		tooltip: am5.Tooltip.new(root, {})
	}));

	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	  renderer: am5xy.AxisRendererY.new(root, {})
	}));

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

	//color setting
	chart.get("colors").set("colors", [
		am5.color(0xDCAF67),
		am5.color(0xDC6967),
		am5.color(0x67DADC),
		am5.color(0x7DDC67),
		am5.color(0X6771DC),
		am5.color(0xC767DC),
		am5.color(0x8d8d8d)
	]);
	

	const currency = [
		'USD',
		'EUR',
		'JPY',
		'GBP',
		'AUD',
		'CAD',
		'CHF',
	];

	for (var i = 0; i < 7; i++) {
		var series = chart.series.push(am5xy.LineSeries.new(root, {
			name: currency[i],
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value",
			valueXField: "date",
			strokeWidth: 3,
			legendValueText: "{valueY}",
			tooltip: am5.Tooltip.new(root, {
				pointerOrientation: "horizontal",
				labelText: "{valueY}"
			})
		}));

		/*
		  series.bullets.push(function() {
		  return am5.Bullet.new(root, {
			sprite: am5.Picture.new(root, {
			  src: "test.png",
			  width: 32,
			  height: 32,
			  x: am5.percent(30),
			  y: am5.percent(50),
			  centerX: am5.percent(50),
			  centerY: am5.percent(50),
			  //src: "test.png"
			})
		  });
		});
		*/

		series.data.setAll(chart_data[i]);
		//console.log(data);
		series.strokes.template.setAll({
			strokeWidth: 2
		});

		// Make stuff animate on load
		// https://www.amcharts.com/docs/v5/concepts/animations/
		series.appear();
	}



	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
		behavior: "none"
	}));
	cursor.lineY.set("visible", false);


	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	/*
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	  orientation: "horizontal"
	}));

	chart.set("scrollbarY", am5.Scrollbar.new(root, {
	  orientation: "vertical"
	}));
	*/


	// Add legend
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	var legend = chart.rightAxesContainer.children.push(am5.Legend.new(root, {
		width: 120,
		paddingLeft: 15,
		paddingTop: 50,
		height: am5.percent(100)
	}));


	// When legend item container is hovered, dim all the series except the hovered one
	legend.itemContainers.template.events.on("pointerover", function(e) {
		var itemContainer = e.target;

		// As series list is data of a legend, dataContext is series
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			if (chartSeries != series) {
				chartSeries.strokes.template.setAll({
					strokeOpacity: 0.15,
					stroke: am5.color(0x000000)
				});
			} else {
				chartSeries.strokes.template.setAll({
					strokeWidth: 3
				});
			}
		})
	});


	// When legend item container is unhovered, make all series as they are
	legend.itemContainers.template.events.on("pointerout", function(e) {
		var itemContainer = e.target;
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			chartSeries.strokes.template.setAll({
				strokeOpacity: 1,
				strokeWidth: 2,
				stroke: chartSeries.get("fill")
			});
		});
	});


	legend.itemContainers.template.set("width", am5.p100);
	legend.valueLabels.template.setAll({
		width: am5.p100,
		textAlign: "right",
	});


	// It's is important to set legend data after all the events are set on template, otherwise events won't be copied
	legend.data.setAll(chart.series.values);


	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);


}); // end read json

//--------------------------------------------------------------------------
// day//-------------------------------------------------------------------------- end





//-------------------------------------------------------------------------- start
// monday//--------------------------------------------------------------------------

//random
var param = num = Math.random() * (100000);

//read json
am5.net.load("/trading-data/currency-strength/monday.json?"+param).then( function(result) {
	var chart_data;
	chart_data = am5.JSONParser.parse(result.response);


	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element 
	var root = am5.Root.new("chartdiv_monday");

	const myTheme = am5.Theme.new(root);

	myTheme.rule("AxisLabel", ["minor"]).setAll({
	  dy:1
	});

	myTheme.rule("Grid", ["x"]).setAll({
	  strokeOpacity: 0.05
	});

	myTheme.rule("Grid", ["x", "minor"]).setAll({
	  strokeOpacity: 0.05
	});

	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
		am5themes_Animated.new(root),
		myTheme
	]);

	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(am5xy.XYChart.new(root, {
		panX: true,
		panY: true,
		wheelX: "panX",
		wheelY: "zoomX",
		maxTooltipDistance: 0,
		pinchZoomX:true
	}));


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
		maxDeviation: 0.2,
		baseInterval: {
			//timeUnit: "day",
			//timeUnit: "hour",
			//timeUnit: "minute",
			timeUnit: "hour",
			count: 1
		},
		renderer: am5xy.AxisRendererX.new(root, {
			minorGridEnabled: true
		}),
		tooltip: am5.Tooltip.new(root, {})
	}));

	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	  renderer: am5xy.AxisRendererY.new(root, {})
	}));

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

	//color setting
	chart.get("colors").set("colors", [
		am5.color(0xDCAF67),
		am5.color(0xDC6967),
		am5.color(0x67DADC),
		am5.color(0x7DDC67),
		am5.color(0X6771DC),
		am5.color(0xC767DC),
		am5.color(0x8d8d8d)
	]);
	

	const currency = [
		'USD',
		'EUR',
		'JPY',
		'GBP',
		'AUD',
		'CAD',
		'CHF',
	];

	for (var i = 0; i < 7; i++) {
		var series = chart.series.push(am5xy.LineSeries.new(root, {
			name: currency[i],
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value",
			valueXField: "date",
			strokeWidth: 3,
			legendValueText: "{valueY}",
			tooltip: am5.Tooltip.new(root, {
				pointerOrientation: "horizontal",
				labelText: "{valueY}"
			})
		}));

		/*
		  series.bullets.push(function() {
		  return am5.Bullet.new(root, {
			sprite: am5.Picture.new(root, {
			  src: "test.png",
			  width: 32,
			  height: 32,
			  x: am5.percent(30),
			  y: am5.percent(50),
			  centerX: am5.percent(50),
			  centerY: am5.percent(50),
			  //src: "test.png"
			})
		  });
		});
		*/

		series.data.setAll(chart_data[i]);
		//console.log(data);
		series.strokes.template.setAll({
			strokeWidth: 2
		});

		// Make stuff animate on load
		// https://www.amcharts.com/docs/v5/concepts/animations/
		series.appear();
	}



	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
		behavior: "none"
	}));
	cursor.lineY.set("visible", false);


	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	/*
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	  orientation: "horizontal"
	}));

	chart.set("scrollbarY", am5.Scrollbar.new(root, {
	  orientation: "vertical"
	}));
	*/


	// Add legend
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	var legend = chart.rightAxesContainer.children.push(am5.Legend.new(root, {
		width: 120,
		paddingLeft: 15,
		paddingTop: 50,
		height: am5.percent(100)
	}));


	// When legend item container is hovered, dim all the series except the hovered one
	legend.itemContainers.template.events.on("pointerover", function(e) {
		var itemContainer = e.target;

		// As series list is data of a legend, dataContext is series
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			if (chartSeries != series) {
				chartSeries.strokes.template.setAll({
					strokeOpacity: 0.15,
					stroke: am5.color(0x000000)
				});
			} else {
				chartSeries.strokes.template.setAll({
					strokeWidth: 3
				});
			}
		})
	});


	// When legend item container is unhovered, make all series as they are
	legend.itemContainers.template.events.on("pointerout", function(e) {
		var itemContainer = e.target;
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			chartSeries.strokes.template.setAll({
				strokeOpacity: 1,
				strokeWidth: 2,
				stroke: chartSeries.get("fill")
			});
		});
	});


	legend.itemContainers.template.set("width", am5.p100);
	legend.valueLabels.template.setAll({
		width: am5.p100,
		textAlign: "right",
	});


	// It's is important to set legend data after all the events are set on template, otherwise events won't be copied
	legend.data.setAll(chart.series.values);


	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);


}); // end read json

//--------------------------------------------------------------------------
// monday//-------------------------------------------------------------------------- end





//-------------------------------------------------------------------------- start
// week//--------------------------------------------------------------------------

//random
var param = num = Math.random() * (100000);

//read json
am5.net.load("/trading-data/currency-strength/week.json?"+param).then( function(result) {
	var chart_data;
	chart_data = am5.JSONParser.parse(result.response);


	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element 
	var root = am5.Root.new("chartdiv_week");

	const myTheme = am5.Theme.new(root);

	myTheme.rule("AxisLabel", ["minor"]).setAll({
	  dy:1
	});

	myTheme.rule("Grid", ["x"]).setAll({
	  strokeOpacity: 0.05
	});

	myTheme.rule("Grid", ["x", "minor"]).setAll({
	  strokeOpacity: 0.05
	});

	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
		am5themes_Animated.new(root),
		myTheme
	]);

	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(am5xy.XYChart.new(root, {
		panX: true,
		panY: true,
		wheelX: "panX",
		wheelY: "zoomX",
		maxTooltipDistance: 0,
		pinchZoomX:true
	}));


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
		maxDeviation: 0.2,
		baseInterval: {
			//timeUnit: "day",
			//timeUnit: "hour",
			//timeUnit: "minute",
			timeUnit: "hour",
			count: 1
		},
		renderer: am5xy.AxisRendererX.new(root, {
			minorGridEnabled: true
		}),
		tooltip: am5.Tooltip.new(root, {})
	}));

	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	  renderer: am5xy.AxisRendererY.new(root, {})
	}));

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

	//color setting
	chart.get("colors").set("colors", [
		am5.color(0xDCAF67),
		am5.color(0xDC6967),
		am5.color(0x67DADC),
		am5.color(0x7DDC67),
		am5.color(0X6771DC),
		am5.color(0xC767DC),
		am5.color(0x8d8d8d)
	]);
	

	const currency = [
		'USD',
		'EUR',
		'JPY',
		'GBP',
		'AUD',
		'CAD',
		'CHF',
	];

	for (var i = 0; i < 7; i++) {
		var series = chart.series.push(am5xy.LineSeries.new(root, {
			name: currency[i],
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value",
			valueXField: "date",
			strokeWidth: 3,
			legendValueText: "{valueY}",
			tooltip: am5.Tooltip.new(root, {
				pointerOrientation: "horizontal",
				labelText: "{valueY}"
			})
		}));

		/*
		  series.bullets.push(function() {
		  return am5.Bullet.new(root, {
			sprite: am5.Picture.new(root, {
			  src: "test.png",
			  width: 32,
			  height: 32,
			  x: am5.percent(30),
			  y: am5.percent(50),
			  centerX: am5.percent(50),
			  centerY: am5.percent(50),
			  //src: "test.png"
			})
		  });
		});
		*/

		series.data.setAll(chart_data[i]);
		//console.log(data);
		series.strokes.template.setAll({
			strokeWidth: 2
		});

		// Make stuff animate on load
		// https://www.amcharts.com/docs/v5/concepts/animations/
		series.appear();
	}



	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
		behavior: "none"
	}));
	cursor.lineY.set("visible", false);


	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	/*
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	  orientation: "horizontal"
	}));

	chart.set("scrollbarY", am5.Scrollbar.new(root, {
	  orientation: "vertical"
	}));
	*/


	// Add legend
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	var legend = chart.rightAxesContainer.children.push(am5.Legend.new(root, {
		width: 120,
		paddingLeft: 15,
		paddingTop: 50,
		height: am5.percent(100)
	}));


	// When legend item container is hovered, dim all the series except the hovered one
	legend.itemContainers.template.events.on("pointerover", function(e) {
		var itemContainer = e.target;

		// As series list is data of a legend, dataContext is series
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			if (chartSeries != series) {
				chartSeries.strokes.template.setAll({
					strokeOpacity: 0.15,
					stroke: am5.color(0x000000)
				});
			} else {
				chartSeries.strokes.template.setAll({
					strokeWidth: 3
				});
			}
		})
	});


	// When legend item container is unhovered, make all series as they are
	legend.itemContainers.template.events.on("pointerout", function(e) {
		var itemContainer = e.target;
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			chartSeries.strokes.template.setAll({
				strokeOpacity: 1,
				strokeWidth: 2,
				stroke: chartSeries.get("fill")
			});
		});
	});


	legend.itemContainers.template.set("width", am5.p100);
	legend.valueLabels.template.setAll({
		width: am5.p100,
		textAlign: "right",
	});


	// It's is important to set legend data after all the events are set on template, otherwise events won't be copied
	legend.data.setAll(chart.series.values);


	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);


}); // end read json

//--------------------------------------------------------------------------
// week//-------------------------------------------------------------------------- end





//-------------------------------------------------------------------------- start
// 1month//--------------------------------------------------------------------------

//random
var param = num = Math.random() * (100000);

//read json
am5.net.load("/trading-data/currency-strength/1month.json?"+param).then( function(result) {
	var chart_data;
	chart_data = am5.JSONParser.parse(result.response);


	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element 
	var root = am5.Root.new("chartdiv_1month");

	const myTheme = am5.Theme.new(root);

	myTheme.rule("AxisLabel", ["minor"]).setAll({
	  dy:1
	});

	myTheme.rule("Grid", ["x"]).setAll({
	  strokeOpacity: 0.05
	});

	myTheme.rule("Grid", ["x", "minor"]).setAll({
	  strokeOpacity: 0.05
	});

	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
		am5themes_Animated.new(root),
		myTheme
	]);

	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(am5xy.XYChart.new(root, {
		panX: true,
		panY: true,
		wheelX: "panX",
		wheelY: "zoomX",
		maxTooltipDistance: 0,
		pinchZoomX:true
	}));


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
		maxDeviation: 0.2,
		baseInterval: {
			//timeUnit: "day",
			//timeUnit: "hour",
			//timeUnit: "minute",
			timeUnit: "hour",
			count: 1
		},
		renderer: am5xy.AxisRendererX.new(root, {
			minorGridEnabled: true
		}),
		tooltip: am5.Tooltip.new(root, {})
	}));

	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	  renderer: am5xy.AxisRendererY.new(root, {})
	}));

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

	//color setting
	chart.get("colors").set("colors", [
		am5.color(0xDCAF67),
		am5.color(0xDC6967),
		am5.color(0x67DADC),
		am5.color(0x7DDC67),
		am5.color(0X6771DC),
		am5.color(0xC767DC),
		am5.color(0x8d8d8d)
	]);
	

	const currency = [
		'USD',
		'EUR',
		'JPY',
		'GBP',
		'AUD',
		'CAD',
		'CHF',
	];

	for (var i = 0; i < 7; i++) {
		var series = chart.series.push(am5xy.LineSeries.new(root, {
			name: currency[i],
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value",
			valueXField: "date",
			strokeWidth: 3,
			legendValueText: "{valueY}",
			tooltip: am5.Tooltip.new(root, {
				pointerOrientation: "horizontal",
				labelText: "{valueY}"
			})
		}));

		/*
		  series.bullets.push(function() {
		  return am5.Bullet.new(root, {
			sprite: am5.Picture.new(root, {
			  src: "test.png",
			  width: 32,
			  height: 32,
			  x: am5.percent(30),
			  y: am5.percent(50),
			  centerX: am5.percent(50),
			  centerY: am5.percent(50),
			  //src: "test.png"
			})
		  });
		});
		*/

		series.data.setAll(chart_data[i]);
		//console.log(data);
		series.strokes.template.setAll({
			strokeWidth: 2
		});

		// Make stuff animate on load
		// https://www.amcharts.com/docs/v5/concepts/animations/
		series.appear();
	}



	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
		behavior: "none"
	}));
	cursor.lineY.set("visible", false);


	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	/*
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	  orientation: "horizontal"
	}));

	chart.set("scrollbarY", am5.Scrollbar.new(root, {
	  orientation: "vertical"
	}));
	*/


	// Add legend
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	var legend = chart.rightAxesContainer.children.push(am5.Legend.new(root, {
		width: 120,
		paddingLeft: 15,
		paddingTop: 50,
		height: am5.percent(100)
	}));


	// When legend item container is hovered, dim all the series except the hovered one
	legend.itemContainers.template.events.on("pointerover", function(e) {
		var itemContainer = e.target;

		// As series list is data of a legend, dataContext is series
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			if (chartSeries != series) {
				chartSeries.strokes.template.setAll({
					strokeOpacity: 0.15,
					stroke: am5.color(0x000000)
				});
			} else {
				chartSeries.strokes.template.setAll({
					strokeWidth: 3
				});
			}
		})
	});


	// When legend item container is unhovered, make all series as they are
	legend.itemContainers.template.events.on("pointerout", function(e) {
		var itemContainer = e.target;
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			chartSeries.strokes.template.setAll({
				strokeOpacity: 1,
				strokeWidth: 2,
				stroke: chartSeries.get("fill")
			});
		});
	});


	legend.itemContainers.template.set("width", am5.p100);
	legend.valueLabels.template.setAll({
		width: am5.p100,
		textAlign: "right",
	});


	// It's is important to set legend data after all the events are set on template, otherwise events won't be copied
	legend.data.setAll(chart.series.values);


	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);


}); // end read json

//--------------------------------------------------------------------------
// 1month//-------------------------------------------------------------------------- end





//-------------------------------------------------------------------------- start
// 3month//--------------------------------------------------------------------------

//random
var param = num = Math.random() * (100000);

//read json
am5.net.load("/trading-data/currency-strength/3month.json?"+param).then( function(result) {
	var chart_data;
	chart_data = am5.JSONParser.parse(result.response);


	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element 
	var root = am5.Root.new("chartdiv_3month");

	const myTheme = am5.Theme.new(root);

	myTheme.rule("AxisLabel", ["minor"]).setAll({
	  dy:1
	});

	myTheme.rule("Grid", ["x"]).setAll({
	  strokeOpacity: 0.05
	});

	myTheme.rule("Grid", ["x", "minor"]).setAll({
	  strokeOpacity: 0.05
	});

	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
		am5themes_Animated.new(root),
		myTheme
	]);

	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(am5xy.XYChart.new(root, {
		panX: true,
		panY: true,
		wheelX: "panX",
		wheelY: "zoomX",
		maxTooltipDistance: 0,
		pinchZoomX:true
	}));


	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
		maxDeviation: 0.2,
		baseInterval: {
			//timeUnit: "day",
			//timeUnit: "hour",
			//timeUnit: "minute",
			timeUnit: "hour",
			count: 1
		},
		renderer: am5xy.AxisRendererX.new(root, {
			minorGridEnabled: true
		}),
		tooltip: am5.Tooltip.new(root, {})
	}));

	var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
	  renderer: am5xy.AxisRendererY.new(root, {})
	}));

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

	//color setting
	chart.get("colors").set("colors", [
		am5.color(0xDCAF67),
		am5.color(0xDC6967),
		am5.color(0x67DADC),
		am5.color(0x7DDC67),
		am5.color(0X6771DC),
		am5.color(0xC767DC),
		am5.color(0x8d8d8d)
	]);
	

	const currency = [
		'USD',
		'EUR',
		'JPY',
		'GBP',
		'AUD',
		'CAD',
		'CHF',
	];

	for (var i = 0; i < 7; i++) {
		var series = chart.series.push(am5xy.LineSeries.new(root, {
			name: currency[i],
			xAxis: xAxis,
			yAxis: yAxis,
			valueYField: "value",
			valueXField: "date",
			strokeWidth: 3,
			legendValueText: "{valueY}",
			tooltip: am5.Tooltip.new(root, {
				pointerOrientation: "horizontal",
				labelText: "{valueY}"
			})
		}));

		/*
		  series.bullets.push(function() {
		  return am5.Bullet.new(root, {
			sprite: am5.Picture.new(root, {
			  src: "test.png",
			  width: 32,
			  height: 32,
			  x: am5.percent(30),
			  y: am5.percent(50),
			  centerX: am5.percent(50),
			  centerY: am5.percent(50),
			  //src: "test.png"
			})
		  });
		});
		*/

		series.data.setAll(chart_data[i]);
		//console.log(data);
		series.strokes.template.setAll({
			strokeWidth: 2
		});

		// Make stuff animate on load
		// https://www.amcharts.com/docs/v5/concepts/animations/
		series.appear();
	}



	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
		behavior: "none"
	}));
	cursor.lineY.set("visible", false);


	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	/*
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	  orientation: "horizontal"
	}));

	chart.set("scrollbarY", am5.Scrollbar.new(root, {
	  orientation: "vertical"
	}));
	*/


	// Add legend
	// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
	var legend = chart.rightAxesContainer.children.push(am5.Legend.new(root, {
		width: 120,
		paddingLeft: 15,
		paddingTop: 50,
		height: am5.percent(100)
	}));


	// When legend item container is hovered, dim all the series except the hovered one
	legend.itemContainers.template.events.on("pointerover", function(e) {
		var itemContainer = e.target;

		// As series list is data of a legend, dataContext is series
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			if (chartSeries != series) {
				chartSeries.strokes.template.setAll({
					strokeOpacity: 0.15,
					stroke: am5.color(0x000000)
				});
			} else {
				chartSeries.strokes.template.setAll({
					strokeWidth: 3
				});
			}
		})
	});


	// When legend item container is unhovered, make all series as they are
	legend.itemContainers.template.events.on("pointerout", function(e) {
		var itemContainer = e.target;
		var series = itemContainer.dataItem.dataContext;

		chart.series.each(function(chartSeries) {
			chartSeries.strokes.template.setAll({
				strokeOpacity: 1,
				strokeWidth: 2,
				stroke: chartSeries.get("fill")
			});
		});
	});


	legend.itemContainers.template.set("width", am5.p100);
	legend.valueLabels.template.setAll({
		width: am5.p100,
		textAlign: "right",
	});


	// It's is important to set legend data after all the events are set on template, otherwise events won't be copied
	legend.data.setAll(chart.series.values);


	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	chart.appear(1000, 100);


}); // end read json

//--------------------------------------------------------------------------
// 3month//-------------------------------------------------------------------------- end








}); // end am5.ready()