CODEWITHSUNDEEP
javascriptamcharts
Bogaso
Bogaso

Reputation: 3308

How to create a Click event in AmChart-StockChart

Let say there is a Stockchart using AmCharts as below:

https://codepen.io/Volabos/pen/yZwdqg

HTML code part looks as below:

<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/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>       

<button type="button">Click Me!</button>

At the lower left corner of the page, there is a Button. Now I want a functionality that, when user clicks on this Button, the Zoom=MAX will be selected (if not selected already.)

Is there any way to achieve that functionality?

Thanks for your pointer

Upvotes: 0

Views: 441

Answers (2)

Samuel Philipp
Samuel Philipp

Reputation: 11042

You can achieve this with periodSelector.selectPeriodButton(). Sadly that function is not documented (docs). I forked your code pen and extended it with a function at the end (updated code pen). 

document.getElementById('clickme').onclick = event => {
  const period = chart.periodSelector.periods.find(b => b.period === 'MAX');
  // if you know the index:
  // const button = chart.periodSelector.periods[3];
  chart.periodSelector.selectPeriodButton(period);
};

EDIT:

According to xorspark's answer that's probably not the best method. Maybe you want to use that instead.

Upvotes: 0

xorspark
xorspark

Reputation: 16012

The officially supported way to do this is to set the selected property of the period in your periodSelector's periods array to true (while setting the others to false) and call setDefaultPeriod afterward to simulate the click.

document.getElementById('clickme').onclick = event => {
  chart.periodSelector.periods.forEach((period) => {
    if (period.period === "MAX") {
      period.selected = true;
    }
    else {
      period.selected = false;
    }
  });
  chart.periodSelector.setDefaultPeriod();
};

Codepen

Upvotes: 2

Related Questions