CODEWITHSUNDEEP
javascriptangularamcharts
user7050297
user7050297

Reputation: 127

How to set range values min/max for x and y axis in XY chart type

I am using Amcharts v3, xy chart type, (This is the example I am using https://www.amcharts.com/demos-v3/scatter-chart-v3/) with chartScrollbar for both x and y axis. How do I set the values of min and max range of Scrollbar (for both x and y) so that when i load the chart, it shows at a certain zoom level by default.

I added two text boxes in html code to input values of x axis. and a function in ts file to call an api function with start end end values. but it does not trigger anything on the chart.

<input type="number" [(ngModel)]="startIndexa" name="startIndexa">
<input type="number" [(ngModel)]="endIndex" name="endIndex">
<button class="btn" type="submit" (click)="zoomXYChart()">Soom</button>

and in TS file

    zoomXYChart() {       
        this.chart.zoomToIndexes(this.startIndex, this.endIndex)       
    }

I expect the chartScrollbar to take the values from the text boxes and zoom to that level.

Upvotes: 0

Views: 1630

Answers (1)

xorspark
xorspark

Reputation: 16012

zoomToIndexes only works on categoryAxis objects, which a v3 XY chart does not have. You need to call zoomToValues on your chart's individual value axes, e.g.

//assuming index 0 is your X axis and index 1 is your Y axis
chart.valueAxes[0].zoomToValues(xminvalue, xmaxvalue)
chart.valueAxes[1].zoomToValues(yminvalue, ymaxvalue)

Demo:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "xy",
  "theme": "none",
  "marginRight": 80,
  "marginTop": 17,
  "dataProvider": [{
    "y": 10,
    "x": 14,
    "value": 59,
    "y2": -5,
    "x2": 0,
    "value2": 44
  }, {
    "y": 5,
    "x": 3,
    "value": 50,
    "y2": -15,
    "x2": -8,
    "value2": 12
  }, {
    "y": -10,
    "x": -3,
    "value": 19,
    "y2": -4,
    "x2": 6,
    "value2": 35
  }, {
    "y": -6,
    "x": 5,
    "value": 65,
    "y2": -5,
    "x2": -6,
    "value2": 168
  }, {
    "y": 15,
    "x": -4,
    "value": 92,
    "y2": -10,
    "x2": -8,
    "value2": 102
  }, {
    "y": 13,
    "x": 1,
    "value": 8,
    "y2": -2,
    "x2": -3,
    "value2": 41
  }, {
    "y": 1,
    "x": 6,
    "value": 35,
    "y2": 0,
    "x2": 1,
    "value2": 16
  }],
  "valueAxes": [{
    "position": "bottom",
    "axisAlpha": 0
  }, {
    "minMaxMultiplier": 1.2,
    "position": "left"
  }],
  "startDuration": 1.5,
  "graphs": [{
    "valueField": "value",
    "bullet": "round",
    "xField": "x",
    "yField": "y"

  }, {
    "valueField": "value2",
    "bullet": "round",
    "xField": "x2",
    "yField": "y2"

  }],
  "marginLeft": 46,
  "marginBottom": 35,
  "chartScrollbar": {},
  "chartCursor": {},
  "listeners": [{
    "event": "init",
    "method": function(e) {
      e.chart.valueAxes[0].zoomToValues(4, 15);
      e.chart.valueAxes[1].zoomToValues(0, 11);
    }
  }]
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv"></div>

Upvotes: 0

Related Questions