CODEWITHSUNDEEP
javascriptamcharts
Kashyap Kotak
Kashyap Kotak

Reputation: 1938

Detect when Max is clicked in amCharts

I am using AmCharts for displaying chart data. I am using different data sets for different zoom levels. Like for 1D, I use Minutes data; For 1W, I use Hours data and for 1Y I use Days data. I change the datasets by calculating difference in minutes for startDate and endDate for generated "changed" event of PeriodSelector.

The problenm is that when I am currently at 1D zoom level, and I click Max, the difference in minutes is equal to 2 days and it displays only 2 days data as I have only that much in the minutes dataset. I want it to display the Days dataset which I have for 2 years. But the event generated has min startDate and max endDate only for current dataset which has just 2 days data.

Upvotes: 0

Views: 42

Answers (1)

xorspark
xorspark

Reputation: 16012

The predefinedPeriod property in the changed event contains the label of the button that was clicked. You can use that to detect which button was clicked:

    listeners: [
      {
        event: "changed",
        method: function(eventObj) {
          console.log("clicked " + eventObj.predefinedPeriod);
        }
      }
    ]

Demo: 

var chartData1 = [];
generateChartData();

var chart = AmCharts.makeChart("chartdiv", {
  type: "stock",
  theme: "light",

  dataSets: [
    {
      fieldMappings: [
        {
          fromField: "value",
          toField: "value"
        },
        {
          fromField: "volume",
          toField: "volume"
        }
      ],
      dataProvider: chartData1,
      categoryField: "date"
    }
  ],

  panels: [
    {
      showCategoryAxis: false,

      stockGraphs: [
        {
          id: "g1",
          valueField: "value",
          comparable: true,
          compareField: "value",
          balloonText: "[[title]]:<b>[[value]]</b>",
          compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
        }
      ]
    }
  ],

  periodSelector: {
    position: "left",
    periods: [
      {
        period: "MM",
        selected: true,
        count: 1,
        label: "1 month"
      },
      {
        period: "YYYY",
        count: 1,
        label: "1 year"
      },
      {
        period: "YTD",
        label: "YTD"
      },
      {
        period: "MAX",
        label: "MAX"
      }
    ],
    listeners: [
      {
        event: "changed",
        method: function(eventObj) {
          console.log("clicked " + eventObj.predefinedPeriod);
        }
      }
    ]
  }
});

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 500);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 500; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

    chartData1.push({
      date: newDate,
      value: a1,
      volume: b1
    });
  }
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

Upvotes: 2

Related Questions