CODEWITHSUNDEEP
javascriptamcharts
suyuan xu
suyuan xu

Reputation: 130

how do I maintain zoom position on a live am4chart

I am trying to build a chart by am4chart library, it is a live chart which updates its data set every second. there is a scrollbar on value axis for manipulating chart's zoom level. but the chart automatically return to max zoom level when data set is updated.

The date axis is doing fine, once I move the horizontal scroll bar, the chart keeps its position, if I want to make the vertical scroll bar to perform the same way, how should I fix it.

var newTemp = function(){
	let timestamp = new Date();
    let sensor1 = Math.random() * 10 + 20;
    let sensor2 = Math.random() * 10 + 25;
    let sensor3 = Math.random() * 20 + 80;
	let newTemp = {'time': timestamp, 'sensor1': sensor1, 'sensor2': sensor2, 'sensor3': sensor3};
	return newTemp;
};

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataDateFormat = "YYYY/MM/DD JJ:NN";
let data = [];
data.push(newTemp());
chart.data = data;

// Create axes
var timeAxis = chart.xAxes.push(new am4charts.DateAxis());
timeAxis.title.text = "time";
timeAxis.baseInterval = {timeUnit:"second", count: 1};
timeAxis.tooltipDateFormat = "HH:mm, d MMMM";
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "temps";


// Add  scrollbars
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarY = new am4charts.XYChartScrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;



// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "sensor1";
series1.dataFields.dateX = "time";
series1.yAxis = valueAxis;
series1.name = "product temps";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
//series1.fill = chart.colors.getIndex(0);
series1.strokeWidth = 2;
series1.stroke = 'blue';


var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "sensor2";
series2.dataFields.dateX = "time";
series2.yAxis = valueAxis;
series2.name = "air temps";
series2.tooltipText = "{name}\n[bold font-size: 20] {valueY}.c[/]";
//series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.strokeWidth = 2;
series2.stroke = 'yellow';


var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "sensor3";
series3.dataFields.dateX = "time";
series3.name = "check temps";
series3.yAxis = valueAxis;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
series3.strokeWidth = 2;
series3.stroke = 'red';


// Add cursor
chart.cursor = new am4charts.XYCursor();

// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";


setInterval(function(){
	let aNewTemp = newTemp();
    aNewTemp.time = Date.parse(aNewTemp.time);

    chart.addData(aNewTemp);

}, 1000);
#chartdiv {
  width: 100%;
  height: 500px;
}
<!doctype html>
<html lang="en">
<head>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
</head>

<body>
<div id="chartdiv"></div>
</body>

</html>

Upvotes: 3

Views: 952

Answers (1)

notacouch
notacouch

Reputation: 3655

To maintain the zoom position, set the keepSelection property of value axes to true (the property hasn't been implemented for DateAxis yet).

var newTemp = function(){
	let timestamp = new Date();
    let sensor1 = Math.random() * 10 + 20;
    let sensor2 = Math.random() * 10 + 25;
    let sensor3 = Math.random() * 20 + 80;
	let newTemp = {'time': timestamp, 'sensor1': sensor1, 'sensor2': sensor2, 'sensor3': sensor3};
	return newTemp;
};

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataDateFormat = "YYYY/MM/DD JJ:NN";
let data = [];
data.push(newTemp());
chart.data = data;

// Create axes
var timeAxis = chart.xAxes.push(new am4charts.DateAxis());
timeAxis.title.text = "time";
timeAxis.baseInterval = {timeUnit:"second", count: 1};
timeAxis.tooltipDateFormat = "HH:mm, d MMMM";
//dateAxis.renderer.grid.template.location = 0;
//dateAxis.renderer.minGridDistance = 30;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.keepSelection = true;
valueAxis.title.text = "temps";


// Add  scrollbars
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarY = new am4charts.XYChartScrollbar();
chart.scrollbarY.parent = chart.leftAxesContainer;



// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "sensor1";
series1.dataFields.dateX = "time";
series1.yAxis = valueAxis;
series1.name = "product temps";
series1.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
//series1.fill = chart.colors.getIndex(0);
series1.strokeWidth = 2;
series1.stroke = 'blue';


var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "sensor2";
series2.dataFields.dateX = "time";
series2.yAxis = valueAxis;
series2.name = "air temps";
series2.tooltipText = "{name}\n[bold font-size: 20] {valueY}.c[/]";
//series2.fill = chart.colors.getIndex(0).lighten(0.5);
series2.strokeWidth = 2;
series2.stroke = 'yellow';


var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "sensor3";
series3.dataFields.dateX = "time";
series3.name = "check temps";
series3.yAxis = valueAxis;
series3.tooltipText = "{name}\n[bold font-size: 20]{valueY}.c[/]";
series3.strokeWidth = 2;
series3.stroke = 'red';


// Add cursor
chart.cursor = new am4charts.XYCursor();

// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "top";


setInterval(function(){
	let aNewTemp = newTemp();
    aNewTemp.time = Date.parse(aNewTemp.time);

    chart.addData(aNewTemp);

}, 1000);
#chartdiv {
  width: 100%;
  height: 500px;
}
<!doctype html>
<html lang="en">
<head>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
</head>

<body>
<div id="chartdiv"></div>
</body>

</html>

Upvotes: 2

Related Questions