Преобразовать селектор периода графика акций amCharts в выпадающий список

Question

Я использую график акций amCharts, чтобы показать сделки за определенный период времени.Я использую php и ajax для получения значений.

Теперь у меня есть селектор периода в качестве кнопок, но они мне нужны как выбор.Когда пользователь выбирает значение из раскрывающегося списка, масштаб диаграммы должен соответственно изменяться.Возможно ли это сделать?

Ниже приведен мой код для получения графика акций.Пожалуйста, помогите.

    <div id="chartdiv" style="width:100%; height:400px;"></div>

<select id="mySelect" onchange="test()">
    <option value="5">5
    <option value="15">15
    <option value="30">30
    <option value="60">1H
    <option value="D">1D
</select>

<script type="text/javascript">
  AmCharts.addInitHandler(function (chart) {
  }, ["stock"]);
  var chartData = generateChartData();
  console.log(chartData);


  var chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "theme": "light",
    "autoMarginOffset": 30,
    "valueAxesSettings": {
      "position": "right",
      "inside": false,
      "autoMargins": true,
      "axisColor": "#000000",
      "tickLength": 1
    },
    "categoryAxesSettings": {
      "parseDates": true,
      "minPeriod": "ss",
      "axisColor": "#000000",
      "tickLength": 1
    },
    "mouseWheelZoomEnabled": true,
    "dataSets": [{
      "fieldMappings": [{
        "fromField": "open",
        "toField": "open"
      }, {
        "fromField": "close",
        "toField": "close"
      }, {
        "fromField": "high",
        "toField": "high"
      }, {
        "fromField": "low",
        "toField": "low"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],

      "color": "#7f8da9",
      "dataProvider": chartData,
      "title": '<?php echo $symbol; ?>',
      "categoryField": "date"
    }
    ],


    "panels": [{
      "urlTarget": "_blank",
      "showCategoryAxis": true,
      "percentHeight": 70,
      "valueAxes": [{
        "dashLength": 5
      }],

      "categoryAxis": {
        "dashLength": 5
      },

      "stockGraphs": [{
        "id": "g1",
        "type": "candlestick",
        "proCandlesticks": false,
        "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
        "openField": "open",
        "closeField": "close",
        "highField": "high",
        "lowField": "low",
        "lineAlpha": 1,
        "lineColor": "#53b987",
        "fillColors": "#53b987",
        "fillAlphas": 0.9,
        "negativeFillColors": "#eb4d5c",
        "negativeLineColor": "#eb4d5c",
        "useDataSetColors": false,

        "title": "Volume:",
        "valueField": "volume"
      }],

      "stockLegend": {
        "valueTextRegular": undefined,
        "periodValueTextComparing": "[[percents.value.close]]%"
      }
    }
    ],

    "chartScrollbarSettings": {
      "updateOnReleaseOnly": true,
      "autoGridCount": true,
      "graph": "g1",
      "graphType": "line",
      "scrollbarHeight": 30
    },

    "periodSelector": {
      "position": "top",
      "inputFieldsEnabled": false,
      "periodsText": "",
      "dateFormat": "YYYY-MM-DD JJ:NN",
      "periods": [{
        "period": "hh",
        "count": 1,
        "label": "5",
        "selected": true

      }, {
        "period": "hh",
        "count": 6,
        "label": "15"
      }, {
        "period": "hh",
        "count": 4,
        "label": "30"
      }, {
        "period": "hh",
        "count": 12,
        "label": "1H"
      }, {
        "period": "dd",
        "count": 60,
        "label": "1D"
      }]
    },

    "listeners": [
      {
        "event": "rendered",
        "method": function (e) {

          if (e.chart.ignoreResize) {
            e.chart.ignoreResize = false;
            return;
          }

          // init
          var margins = {
            "left": 0,
            "right": 0
          };

          // iterate thorugh all of the panels
          for (var p = 0; p < chart.panels.length; p++) {
            var panel = chart.panels[p];

            // iterate through all of the axis
            for (var i = 0; i < panel.valueAxes.length; i++) {
              var axis = panel.valueAxes[i];
              if (axis.inside !== false) {
                continue;
              }

              var axisWidth = axis.getBBox().width + 10;
              if (axisWidth > margins[axis.position]) {
                margins[axis.position] = axisWidth;
              }
            }

          }

          // set margins
          if (margins.left || margins.right) {
            chart.panelsSettings.marginLeft = margins.left;
            chart.panelsSettings.marginRight = margins.right;
            e.chart.ignoreResize = true;
            chart.invalidateSize();
          }
        }
      },
      {
        "event": "zoomed",
        "method": function (e) {
          e.chart.lastZoomed = e;
          //console.log(e);
          console.log("ignoring zoomed");
        }
      },

    ]

  });


  setInterval(function () {
    //Setting the new data to the graph
    chart.dataProvider = generateChartData();
    chart.validateData();
  }, 10000);


  function test() {
    var resolution = $("#mySelect").val();
    //console.log(resolution);
    var pp, count;
    if (resolution == "D") {
      resolution = "1D";
      pp = 'dd';
      count = 60;
    }
    else if (resolution == "60") {
      resolution = "1H";
      pp = 'hh';
      count = 12;
    }
    else if (resolution == "30") {
      pp = 'hh';
      count = 4;
    }
    else if (resolution == "15") {
      pp = 'hh';
      count = 6;
    }
    else if (resolution == "5") {
      pp = 'hh';
      count = 1;
    }
    else {
      pp = 'hh';
    }
    //console.log(pp);
    for (var x in chart.periodSelector.periods) {
      var period = chart.periodSelector.periods[x];
      if (pp == period.period && resolution == period.count) {
        period.selected = true;
      }
      else {
        period.selected = false;
      }
    }
   // console.log(period.period);
    chart.periodSelector.setDefaultPeriod();
  }

</script>