I want to unload both my init() function and graph which is a window onload function but it won't load my graph.

code

<!DOCTYPE html>
<html>

<head>
  <title> Challenge </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="Css/ChallengeStyle.css" type="text/css"/>
  <script src="Js/Challenge.js"></script>
  <script src="lib/easeljs-NEXT.combined.js"></script>
  <script src="lib/tweenjs-0.5.1.min.js"></script> 
  <script type="text/javascript" src="package/canvasjs.min.js"></script>
  <script type="text/javascript"> 
    window.onload = function () {
      var chart = new CanvasJS.Chart("chartContainer", {            
        title:{
        text: "Running Challenge - 18/05 - 24/05"             
        },

          data: [{      
            type: "column",
            name: "Osman",
            dataPoints: [
              { label: "Osman", y: 220 },
              { label: "Osman", y: 440 },
              { label: "Osman", y: 660 },                                    
              { label: "Osman", y: 880 },
              { label: "Osman", y: 1100 },
              { label: "Osman", y: 1320 },
              { label: "Osman", y: 1540 }
            ]
          },{ 
            type: "column",
            name: "Simon",                
            dataPoints: [
              { label: "18/05", y: 190 },
              { label: "19/05", y: 405 },
              { label: "20/05", y: 610 },                                    
              { label: "21/05", y: 790 },
              { label: "22/05", y: 960 },
              { label: "23/05", y: 1100 },
              { label: "24/05", y: 1310 }
            ]}]
  });
    chart.render();
  }
  </script>
</head>

<body onload="init()" style="margin:0px">
  <canvas id="canvas" width="1347" height="900" style="border: black solid 1px"></canvas>

  <div id="menuContainer">
    <h5>.</h5> 
    <button onclick="location.href='Forsiden.html'"class="btn forsiden"> Forsiden </button>
    <h1>––––––––––</h1>
    <button onclick="location.href='Profil.html'" class="btn profil"> Profil </button>
    <h2>––––––––––</h2> 
    <button onclick="location.href='Challenge.html'"class="btn Challenges"> Challenges </button>
    <h3>––––––––––</h3>
    <button onclick="location.href='Information.html'" class="btn information"> Information </button>
    <h4>––––––––––</h4>
    <button class="btn voresApp"> VoresApp </button>
  </div>

<div id="chartContainer"></div>

</div>

</body>

</html>

You can't call two functions with the onload method? I assume that it is something with createjs since it loads the init function but it won't load the graph then. If I remove the onload init the graph will load in.

1 Answers

0
Kshitij Mhatre On

This has nothing to do with createJs. The window.onload and body.onload are ways of using the same event. In your code you are redefining the onload function. Earlier in code you defined the function for window onload. And the body onload attribute overrides the same event handler. Hence, only the later will work. If you want multiple functions to work at once your main onload function should call them all.

eg,

window.onload = function(){
...
    initOne();
    initTwo();
...
}