Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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(); ?>
share|improve this question

3 Answers 3

The fastest way would be an iframe plugin ( like "Embed Iframe") , you can then just copy past it all and cross your fingers.

You might also be able to just copy/past from the script tag to /script into the html editor of a post.

The alternative and best method is to make your own custom template page and throw it into the source code using wp enqueue script.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

http://codex.wordpress.org/Stepping_Into_Templates

share|improve this answer

Very basic example would be adding this on top of your custom page template (right after comment block):

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>';
}

Also add the_content() call between header and footer.

Note that there are tons of things here that can be reworked and improved, but not without getting into many more complex aspect of WP which are out of scope.

share|improve this answer

You mentioned that you wanted to draw a family tree in wordpress..

I have developed a plugin for that and you can download it from the Wordpress.org website.

There is also a homepage for the family tree plugin.

HTH

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.