2

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 .

0

1 Answer 1

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.