Sync Multiple Chart Axis Ranges - CanvasJS JavaScript Charts
Sync Multiple Chart Axis Ranges - CanvasJS JavaScript Charts
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="data.json"></script>
<!DOCTYPE html>
<html>
<title>My Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/w3pro.css">
<link rel="stylesheet" href="css/index.css">
<body>
<div class="w3-row">
<div id="channelSelectionWrapper" class="w3-col s12 m12 l4">
<h4>Choose the channels to display</h4>
<input type="file" name="data" id="data" onchange="readFileAsText(this.files);">
<div id="channelSelectionContainer" class="w3-container">
</div>
</div>
<div id="gpsChart" class="w3-col s12 m12 l8" style="height: 500px;">
</div>
<button class="button zoomGpsChart" onclick="zoomInGpsChart()">+</button>
<button class="button zoomGpsChart" onclick="zoomOutGpsChart()">-</button>
</div>
<div class="w3-row">
<div>
<button class="button zoomGpsChart" onclick="zoomInChannelsChart()">+</button>
<button class="button zoomGpsChart" onclick="zoomOutChannelsChart()">-</button>
</div>
</div>
<div class="w3-row">
<div id="channelsChart" class="w3-col">
</div>
</div>
<script type="text/javascript" src="javascript/canvasjs.min.js"></script>
<script src="javascript/ajv.min.js"></script>
<script>
var viewPortsValues = {
gpsCharts: [],
channelsCharts: [],
}
var dataModel = {
gpsChartObject: new CanvasJS.Chart("gpsChart", {
animationEnabled: false,
exportEnabled: false,
zoomEnabled: false,
title: {
text: "GPS data"
},
axisX: {
title: "Latitude",
crosshair: {
enabled: true
}
},
...