external page Morris charts not loading when am loading graph page using jquery load event

Question

I want to load DONUT CHART from another page to current page. - some more expiation when i click on button of home page i want to dispaly chart of graph-page.php

Note: when i manually run Graph_page.php it's working fine

Home.php

<input class="button" type="button" />
     <div class="home"></div>

       <script>
        $(document).ready(function(){
         $(".button").click(function(){
         $(".home").load("Graph_page.php", function(responseTxt, statusTxt, xhr){
          if(statusTxt == "success")
           //success alert

           if(statusTxt == "error")
         //error alert
    });

   });

  });
   </script>

Graph_page.php

       <div class="box-body chart-responsive">
   <div class="chart" id="sales-chart" position: relative;"></div>
          </div>

//script DONUT CHART
 <script type="text/javascript">
  $(function () {
    "use strict";      
    var donut = new Morris.Donut({
      element: 'sales-chart',
      resize: true,
      colors: ["#f56954","#00a65a","#3c8dbc"],
      data: [
        {label: "Absent Days", value: 5},
        {label: "Present Days", value: 10}, 
        {label: "Working Days", value: 15}
      ],
      hideHover: 'auto'
    });

  });
</script>

Answer 1

The best way for this

$(".home").load("Graph_page.php", function(responseTxt, statusTxt, xhr){     
var donut = new Morris.Donut({
  element: 'sales-chart',
  resize: true,
  colors: ["#f56954","#00a65a","#3c8dbc"],
  data: [
    {label: "Absent Days", value: 5},
    {label: "Present Days", value: 10}, 
    {label: "Working Days", value: 15}
  ],
  hideHover: 'auto'
});

The Morris builder does not recognize the recent loaded DOM, so this build after load the page.