Now I want to load an element when it is visible, how can I do it?

I use the plugin from github to check if it is visible:

      Link to github plugin

I want my canvas been drawn when it is visible:

The canvas is a chart that is made with this plugin:

       Link to second github plugin

I have tried to use a while statement on rule number 48 but than the page won't load.

Now I use a if - statement. The first time you visit the page, you won't see the chart on the canvas.

But when you reload when the div .graph is visible, then the chart will be shown.

What I want? That the graph is drawn when the div graph is visible (and not after reloading on the div).

If you need the whole project files, they project is attached as a zip.

2. <div class="graph">
3.       <canvas id="tableMichiel" width="300" height="300"></canvas>
4. </div>
   
5. 
   
7. <!-- Chart grafiek pas tonen wanneer hij zichtbaar is -->
8. <script src="js/jquery.isonscreen.js"></script>
9. <!-- Chart.js -->
10. <script src="js/Chart.Core.js"></script>
11. <script src="js/Chart.Doughnut.js"></script>
12. <script>
13. $(document).ready(
14.             function() {
15. tekenGrafiek()
16.                 setInterval(function() {
17. tekenGrafiek()
18.                 }, 3000);
19.             });
21. function tekenGrafiek() {
22. var doughnutData = [
23. {
24. value: 23,
25. color:"rgba(1,168,184,0.25)",
26. highlight: "rgba(250,102,89,1)",
27. label: "Droge huid"
28. },
29. {
30. value: 57,
31. color:"rgba(1,168,184,0.5)",
32. highlight: "rgba(250,102,89,1)",
33. label: "Normale huid"
34. },
35. {
36. value: 16,
37. color:"rgba(1,168,184,0.75)",
38. highlight: "rgba(250,102,89,1)",
39. label: "Vette huid"
40. },
41. {
42. value: 4,
43. color:"rgba(1,168,184,1)",
44. highlight: "rgba(250,102,89,1)",
45. label: "Combi vet en droog"
46. }
47. ];
49. // aanpassingen: tooltip-template aangepast, cutout in het midden verkleint
50. if($('.graph').isOnScreen()){
51. window.onload = function(){
52. var ctx = document.getElementById("tableMichiel").getContext("2d");
53. window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
54. };
55. } 
56. }
57. </script>