Tutorial on Creating StockCharts in JavaScript - 0 | JSFiddle Sample Code

Tutorial on Creating StockCharts in JavaScript - 0 | JSFiddle Sample Code

by ben551445

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
 
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>

<div id="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];

var stockChart1 = new CanvasJS.StockChart("chartContainer1",{
  rangeChanged: syncHandler,
  charts: [{ 
    axisX:{},
    data: [{        
      type: "line", 
      dataPoints : dataPoints
    }]
  }],
  rangeSelector: {
    selectedRangeButtonIndex: 5
  },
  navigator: {
    slider: {}
  }
}); 

var stockChart2 = new CanvasJS.StockChart("chartContainer2",{
  rangeChanged: syncHandler,
  charts: [{  
    axisX:{},
    data: [{        
      type: "line", 
      dataPoints : dataPoints
    }]
  }],
  rangeSelector: {
    selectedRangeButtonIndex: 5
  },
  navigator: {
    slider: {}
  }
}); 

$.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {  
  for(var i = 0; i < data.length; i++){
    dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});
  }
  stockChart1.render();
  stockChart2.render();
});

var stockCharts = [stockChart1, stockChart2];

function syncHandler(e) {
  for(i = 0; i < stockCharts.length; i++) {
    var stockChart = stockCharts[i];
    if(stockChart != e.stockChart) {
    	console.log("test");
      stockChart.options.navigator.slider.minimum = e.minimum;
      stockChart.options.navigator.slider.maximum = e.maximum;
      stockChart.render();
    }
  }
}