How do I display this page in a Wordpress site? What do i need to add or remove? This is for a static page not a blog post.

(FYI: I want to use this to display a family tree on my website). I'm a wordpress beginner so please explain this at a beginner level if possible thanks

```
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
  </body>
</html>

```

---

edit

Ok so I've been researching custom page templates. I think I need something like this

```
    <?php
    /*
    Template Name: GoogleOrgChart
    */
    ?>

    <?php get_header(); ?>

<?php wp_enqueue_script( GoogleOrgChartScript, 'https://www.google.com/jsapi'); ?> 

<div id='chart_div'></div>

    <?php get_footer(); ?>

```

Is this correct?

---

so is this what it should look like?

```
    <?php
        /*
        Template Name: GoogleOrgChart
        */

        add_action('wp_print_scripts','chart_data');
        add_filter('the_content', 'chart_content');

    function chart_data() {

    ?>

    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
          google.load('visualization', '1', {packages:['orgchart']});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');
            data.addRows([
              [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
              [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
              ['Alice', 'Mike', ''],
              ['Bob', 'Jim', 'Bob Sponge'],
              ['Carol', 'Bob', '']
            ]);
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            chart.draw(data, {allowHtml:true});
          }
    </script>
<?php
    }

    function chart_content() {

        return '<div id="chart_div"></div>';
    }
?>

    <?php get_header(); ?>

    <?php the_content(); ?>

    <?php get_footer(); ?>

```