Brtdku

am4core.useTheme(am4themes_animated);



var container = am4core.create("chartdiv", am4core.Container);

container.width = am4core.percent(100);

container.height = am4core.percent(100);

container.layout = "vertical";







var chartCount = 3;

var data = [

  {name:'value1', value: 2, timestamp: '2018-01-01T15:00:00.00Z'},

  {name:'value2', value: 5, timestamp: '2018-01-01T15:00:00.00Z'},

  {name:'value3', value: 8, timestamp: '2018-01-01T15:00:00.00Z'},

  {name:'value1', value: 4, timestamp: '2018-01-01T15:00:15.00Z'},

  {name:'value2', value: 2, timestamp: '2018-01-01T15:00:15.00Z'},

  {name:'value3', value: 5, timestamp: '2018-01-01T15:00:15.00Z'},

  {name:'value1', value: 9, timestamp: '2018-01-01T15:00:30.00Z'},

  {name:'value2', value: 11, timestamp: '2018-01-01T15:00:30.00Z'},

  {name:'value3', value: 6, timestamp: '2018-01-01T15:00:30.00Z'},

  {name:'value1', value: 4, timestamp: '2018-01-01T15:00:45.00Z'},

  {name:'value2', value: 5, timestamp: '2018-01-01T15:00:45.00Z'},

  {name:'value3', value: 13, timestamp: '2018-01-01T15:00:45.00Z'},

  {name:'value1', value: 1, timestamp: '2018-01-01T15:01:00.00Z'},

  {name:'value2', value: 7, timestamp: '2018-01-01T15:01:00.00Z'},

  {name:'value3', value: 11, timestamp: '2018-01-01T15:01:00.00Z'},

];

var charts = ;

var cursorShowDisposers = ;



// create chart instances

for (var i = 0; i < chartCount; i++) {

  makeChart(data.filter((x) => x.name == 'value' + (i + 1)), 'value' + (i + 1));

}



let legend = new am4charts.Legend();

legend.parent = container;

legend.interactionsEnabled = false;

legend.data = [{

  "name": "value1",

  "fill":"#9E842F"

}, {

  "name": "value2",

  "fill": "#196D6F"

}, {

  "name": "value3",

  "fill": "#553786"

}];



initCursorListeners();



// after the charts are made, add scrollbar to the first one

var firstChart = charts[0];

firstChart.scrollbarX = new am4core.Scrollbar();

firstChart.zoomOutButton.disabled = false;



// enable date axis labels for the last one

var lastChart = charts[charts.length - 1];

var lastDateAxis = lastChart.xAxes.getIndex(0);

lastDateAxis.renderer.labels.template.disabled = false;

lastDateAxis.cursorTooltipEnabled = true;







// create chart

function makeChart(data, name) {

  var chart = container.createChild(am4charts.XYChart);

  charts.push(chart);



  chart.data = data;

  chart.zoomOutButton.disabled = true;

  chart.padding(10, 15, 10, 15);



  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());

  dateAxis.renderer.grid.template.location = 0;

  dateAxis.renderer.labels.template.disabled = true;

  dateAxis.tooltip.animationDuration = 0; 

  dateAxis.cursorTooltipEnabled = false;

  dateAxis.dateFormatter.inputDateFormat = 'i';

  dateAxis.baseInterval = {

    'timeUnit': 'second',

    'count': 1

  };

  

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  valueAxis.tooltip.disabled = true;

  valueAxis.tooltip.disabled = true;

  valueAxis.renderer.minWidth = 60;

  

  var series = chart.series.push(new am4charts.LineSeries());

  series.dataFields.dateX = "timestamp";

  series.dataFields.valueY = "value";

  series.name = name;

  series.interpolationDuration = 0;



  switch (name) {

    case 'value1':

      series.stroke = am4core.color('#9E842F');

      valueAxis.minY = 0;

      valueAxis.maxY = 31;

      break;

    case 'value2':

      series.stroke = am4core.color('#196D6F');

      valueAxis.minY = -20;

      valueAxis.maxY = 80;

      break;

    case 'value3':

      series.stroke = am4core.color('#553786');

      valueAxis.minY = 0;

      valueAxis.maxY = 100;

      break;

  }

  series.tooltip.getFillFromObject = false;

  series.tooltip.background.fill = series.stroke;

  series.tooltipText = '{name}: [bold]{valueY}[/]';



  var bullet = series.bullets.push(new am4charts.CircleBullet());

  bullet.width = 5;

  bullet.height = 5;

  bullet.fill = series.stroke;

  

  var cursor = new am4charts.XYCursor();

  cursor.lineY.disabled = true;

  cursor.xAxis = dateAxis;

  chart.cursor = cursor;





  // whenever any of the charts is zoomed, we should zoom all other charts

  dateAxis.events.on("selectionextremeschanged", function (event) {

    syncDateAxes(event.target);

  })

}





function initCursorListeners() {

  cursorShowDisposers = ;

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var cursor = chart.cursor;

    cursor.interactionsEnabled = true;



    cursorShowDisposers.push(cursor.events.on("shown", function (event) {

      handleShowCursor(event.target);

    }));

  }

}



var shownCursorChangeDisposer;

var shownCursorZoomStartedDisposer;

var shownCursorZoomEndedDisposer;



function handleShowCursor(shownCursor) {

  // disable mouse for all other cursors

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var cursor = chart.cursor;

    if (cursor != shownCursor) {

      cursor.interactionsEnabled = false;

    }

    // remove show listener

    cursorShowDisposers[i].dispose();

  }



  // add change disposer to the hovered chart cursor

  shownCursorChangeDisposer = shownCursor.lineX.events.on("positionchanged", function (event) {

    syncCursors(shownCursor);

  });





  shownCursorZoomStartedDisposer = shownCursor.events.on("zoomstarted", function (event) {



    for (var i = 0; i < charts.length; i++) {

      var chart = charts[i];

      var cursor = chart.cursor;

      if (cursor != event.target) {

        var point = { x: event.target.point.x, y: 0 };

        cursor.triggerDown(point);

      }

    }

  });



  shownCursorZoomEndedDisposer = shownCursor.events.on("zoomended", function (event) {

    for (var i = 0; i < charts.length; i++) {

      var chart = charts[i];

      var cursor = chart.cursor;

      if (cursor != event.target) {

        var point = { x: event.target.point.x, y: 0 };

        cursor.triggerUp(point);

      }

    }

  });





  shownCursor.events.once("hidden", function (event) {

    shownCursorChangeDisposer.dispose();

    shownCursorZoomStartedDisposer.dispose();

    shownCursorZoomEndedDisposer.dispose();



    for (var i = 0; i < charts.length; i++) {

      var chart = charts[i];

      var cursor = chart.cursor;

      cursor.hide(0);



      cursorShowDisposers[i].dispose();

    }



    initCursorListeners();

  });

}



function syncCursors(syncWithCursor) {

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var cursor = chart.cursor;



    var point = { x: syncWithCursor.point.x, y: 0 };



    if (cursor != syncWithCursor) {

      cursor.triggerMove(point);

    }

  }

}





function syncDateAxes(syncWithAxis) {

  for (var i = 0; i < charts.length; i++) {

    var chart = charts[i];

    var dateAxis = chart.xAxes.getIndex(0);

    if (dateAxis != syncWithAxis) {

      dateAxis.events.disableType("selectionextremeschanged");

      dateAxis.start = syncWithAxis.start;

      dateAxis.end = syncWithAxis.end;

      dateAxis.events.enableType("selectionextremeschanged");

    }

  }

}

;

#chartdiv {

  width: 100%;

  height: 700px;

}

<script src="//www.amcharts.com/lib/4/core.js"></script>

<script src="//www.amcharts.com/lib/4/charts.js"></script>

<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>

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