Integrating Chart.js - chart zoom and pan

RobertMEIER — Mon, 24 Jan 2022 15:59:42 GMT

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

name="viewport"

content="initial-scale=1, maximum-scale=1,user-scalable=no"

</head>

<body>

</div>

</body>

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: {

drag: {

enabled: true

mode: 'xy',

}

});

</script>

</html>

Re: Integrating Chart.js - chart zoom and pan

RobertMEIER — Tue, 25 Jan 2022 13:55:58 GMT

just realizing.... In my actual application, I use the require () dojo syntax. I get an error (image added below) when I try and load the chart.js zoom plugin in the same manner (using dojoConfig) as the full Chart.js library, as noted in the blog post - https://community.esri.com/t5/esri-technical-support-blog/using-third-party-graphing-libraries-with-the-4-x/ba-p/901299

here's the dojoConfig and I also add the zoom plug in to the require array.

const options = {

// tell Dojo where to load other packages

dojoConfig: {

async: true,

packages: [

{

location: 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js',

name: 'Chart'

// {

// location: 'https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js',

// name: 'Hammr'

// },

{

location: 'https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.0/chartjs-plugin-zoom.js',

name: 'zoomChrt'

}

]

}

};

here's the error -

Re: Integrating Chart.js - chart zoom and pan

RobertMEIER — Tue, 25 Jan 2022 15:43:18 GMT

Solved!!

Apparently, using a blog post from 2018 as an example is not a good idea.

I removed the dojoLoader part and the additions to the require array, then added the Chart.js and the zoom plugin using traditional script tags and it all works now!

topic Integrating Chart.js - chart zoom and pan in ArcGIS JavaScript Maps SDK Questions

Integrating Chart.js - chart zoom and pan

Re: Integrating Chart.js - chart zoom and pan

Re: Integrating Chart.js - chart zoom and pan