I have successfully used this blog post to integrate Chart.js into my application.
https://community.esri.com/t5/esri-technical-support-blog/using-third-party-graphing-libraries-with-the-4-x/ba-p/901299
I want to add zooming/panning functionality into the Chart and have not been able to get it to work when a map is on the page.
It works in this test page (see code below), where the Chart is the only thing on the page and I'm loading the ArcGIS JS library.
But when I try in my full application, with a map and other widgets, the chart renders and works, all except the panning/zooming.
Has anyone gotten the panning/zooming to work for chart.js?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet" type="text/css" href="/css/element/calendar/ui.timepicker.css" />
<script type="text/javascript" src="/js/element/calendar/jquery-ui-timepicker-addon.js"></script>
</head>
<body>
<div style="width:75%">
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
</body>
<script>
var myLineChart;
var arydata = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var arylabels = ["1","2","3","4","5"];
//var canvas = document.createElement('canvas');
//canvas.id = "myChart";
//$("#graphDiv").empty()
if (myLineChart != null){
myLineChart.destroy();
}
var ctx = document.getElementById("line-chart").getContext("2d");
myLineChart = new Chart(ctx,{
type: 'line',
data: {
labels: arylabels,
datasets: [{
label: "Empty",
yAxisID: "yEmpty",
data: arydata,
borderWidth: 1,
borderColor: '#860F2E',
pointBackgroundColor: "#860F2E",
pointBorderColor: "#860F2E",
fill:false,
pointRadius: 0,
pointHitRadius: 5,
}]
},
label: "Stuff",
fill: false,
options: {
scaleShowValues: true,
responsive: true,
title: {
display: true,
text: "no data loaded"
},
scales: {
yEmpty: {
}
},
legend: {
display: false
},
tooltips: {
enabled: true,
},
plugins:{
zoom: {
zoom: {
drag: {
enabled: true
},
mode: 'xy',
}
}
}
}
});
</script>
</html>
