Search code examples
javascriptbootstrap-4amchartsradar-chart

amchart.js radar chart invisible when inserted inside bootstrap cols

I'm trying to put several types of amchart.js charts in bootstrap columns. The charts of type "amStockGraph" are rendered with no problem, but when I try to render radar charts they dont show, they are just blank, and there is no error in console.. Any suggestion would be highly appreciated. Here is the code:

<!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>
Solution

  • It's not showing up because you're mixing AmCharts versions in your code. You're loading an ancient version of amcharts and stock charts from cloudflare (3.13.0) and which won't work with radar.js from the latest version on the amcharts.com domain. Switching your cloudflare includes to the amcharts.com ones will fix the problem:

    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<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>