Я пытаюсь поместить несколько типов диаграмм amchart.js в столбцы начальной загрузки. Диаграммы типа "amStockGraph" отображаются без проблем, но когда я пытаюсь отобразить радарные диаграммы, они не отображаются, они просто пустые, и в консоли нет ошибок. Любое предложение будет высоко оценено. Вот код:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>AmStockGraph Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amstockchart/3.13.0/amstock.js"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Anime.JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<!-- Resources Amchart-->
<script src="https://www.amcharts.com/lib/3/radar.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<style>
a[href="http://www.amcharts.com/javascript-charts/"]{
display: none!important;
}
html,body{
margin:0;
padding:0;
}
@import url(http://fonts.googleapis.com/css?family=Lato:300);
body {
background-color:azure;
margin-left: 32px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
font-family: "Lato", Arial;
font-size: 14px;
line-height:16px;
}
hr{
border: 1px groove steelblue;
width: 100%;
opacity: .3
}
a:link{
color:#0055CC;
}
a:visited{
color:#990099;
}
a:hover{
color:#CC0000;
}
th{
background-color:#FFFFFF;
font-weight:bold;
}
td{
background-color:#ecf7fe;
text-align:center;
}
.flexCent{
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
padding-top: 0!important
}
.flexJust{
display: flex;
justify-content: center;
padding: 40px;
padding-top: 0!important
}
.mainRow{
width:100%;
height:400px;
margin-top: 15px;
}
.btn{
width: 180px;
height: 45px!important;
margin-bottom: 7px;
margin-top: 7px;
position: relative;
left: -350px;
}
.txtAlignleft{
text-align: left;
margin-top: 12px;
}
.txtAlignCent{
text-align: center;
margin: auto;
}
.btns2{
background-color: #00A3A1;
position: relative;
left: -350px;
}
.active {
display: block;
}
.inactive {
display: none;
}
.selects{
margin-top: 35px;
}
select{
margin-left: 3px;
margin-right: 30px;
}
</style>
<script type="text/javascript">
var chartData = [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#C6007E"},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#C6007E"},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#C6007E"},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#C6007E"},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#C6007E"},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#C6007E"},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#C6007E"},
{date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#C6007E"},
{date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#C6007E"},
{date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#C6007E"},
{date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#C6007E"},
{date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#C6007E"},
{date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#C6007E"},
{date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#C6007E"},
{date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#C6007E"},
{date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#C6007E"},
{date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#C6007E"},
{date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#C6007E"},
{date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#C6007E"},
{date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#C6007E"},
{date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#C6007E"},
{date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#C6007E"}
];
var chartData2 = [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#00bfff"},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#00bfff"},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#00bfff"},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#00bfff"},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#00bfff"},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#00bfff"},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#00bfff"},
{date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#00bfff"},
{date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#00bfff"},
{date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#00bfff"},
{date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#00bfff"},
{date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#00bfff"},
{date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#00bfff"},
{date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#00bfff"},
{date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#00bfff"},
{date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#00bfff"},
{date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#00bfff"},
{date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#00bfff"},
{date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#00bfff"},
{date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#00bfff"},
{date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#00bfff"},
{date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#00bfff"}
];
var chartData3 = [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#ffff00"},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#ffff00"},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#ffff00"},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#ffff00"},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#ffff00"},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#ffff00"},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#ffff00"},
{date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#ffff00"},
{date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#ffff00"},
{date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#ffff00"},
{date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#ffff00"},
{date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#ffff00"},
{date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#ffff00"},
{date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#ffff00"},
{date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#ffff00"},
{date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#ffff00"},
{date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#ffff00"},
{date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#ffff00"},
{date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#ffff00"},
{date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#ffff00"},
{date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#ffff00"},
{date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#ffff00"}
];
var chartData4 = [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#00ff80"},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#00ff80"},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#00ff80"},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#00ff80"},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#00ff80"},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#00ff80"},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#00ff80"},
{date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#00ff80"},
{date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#00ff80"},
{date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#00ff80"},
{date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#00ff80"},
{date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#00ff80"},
{date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#00ff80"},
{date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#00ff80"},
{date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#00ff80"},
{date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#00ff80"},
{date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#00ff80"},
{date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#00ff80"},
{date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#00ff80"},
{date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#00ff80"},
{date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#00ff80"},
{date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#00ff80"}
];
var chartData5 = [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#0040ff"},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#0040ff"},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#0040ff"},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#0040ff"},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#0040ff"},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#0040ff"},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#0040ff"},
{date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#0040ff"},
{date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#0040ff"},
{date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#0040ff"},
{date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#0040ff"},
{date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#0040ff"},
{date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#0040ff"},
{date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#0040ff"},
{date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#0040ff"},
{date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#0040ff"},
{date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#0040ff"},
{date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#0040ff"},
{date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#0040ff"},
{date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#0040ff"},
{date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#0040ff"},
{date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#0040ff"}
];
var chartData6 = [
{date: new Date(2011, 5, 1, 0, 0, 0, 0), val:10, color:"#ff0040"},
{date: new Date(2011, 5, 2, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 3, 0, 0, 0, 0), val:12, color:"#ff0040"},
{date: new Date(2011, 5, 4, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 5, 0, 0, 0, 0), val:10, color:"#ff0040"},
{date: new Date(2011, 5, 6, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 7, 0, 0, 0, 0), val:13, color:"#ff0040"},
{date: new Date(2011, 5, 8, 0, 0, 0, 0), val:14, color:"#ff0040"},
{date: new Date(2011, 5, 9, 0, 0, 0, 0), val:17, color:"#ff0040"},
{date: new Date(2011, 5, 10, 0, 0, 0, 0), val:13,color:"#ff0040"},
{date: new Date(2011, 5, 11, 0, 0, 0, 0), val:10, color:"#ff0040"},
{date: new Date(2011, 5, 12, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 13, 0, 0, 0, 0), val:12, color:"#ff0040"},
{date: new Date(2011, 5, 14, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 15, 0, 0, 0, 0), val:10, color:"#ff0040"},
{date: new Date(2011, 5, 16, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 17, 0, 0, 0, 0), val:13, color:"#ff0040"},
{date: new Date(2011, 5, 18, 0, 0, 0, 0), val:14, color:"#ff0040"},
{date: new Date(2011, 5, 19, 0, 0, 0, 0), val:17, color:"#ff0040"},
{date: new Date(2011, 5, 20, 0, 0, 0, 0), val:13,color:"#ff0040"},
{date: new Date(2011, 5, 21, 0, 0, 0, 0), val:10, color:"#ff0040"},
{date: new Date(2011, 5, 22, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 23, 0, 0, 0, 0), val:12, color:"#ff0040"},
{date: new Date(2011, 5, 24, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 25, 0, 0, 0, 0), val:10, color:"#ff0040"},
{date: new Date(2011, 5, 26, 0, 0, 0, 0), val:11, color:"#ff0040"},
{date: new Date(2011, 5, 27, 0, 0, 0, 0), val:13, color:"#ff0040"},
{date: new Date(2011, 5, 28, 0, 0, 0, 0), val:14, color:"#ff0040"},
{date: new Date(2011, 5, 29, 0, 0, 0, 0), val:17, color:"#ff0040"},
{date: new Date(2011, 5, 30, 0, 0, 0, 0), val:13,color:"#ff0040"}
];
radarData = [ {
"country": "India",
"mmUSD": 156.9
}, {
"country": "Chile",
"mmUSD": 131.1
}, {
"country": "US",
"mmUSD": 115.8
}, {
"country": "UK",
"mmUSD": 109.9
}, {
"country": "China",
"mmUSD": 108.3
}, {
"country": "Romania",
"mmUSD": 99
} ];
function drawChart(dataChart) {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "./amcharts";
var dataSet = new AmCharts.DataSet();
dataSet.dataProvider = dataChart;
dataSet.fieldMappings = [{fromField:"val", toField:"value"}];
dataSet.categoryField = "date";
chart.dataSets = [dataSet];
var stockPanel = new AmCharts.StockPanel();
chart.panels = [stockPanel];
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.startDuration = 1;
chart.panelsSettings = panelsSettings;
var graph = new AmCharts.StockGraph();
graph.valueField = "value";
graph.type = "column";
graph.fillAlphas = 1;
graph.showHandOnHover = true;
graph.title = "First Graph";
graph.cornerRadiusTop = 6;
stockPanel.addStockGraph(graph);
graph.colorField = "color";
graph.lineAlpha = 0;
chart.write("chartdiv");
}
AmCharts.ready(function() {
drawChart(chartData);
});
function changeChart() {
if($("#country").val() == 1 && $("#city").val()== 1) {
drawChart(chartData);
}
if($("#country").val() == 1 && $("#city").val()== 2) {
drawChart(chartData2);
}
if($("#country").val() == 2 && $("#city").val()== 1) {
drawChart(chartData3);
}
if($("#country").val() == 2 && $("#city").val()== 2) {
drawChart(chartData4);
}
if($("#country").val() == 3 && $("#city").val()== 1) {
drawChart(chartData5);
}
if($("#country").val() == 3 && $("#city").val()== 2) {
drawChart(chartData6);
}
}
function drawRadar(dataRadar) {
var chart = AmCharts.makeChart( "chartdiv", {
"type": "radar",
"theme": "light",
"dataProvider": dataRadar,
"valueAxes": [ {
"axisTitleOffset": 20,
"minimum": 0,
"axisAlpha": 0.15
} ],
"startDuration": 2,
"graphs": [ {
"balloonText": "[[value]] mmUSD of beer per year",
"bullet": "round",
"lineThickness": 2,
"valueField": "mmUSD"
} ],
"categoryField": "country",
"export": {
"enabled": false
}
} );
}
function changeToRadar() {
drawRadar(radarData);
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" style="background-color: white;">
<img src="./amcharts/logos.svg" alt="">
</div>
<hr>
</div>
<div class="row mainRow" id="penner">
<div class="col-xs-12 col-md-3 txtAlignCent line">
<button class="btn btn-primary linear btnScale">controller 1</button>
<button class="btn btn-primary InQuad btnScale" onclick="changeToRadar()">controller 2</button>
<button class="btn btn-primary InCubic btnScale">controller 3</button>
</div>
<div class="col-xs-12 col-md-6">
<div id="chartdiv" class="mainRow "></div>
<!--<div id="chartdiv2" class="mainRow "></div>
<div id="chartdiv3" class="mainRow "></div>
<div id="chartdiv4" class="mainRow "></div>
<div id="chartdiv5" class="mainRow "></div>
<div id="chartdiv6" class="mainRow "></div> -->
</div>
<div class="col-xs-12 col-md-3 txtAlignleft" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum consectetur cupiditate, fugiat dolore voluptatibus eaque, consequatur, excepturi, vero dolorum reiciendis aliquid similique accusantium voluptate culpa repudiandae qui. Tenetur, praesentium ratione.</p>
</div>
</div>
<div class="row selects">
<div class="col-sm-3">
</div>
<div class="col-sm-6 d-flex justify-content-center">
<select id="country" class="mdb-select" onchange= "changeChart()" >
<option value="1" selected>Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<select id="city" class="mdb-select" onchange= "changeChart()">
<option value="1" selected >City 1</option>
<option value="2">City 2</option>
</select>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<script>
var penner = anime.timeline();
penner
.add({
targets: '#penner .linear', translateX: 350, offset: 0,
duration: 3000,
elasticity: 100,
})
.add({
targets: '#penner .InQuad', translateX: 350, offset: 0,
duration: 3000,
elasticity: 200,
})
.add({
targets: '#penner .InCubic', translateX: 350, offset: 0,
duration: 3000,
elasticity: 300,
})
.add({
targets: '#penner2 .InQuart', translateX: 350, offset: 0,
duration: 3000,
elasticity: 400,
})
.add({
targets: '#penner2 .InQuint', translateX: 350, offset: 0,
duration: 3000,
elasticity: 500,
})
.add({
targets: '#penner2 .InSine', translateX: 350, offset: 0,
duration: 3000,
elasticity: 600,
})
</script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>