3

I need a help. I followed this tutorial https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php. I managed to start chartjs-plugin-zoom. Now i want to add button "Reset zoom" I fallowed this tutorial: Add zoom event handler to charts for chartjs with chartjs-plugin-zoom

But when i add right after $.ajax({}); in app.js

$('#reset_zoom').click(function() {
     mycanvas.resetZoom();
})

and press the button error is displayed:

app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
    at HTMLButtonElement.<anonymous> (app.js:131)
    at HTMLButtonElement.dispatch (datatables.min.js:15)
    at HTMLButtonElement.r.handle (datatables.min.js:15)

Can you give me an advice?

5
  • Have you instantiate mycanvas object ? Mar 15, 2018 at 12:03
  • How to do it. And do i need to? Mar 15, 2018 at 12:13
  • Yes, ofcourse. In your shared tutorial after the AJAX call and canvas, he wrote var LineGraph = new Chart(ctx);. Did you give same name to the variable LineGraph if not please mention the name of your variable Mar 15, 2018 at 12:22
  • Yes that was one of the problems. The other was that i needed to move the code above var ctx Mar 15, 2018 at 12:32
  • Good, so you solved your problem, right ? Mar 15, 2018 at 14:24

1 Answer 1

0

Kind of surprised this hasn't been answered yet. I remember running into this myself a while back. You are doing the same thing I was doing..

Effectively what you're doing is trying to run the .resetZoom() function on an HTML canvas element. You need to do this on the chart object, not the canvas element.

YouTube video walking you through it: https://www.youtube.com/watch?v=tWlENvyr9cY

Working CodePen: https://codepen.io/vpolston/pen/MWGVmrX

A couple examples of what not to do..

document.getElementById('myChart').resetZoom() // vanilla JavaScript

or even

$("#myChart").resetZoom() // jQuery

What you actually need to do is tack the .resetZoom() onto the Chart object from when you instantiated the chart. So in your code here:

const myChart = new Chart('myChart', {}

Whatever you set the variable to when you created the chart is what needs to have the .resetZoom(). So this would work:

myChart.resetZoom();

Now to make that a clickable button we can create a function. That function accepts whatever the chart Object was named.

JS

resetZoomBtn = (chart) => {
  
  chart.resetZoom()
  
};

and then in our HTML we call that function and pass whatever you called the chart when you instantiated it as the parameter.

<div class="chart-container">
  <canvas id="myChart"></canvas>
  <button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>

Hopefully that helps anyone who views this question since it comes up at the top of the search results on Google. I know chances of it being marked 'answer' four years later are slim.

Thanks, VP

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.