I am trying to build a google pie chart in my wordpress site based on user input . Hence I have created custom meta box , and use wp_localize_script . Here is what I have done to pass custom metabox value to wordpress .
function pie_load_scripts() {
global $post;
$title = get_post_meta($post->ID, 'title', true);
$telecom = get_post_meta($post->ID, 'telecommunications-it', true);
$business = get_post_meta($post->ID, 'business-professional', true);
$retail = get_post_meta($post->ID, 'retail', true);
$other = get_post_meta($post->ID, 'other', true);
$media = get_post_meta($post->ID, 'media-entertainment', true);
$financial = get_post_meta($post->ID, 'financial', true);
$government = get_post_meta($post->ID, 'government', true);
$educational = get_post_meta($post->ID, 'educational', true);
wp_enqueue_script('pie-script', plugin_dir_url( __FILE__ ) . 'js/3dpiechart.js');
wp_localize_script('pie-script', 'pie_script_vars', array(
'telecom' =>$telecom ,
'title' =>$title ,
'business' =>$business ,
'retail' =>$retail ,
'other' =>$other ,
'media' =>$media ,
'financial' =>$financial ,
'government' =>$government ,
'educational' =>$educational ,
)
);
}
add_action('wp_enqueue_scripts', 'pie_load_scripts');
Here is my Js file ,
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Sector', 'Cost'],
['Telecomunications & Information Technology', pie_script_vars.telecom],
['Business Services & Professional', pie_script_vars.business],
['Retail (head office & storefront)', pie_script_vars.retail],
['Others', pie_script_vars.other],
['Media & Entertainment', pie_script_vars.media],
['Financial Services', pie_script_vars.financial],
['Government', pie_script_vars.government],
['Educational & Institutional', pie_script_vars.educational]
]);
var options = {
is3D: true,
title: pie_script_vars.title
};
The above code is the modification from google developers site (https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=fr) . Here I also want to set value of the title from meta box , which works fine , but in case of pie chart value it doesn’t work .
1 Answer
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.
