how to load script in one page form another page

I have two page index.html and chart.html. I want section or of chart.html to load in index.html. The tag contains script for graph. Chart.html contains many divs but i want only to load div that has id of loadgraph in index.html page

index.html

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<button onclick="window.print()">Download Annual Report</button>


<div id='graph'> </div>



<script>

$(document).ready( function() {

 $('#graph').load('chart.html #loadgraph');


 });
</script> 

</body>
</html>

and chart.html contains

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
</head>
<body>
<div id='loadgraph'>
  
<h1>This is Graph Chart</h1>

<canvas id="mixed-chart" width="800" height="350"></canvas>

<script type="text/javascript">
  
new Chart(document.getElementById("mixed-chart"), {
    type: 'bar',
    data: {
      labels: ["2077", "2078", "2079"],
      datasets: [{
          label: "Diploma in Forestry",
          type: "line",
          borderColor: "#e8c3b9",
          data: [37,36,18],
          fill: false
        },{
          label: "Diploma in Civil",
          type: "line",
          borderColor: "#c45850",
          data: [48,47,48],
          fill: false
        },  {
          label: "Diploma in Animal Science",
          type: "line",
          borderColor: "#3cba9f",
          data: [29,19,34],
          fill: false
        },{
          label: "Diploma in Pharmacy",
          type: "line",
          borderColor: "#8e5ea2",
          data: [0,0,40],
          fill: false
        },{
          label: "Diploma in Forestry",
          type: "bar",
          backgroundColor: "#e8c3b9",
          data: [37,36,18],
        },{
          label: "Diploma in Civil",
          type: "bar",
          backgroundColor: "#c45850",
          data: [48,47,48],
        },  {
          label: "Diploma in Animal Science",
          type: "bar",
          backgroundColor: "#3cba9f",
          data: [29,19,34],
        },{
          label: "Diploma in Pharmacy",
          type: "bar",
          backgroundColor: "#8e5ea2",
          data: [0,0,40],
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Total Diploma Seats: Forestry: 40  Civil: 48   Animal Science: 40   Pharmacy 40'
      },
      legend: { display: true }
    }
});
</script>

</div>
</body>
</html>

Any help would be greatly appreciated.