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 .

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.