Community

Integrating Chart.js - chart zoom and pan

2598
2
Jump to solution
01-24-2022 07:59 AM
RobertMEIER
by
Occasional Contributor
‎01-24-2022 07:59 AM

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-...

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"
    />

      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
      <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>
     
      <script src="https://js.arcgis.com/4.20/"></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>
 

 

0 Kudos
1 Solution

Accepted Solutions
RobertMEIER
by
Occasional Contributor
‎01-25-2022 07:43 AM

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!

View solution in original post

0 Kudos
2 Replies
RobertMEIER
by
Occasional Contributor
‎01-25-2022 05:52 AM

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-...

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: [
              {
                  name: 'Chart'
              },
              //  {
              //      location: 'https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js',
              //      name: 'Hammr'
              // },
              {
                  name: 'zoomChrt'
              }
          ]
          }
      };

here's the error - 

RobertMEIER_0-1643118606335.png

 

0 Kudos
RobertMEIER
by
Occasional Contributor
‎01-25-2022 07:43 AM

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!

0 Kudos