CODEWITHSUNDEEP
javascriptamcharts
pmiranda
pmiranda

Reputation: 8420

get the range values from AmCharts

I have an AmCharts working, this is the code:

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "precision":"3",
    "decimalSeparator": ",",
    "thousandsSeparator": ".",
    "legend": {
        "horizontalGap": 10,
        "maxColumns": 3,
        "position": "top",
        "useGraphSettings": false,
        "markerSize": 10,
        "marginTop": 20,
        "autoMargins":true,
        "forceWidth":true,
        "valueAlign":"right",
        "labelWidth":85,
        "valueWidth":85
    },
    "dataProvider": response,
    "synchronizeGrid":true,
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left",
        "title": "Activos"
    }],
    /*"startDuration": 0.5,*/
    "graphs": graphs,
    "chartScrollbar": {},
    "chartCursor": {
        "cursorPosition": "mouse"
    },
    "categoryField": "diahora",
    "categoryAxis": {
        /*"parseDates": true,*/
        "gridPosition": "start",
        "axisColor": "#DADADA",
        /*"minorGridEnabled": true*/
    },
    "export": {
        "enabled": true,
        "position": "top-right",
        "class": "export-main",
        "menu": [ {
            "title": "Exportar el gráfico a archivo de imagen",
            "label": "Descargar",
            "menu": [ "PNG", "JPG", "PDF" ]
        }]
    }
});

I'm calling it with ajax with:

$.get(url, function(response){

So, I need to get the 2 values of the range of X of the graph that is being rendered on the browser after a zoom, any idea?

For example, when the graph starts, the range of the axis x are 0 and 100. If I zoom into some range, for example 40 and 60, I need to retrieve those values (40 and 60) because I will use them for another things in the page.

So, how could I save those ranges after every ajax call?

Upvotes: 1

Views: 253

Answers (1)

xorspark
xorspark

Reputation: 16012

AmCharts provides the zoomed event, which gives you the start and end indices/values. You can use that and store the values for whatever you need, e.g.

AmCharts.makeChart("chartdiv", {
  // ...
  listeners: [{
    event: "zoomed",
    method: function(e) {
     //e.startIndex and e.endIndex gives you the indicies in the dataProvider
     //e.startValue and e.endValue gives you the start and end values
     //e.startDate and e.endDate gives you the start and end dates if you're using parseDates
    }
  }]
});

Note that zoomed is also called on the initial load. If you don't want to capture the initial start/end values, you might need to keep track of the first load before storing those values on subsequent zoom events.

Upvotes: 1

Related Questions