Basics
First you need to register the Google JSAPI
script. Else you won’t have access to it. And you will need to hook it to admin_enqueue_scripts
to have it available in the meta box. Also the JSAP needs to get loaded before your custom script, so you need to set it as dependency. Example:
add_action( 'admin_enqueue_scripts', 'pie_load_scripts' );
function pie_load_scripts()
{
wp_enqueue_script(
'google-jsapi',
'//www.google.com/jsapi',
array(),
0,
true
);
wp_enqueue_script(
'pie-script',
plugin_dir_url( __FILE__ ).'js/3dpiechart.js',
array( 'google-jsapi' ),
filemtime( plugin_dir_path( __FILE__ ).'js/3dpiechart.js' ),
true
);
wp_localize_script(
'pie-script',
'pie_script_vars',
array(
'meta' => get_post_custom( get_the_ID() ),
)
);
}
Note: avoiding the http(s):
scheme allows the remote server to decide which script to deliver. It’s probably https
.
Maintainability
As you can see, I have dropped the numerous get_post_meta()
calls in favor of a single get_post_custom( get_the_ID() );
call. This means that your meta data is available in your JavaScript ~/js/3dpiechart.js
with pie_script_vars.meta
. From there on you should be able to include the Pie Chart. Your meta data probably looks like the following (example/shortened):
array (size=3)
'_edit_lock' =>
array (size=1)
0 => string '1407164887:1' (length=12)
'_edit_last' =>
array (size=1)
0 => string '1' (length=1)
'wpse_some_key' =>
array (size=1)
0 => string 'Lorem ipsum dolor sitem... tja.' (length=31)
In this case, you would reference your meta data with jsapi.wpse_some_key[0]
. It’s easy to maintain that way, because you avoid changing the keys in PHP and JS every time you change something.
In a theme
Simply change your scripts hook to wp_enqueue_scripts
– or for a login/register/password-lost page use login_enqueue_scripts
.
Example plugin
A quick working (tested) example plugin with the mock data from the Google Tutorial:
<?php
namespace WPSE;
/** Plugin Name: Google JSAPI test plugin */
add_action( 'admin_enqueue_scripts', __NAMESPACE__.'\addScripts' );
function addScripts()
{
wp_enqueue_script(
'google-jsapi',
'//www.google.com/jsapi',
array(),
0,
true
);
wp_enqueue_script(
'jsapi',
plugin_dir_url( __FILE__ ).'js/jsapi.js',
array( 'google-jsapi', ),
filemtime( plugin_dir_path( __FILE__ ).'js/jsapi.js' ),
true
);
wp_localize_script(
'jsapi',
'jsapi',
get_post_custom( get_the_ID() )
);
}
add_action( 'add_meta_boxes_post', __NAMESPACE__.'\addMetaBox' );
function addMetaBox( $post )
{
add_meta_box(
'piechart',
__( 'Your Data', 'your_textdomain' ),
__NAMESPACE__.'\MetaBoxContents',
'post'
);
}
function MetaBoxContents( $data )
{
?><div id="piechart"></div><?php
}
Then add subfolder named js
in your plugin folder and add a file named jsapi.js
with the following contents:
/*globals jQuery, $, jsapi, google */
( function( $, plugin ) {
"use strict";
google.load( "visualization", "1", {
packages : [ "corechart" ]
} );
google.setOnLoadCallback( function() {
var data = google.visualization.arrayToDataTable( [
[ 'Task', 'Hours per Day' ],
[ 'Work', 11 ],
[ 'Eat', 2 ],
[ 'Commute', 2 ],
[ 'Watch TV', 2 ],
[ 'Sleep', 7 ]
] ),
chart = new google.visualization.PieChart( document.getElementById( 'piechart' ) );
chart.draw( data, {
title : 'My Daily Activities'
} );
} );
} )( jQuery, jsapi || {} );
The plugin will print a quick and small chart into your meta box.
Download
The example plugin is available as GitHub Gist – View Source.