Add google org chart to wordpress page

1 Views

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

Read More
<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(); ?>
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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

  2. 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.