In wordpress, common data like author, date, title, excerpt, content, status and post type are being stored in wp_posts. Whereas, the data like attribute info of the post are being stored in wp_postmeta. The attributes are custom fields that you can be defined for specific post type. I have installed a nice shopping theme that defines a set of custom post type and each has its own custom attributes. I have installed maya shop theme and loaded it with sample data. I want to know how the product data is structured and I found out the following:

The data of the products are split into 2 groups. The first group are regular post info like author, title, content and status are stored in the wp_posts. The other group contains some product specific fields like price, size, stock status and etc are stored in the wp_postmeta. It is a typical approach that most of the custom post type follow. However, it is an inefficient way to store product info. For example, a single product  in catalog now appears in 2 tables and custom fields in the example are up to 50 fields. As you can calculate, one product will occupy ~50 rows in wp_postmeta. If my catalog has 5000 products, it has about 250K rows. It is not that bad. But once your catalog grows 4 times, it already reaches 1 millions rows. Apart form that, update product info could span across multiple rows in multiple tables as well. To me, it is a trade-off between flexibility and scalability/ performance.

You may notice that the category and tag are not stored in either of these tables. These info are stored:

• wp_terms (term_id, name, slug)
• wp_term_relationships (object_id,  term_taxonomy_id)
• wp_term_taxonomy (term_taxonomy_id,  term_id, taxonomy, description, parent, count)

WordPress comes with 3 taxonomies, post tag, categories, link categories.

•  Post Tag: acts like a label, attached to a post.
• Category: acts like a “bucket” in which we put  posts, are often hierarchical. Posts can live in multiple categories.
• Link Category: acts like a label, attached to a  link.

Each tag or category you create is a “term” within that taxonomy. For  example, if you create a category “Movies” (in our site about  entertainment), “Movies” becomes a term within the category  taxonomy.

How can devleoper access the data in wordpress?

To access the data, we need to get the database handle. In wordpress, you can use wpdb as the handle.

Query returns > 1 rows:

Generic, mulitple row results can be pulled from the database with [code]]czoxMTpcImdldF9yZXN1bHRzXCI7e1smKiZdfQ==[[/code]. The function returns the entire query result as an array. Each element of this array corresponds to one row of the query result and, like [code]]czo3OlwiZ2V0X3Jvd1wiO3tbJiomXX0=[[/code], can be an object, an associative array, or a numbered array.

• $fivesdrafts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'draft' AND post_author = 5");

Query return 1 row:

• $wpdb->get_row("SELECT * FROM $wpdb->links WHERE link_id = 10");

Query returns a single field value:

• $user_count = $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(*) FROM $wpdb->users;" ) );

Select a row:

• output type can be: OBJECT, ARRAY_A (associative array), ARRAY_N (numeric indexed array). Offset defaults to 0.
• $mylink = $wpdb->get_row("SELECT * FROM $wpdb->links WHERE link_id = 10", ARRAY_A);

Generic method:

• $wpdb->query($wpdb->prepare("DELETE FROM $wpdb->postmeta WHERE post_id = '13'", $id, $key )

class SyncServiceTest {
   @Test
   void testSyncCall() {
     Object input = ...
     Object expectedOutput = ...
     SyncService syncService = new SyncService();
     assertEqual(syncService.call(input), expectedOutput);
   }
 }

However, this model doesn’t fit if the call is asynchronous; ie: the calling thread is not blocked and the result will come later from a separated callback thread. For example, if you have the following AsyncService, where the “call()” method returns immediately and the result comes back from a callback interface.

class AsyncService {
   public static interface ResultHandler {
      void handleResult(Object result);
   }

   ResultHandler resultHandler;

   public AsyncService(ResultHandler resultHandler) {
      this.resultHandler = resultHandler;
   }

   public void call(final Object request) throws InterruptedException {
      Executor executor =
         new ThreadedExecutor().execute(new Runnable() {
            public void run() {
               Object result = process(request);
               resultHandler.handleResult(result);
            }
         });
   }
}

The test method need to be changed. You need to block the calling thread until the result comes back from the callback thread. The modified test code will look like the following …

class AsyncServiceTest {

   Object response;

   @Test
   public void testAsyncCall() {
      Object input = ...
      Object expectedOutput = ...
      final Latch latch = new Latch();

      AsyncCall asyncCall =
         new AsyncCall(new AsyncCall.ResultHandler() {
            public void handleResult(Object result) {
               response = result;
               latch.release();
            }
         });

      asyncCall.call(input);
      latch.attempt(3000);
      assertEquals(response, expectedOutput);
   }
}

In this test method, the calling thread is waiting for the callback thread. A latch is used for the synchronization. You cannot use Thread.wait() and Thread.notify() for this purpose because there is a possibility that notify can be called before the wait and then one thread will wait indefinitely. Latch is a once-off switch and if the “release” is called first, then all subsequent “attempt” call will return immediately.

• non-linear
• random

Once you feel that the data points should be best fit for a straight line, you apply a formula to find out the best way to draw a line that has the least square distance summation across all the data points. This video will give you the detail.

The data points showing on the scatterpoint above represents the training set that tells you what x gives out what y. Here the x is a single feature. For example, you are trying to determine the relationship of house size with price where x=house size and y=price. However, we all know that house price should be determined by many factors. To name a few:

• Number of Bedrooms
• Number of Bathrooms
• Location
• Year of Built
• etc

If you try to combine those input features to predict the house price, then your data points will be in a multidimensional space. To find a line to best fit all the points in a multidimensional space is how we use to build the prediction model for house pricing.

Steps to follow

Download and install XAMPP

Restart Apache from XAMPP control to take effect!

Debug the php code

I am using phpstorm 2 for the work and you may have your own IDE. But either one, you may need to enable xDebug in order to do step thru debugging. I use the links below to get this working.

1. Download the xdebug.so from this link.
2. Following this post to set it up.

Now I can run my phpstorm in debug mode pointing to the ~/Sites/christianrelive.com

Hope it is helpful

JQuery Plugin Template

To read a plugin, you first need to understand its general structure. Here is the JQuery template you normally see.

(function($) {
     // plugin definition
     $.fn.myplugin = function(options) {

        // build main options before element iteration
        var opts = $.extend({}, $.fn.myplugin.defaults, options);

        // iterate and reformat each matched element
        return this.each(function() {
          //CODE TO MANIPULATE EACH MATCHED ELEMENT
          ....
        });
    };

    //custom javascript functions in your plugins
    ...

})(jQuery);

What is in this template?

• It defines the name of the plugin as “myplugin” and this plugin is written as function object with options as parameter to pass in.
• The .extend method provides you a way to define the default options in your plugin and a mechanism to override it.
• With this plugin included in your JQuery code, you now can do $(selector).myplugin(xxx). This will pass the matching element(s) one by one to the each() method in the plugin. And the magic normally happen in this method.

Write my first plugin to highlight my text

Below is a simple plugin that uses this structure:

(function($) {
     // plugin definition
     $.fn.myplugin = function(options) {
        debug(this);
        // build main options before element iteration
        var opts = $.extend({}, $.fn.myplugin.defaults, options);
        // iterate and reformat each matched element
        return this.each(function() {
           $this = $(this);
           // build element specific options
           var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
           // update element styles
           $this.css({
              backgroundColor: o.background,
              color: o.foreground
           });
           var markup = $this.html();
           // call our format function
           markup = $.fn.myplugin.format(markup);
           $this.html(markup);
        });
    };

    // private function for debugging
    function debug($obj) {
       if (window.console && window.console.log)
          window.console.log('myplugin selection count: ' + $obj.size());
    };

    // define and expose our public format function
    $.fn.myplugin.format = function(txt) {
       return '<strong>' + txt + '</strong>';
    };

    // plugin defaults
    $.fn.myplugin.defaults = {
       foreground: 'red',
       background: 'yellow'
    };

})(jQuery);

Once you define the plugin, lets see how we can override the default properties.

// override plugin default foreground color
$.fn.myplugin.defaults.foreground = 'blue';
// ...
// invoke plugin using new defaults
$('.myDiv').myplugin();
// ...
// override default by passing options to plugin method
$('#green').myplugin({
  foreground: 'green'
});

This plugin has 2 additional methods, one is private and one is public. Public function has the format like: $.fn.myplugin.format = function(xxx){…}. The reason why we expose a function to public b/c it gives a way for users to override it. With this, users can extend the functionality of the plugin.

Metadata Plugin

You may have noticed another thing in the plugin code. That is the “.meta”.

var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

Imagine that if you want the selected elements to be highlight in specific color. How can you do that with the control I showed you? It is simply impossible as what I have shown you so far is global options. Thanks that JQuery allows you to add metadata at the element level that can be used inside the each() method. The code above check if metadata plugin is installed. If yes, it will extract the metadata using $this.data() and have it overridden the default options. If no, it will just use the default options.

<!--  markup  -->
<div class="abc { background: 'red', foreground: 'white' }">
  Have a nice day!
</div>
<div class="abc { foreground: 'orange' }">
  Have a nice day!
</div>
<div class="abc { background: 'green' }">
  Have a nice day!
</div>

You can now do $(.abc).myplugin() in your JQuery code and have each div with class=”abc” doing different color of highlight.

Conclusion

So far so good? Most of content here I borrowed from here. All I do here is to organize it and provide some of my own explanation. Now I think I am ready to look at some of the cool widgets.

• HTML element
• HTML attribute
• CSS element

The manipulation part I mean here includes:

• Changing its content
• Tell the element to carry an action
• Capture its event and handle it

This technology really provides a clean way to glue Javascript, HTML and CSS together. So I decide to spend sometime to learn it. This post is just the note I captured after I had gone through several basic tutorials. I merely do my job to cut out the crap and focus on creating a reference page for my own usage.

Get Started

Include the following javascript in your html header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

The code below registers an anonymous function to the ready event from document. So, when the page is ready, this anonymous function will be invoked and in turn register another anonymous function to the button’s click event to tell all “p” to hide if user click on it.

<script type="text/javascript">
    $(document).ready(function(){
       $("button").click(function(){
          $("p").hide();
       });
    });
</script>

//simplified version:
<script type="text/javascript">
$(function(){
    $("button").click(function(){
       $("p").hide();
    });
});
</script>

Select an element on the web page

Syntax: $(selector)

element selector

1. $(“p”)  -  all <p> elements
2. $(“.test”) – all elements with class = “test”
3. $(“#test”) – all elements with id=”test”
4. $(this) – current element
5. $(“p.test”) – all paragraph with class =” test”
6. $(“p#test”) – all paragraph with id=”test”
7. $(“p#intro:first) – the first <p> element with id=”intro”
8. $(“div > a”) – all <a> elements directly under <div>
9. $(“div a”) – all <a> within a div element, no matter directly under it or not.
10. $(“#divTestArea1 span, #divTestArea1 b”) – multiple selectors

attribute selector

1. $(“[href]“) – select all elements with an href attribute
2. $(“[href='#']“) – select all element with an href value equals to #
3. $(“[href!='#']“) – select all element with an href attribute NOT equals to #
4. $(“[href$='.jpg']“) – select all element with an href attribute end with .jpg
5. $(“a[target='_blank']“) – select <a> element with target attribute = “_blank”
6. $(“input[name^='txt']“) -  start with “txt”
7. $(“input[name$='letter']“) – end with “letter”
8. $(“input[name*='txt']“) -  contain “txt”

Css selector

As best practice, you normally don’t have style embedded with the html. If you want to selectively apply the style, you identify the element using id and/or class. So, you simply can use the element selector above.

Manipulate an element on the web page

Manipulate HTML element

<div id="divText"></div>
<div id="divHtml"></div>
<input type="text" id="txtTest" name="txtTest" value="Input field" />

<script type="text/javascript">
$(function()
{
     $("#divText").text("A dynamically set text");
     $("#divHtml").html("<b><i>A dynamically set HTML string</i></b>");
     $("#txtTest").val("A dynamically set value");
});

//NOTE: you can use callback here to capture the old value and element index
</script>

There are some other ways you can use to change the content of the element:

1. $(“p”).html(“xxxx”);
2. $(“p”).append(“xxxx”);
3. $(“p”).before(“xxx”);
4. $(“p”).after(“xxxx”);

Manipulate HTML attribute

$(selector).attr("attributeName", "attributeValue");

//multiple changes at one shot
$("#aGoogle3").attr(
{
    "href" : "http://www.google.co.uk",
    "title" : "Google.co.uk"
});

//callback for you to obtain the old attribute value and element index
//example below appends new info in the url
$("a.google").attr("href", function(index, oldValue)
{
    return oldValue + "imghp?tab=wi";
});

Manipulate CSS properties

$("p").css("background-color", "yellow");   //change all paragraph's background color to yellow.
$("p").css({"background-color":"yellow", "font-size":"200%"});    //multiple changes

<script type="text/javascript">
function ToggleClass(sender)
{
   if($(sender).hasClass("bold"))
      $(sender).removeClass("bold");
   else
      $(sender).addClass("bold");
}
</script>
<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Tell an element to take an action

TODO

Capture the event from an element and handle it

//typical way to do it, not clean at all
<a href="javascript:void(0);" onclick="alert('Hello, world!');">Test</a>

//use JQuery to bind the handler dynamically
<script type="text/javascript">
$(function()
{
        $("a").bind("click", function() {
             alert($(this).text());
        });
        $("#divArea").bind("mousemove", function(event)
        {
             $(this).text(event.pageX + "," + event.pageY);
        });
});
</script>
//javascript:void(0) simply disable sending users to another page
<a href="javascript:void(0);">Test 1</a>
<a href="javascript:void(0);">Test 2</a>

1. jQuery will automatically assign the element that is clicked, to the “this” keyword inside of the anonymous function.
2. When jQuery calls your method, it will pass information about the event as the first parameter, if you have specified one or more parameters on it like the mouseover anonymous function above.
3. You can use unbind() to remove any event handlers that you have attached with the bind() function
4. bind will apply to the element already exists in the page. It will not apply to element that you dynamically added. To do that, you need to use live() instead. To unbind live, you need to use die().

<div id="divTestArea2">
    <a href="javascript:void(0);" onclick="AddBox();">Add box</a>
    <div>This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
    $(".test").live("mouseover", function(){
         $(this).css("background-color", "blue");
    }).live("mouseout", function(){
        $(this).css("background-color", "white");
    });
});

function AddBox()
{
    var div = $("<div></div>").addClass("test").text("Another box");
    $("#divTestArea2").append(div);
}
</script>

The example above shows you how to combine the things you have learnt:

1. All JQuery methods return you JQuery object that you can use to chain them together if you want to apply several jquery methods to the selected element.
2. It shows you have to dynamically create the <div> element and add class and value to it.
3. It shows you how to append the newly created <div> to another element.
4. It shows you how to use live to give the newly created the defined behavior rather than bind().

Conclusion

This conclude the first day of JQuery. So far, the tool is pretty cool to me. Later I will put sometime to learn about the topics below:

1. JQuery and AJAX
2. Write JQuery Plugin

After these, I will spend sometime to study some cool JQuery widgets and see how the author creates these. Below are some of the cool widget that I really want to dig into:

1. Simple Tooltip
2. Contextual Slideout tips
3. Latest Tweet Tooltips

This post is password protected. To view it please enter your password below:

Password:

How to use the post metadata?

To use this metadata, you need to know how to pull them out. Below is what you can do:

//single value

<?php echo get_post_meta($post->ID, 'key', true); ?>

//multiple values
<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
<h3>This post is inspired by:</h3>
<ul>
  <?php foreach($songs as $song) {
      echo '<li>'.$song.'</li>';
    } ?>
</ul>
?>

Now you know how to get this metadata out from database. What can you do about this metadata? To get some ideas, you can look into a powerful plugins like Yoast’s WordPress SEO. It uses the custom fields to manage the html meta for SEO purpose. Many powerful frameworks like Genesis, Headway, iThemes are also utilizing custom fields to control different single post layouts. Here are other ideas:

• Only Display Posts with a Specific Custom Field
• Display the Digg Button only when the custom field is present
• Rewrite Guest Author’s name with Custom Fields (need add_filter)

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );

function guest_author_name( $name ) {
   global $post;
   $author = get_post_meta( $post->ID, 'guest-author', true );
   if ( $author )
     $name = $author;
   return $name;
}

• Custom sidebar. Replace “<?php get_sidebar(); ?>” in  page.php or single.php with the following code:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

How to build a custom write panel?

In fact, there are more and more plugins and frameworks are using custom fields to extend the power of wordpress. Imagine if you need to use custom field panel in post to manage all those custom fields, you may spend days to write a post. So, many plugin and framework designers are now using custom write panel to hide this from us in order to make our lives easier.

What is wordpress shortcodes?

The best way to show you the power of wordpress shortcode is to give you some examples.

Amazon ProductPrice Change HistoryFollow

Apple iPad 2 MC979LL/A Tablet (16GB, Wifi, White) 2nd Generation

$426.99

3rd party new price

• May 18, 2012 04:37 PM – $414.95
• May 18, 2012 10:05 AM – $422.94
• May 17, 2012 08:50 PM – $416.99
• May 17, 2012 07:15 AM – $415.00
• May 16, 2012 04:51 PM – $409.00
• May 15, 2012 09:26 PM – $419.95
• May 15, 2012 08:25 AM – $414.00
• May 14, 2012 06:06 PM – $415.00
• May 14, 2012 11:46 AM – $424.95
• May 14, 2012 05:03 AM – $410.00

3rd party used price

• May 18, 2012 04:37 PM – $348.88
• May 18, 2012 10:05 AM – $339.00
• May 18, 2012 03:27 AM – $332.00
• May 17, 2012 02:14 PM – $339.00
• May 16, 2012 11:09 PM – $349.75
• May 16, 2012 04:51 PM – $349.99
• May 16, 2012 10:16 AM – $347.50
• May 15, 2012 09:26 PM – $349.99
• May 15, 2012 03:03 PM – $325.00
• May 15, 2012 12:26 AM – $359.99

• 

  AlifAfganisme Alif Afganisme

  @sanditatto Hello, follow @postingiklan Tweet Iklan no.1 di Twitter,mau iPad 2 & Samsung Android? Gampang! Cek fav.THX^^ #Periode8

  19 seconds ago reply retweet favorite
• 

  AlifAfganisme Alif Afganisme

  @ricogenji Hello, follow @postingiklan Tweet Iklan no.1 di Twitter,mau iPad 2 & Samsung Android? Gampang! Cek fav.THX^^ #Periode8

  23 seconds ago reply retweet favorite
• 

  emdarlington ellen darlington

  RT & Follow the next big #college social network @freezecrowd to win an iPad 2 at 55,555 Join retweet list #sm #smm t.co/JxEBzrtv

  25 seconds ago reply retweet favorite
• 

  AlifAfganisme Alif Afganisme

  @Akafauri Hello, follow @postingiklan Tweet Iklan no.1 di Twitter,mau iPad 2 & Samsung Android? Gampang! Cek fav.THX^^ #Periode8

  27 seconds ago reply retweet favorite
• 

  AlifAfganisme Alif Afganisme

  @bayuvirgian Hello, follow @postingiklan Tweet Iklan no.1 di Twitter,mau iPad 2 & Samsung Android? Gampang! Cek fav.THX^^ #Periode8

  31 seconds ago reply retweet favorite
• 

  AlifAfganisme Alif Afganisme

  @IanTita_Item Hello, follow @postingiklan Tweet Iklan no.1 di Twitter,mau iPad 2 & Samsung Android? Gampang! Cek fav.THX^^ #Periode8

  36 seconds ago reply retweet favorite
• 

  spoepona spoe pona

  10 ways Windows 8 tablets can take on the iPad t.co/KrptWDeS XPS 13 Motorola Motoluxe review Lumia 900 WP7 Xoom 2 tablet _1

  37 seconds ago reply retweet favorite
• 

  swartling Stefan Svartling

  Kom igång med iPhoto till iOS med boken Hello iPhoto till iPad och iBooks 2 t.co/aLQoxHfx #Nyheter

  38 seconds ago reply retweet favorite
• 

  1Matam matam honorine

  iPad 2 Sells for $100.03
  An iPad 2 Just Sold For $100.03 That’s 79% OFF the RETAIL Price! Visit t.co/4rmzwSI9 Now Start Saving Today

  42 seconds ago reply retweet favorite
• 

  uqyfisiv Raphael Vandervort

  Magenta Tri-PAD Canvas Case Stand for Apple iPad 2 + Black Car Charger for iPad 2 + Anti-Glare Screen Protector … t.co/QnrRUdYO

  43 seconds ago reply retweet favorite

The widget above is created purely using wordpress shortcodes. See the code below:

[tabs style="default" title="Wordpress shortcode demo"]
   [tab title="Amazon Product"] [amazon asin="B0047DVWLW" template="Simple Ad Unit"][/tab]
   [tab title="Facebook Comments"]
      [rsstag url=http://camelcamelcamel.com/product/B0047DVWLW/new.xml]
      [rsstag url=http://camelcamelcamel.com/product/B0047DVWLW/used.xml]
   [/tab]
   [tab title="Follow"] [twitter_stream search="ipad 2"] [/tab]
[/tabs]

Shortcode in Template

If you are creating a product detail page, you can open your wordpress editor to type in the shortcode like above. However, if you have quit a bit of products, this process will be very tedious. If you are a tech person, you could create a script to load your products’ content into wordpress database’s post table. But if you want to use wordpress as the data entry UI, you can create a product detail template that leverages the shortcodes using the specific method below:

<?php echo do_shortcode("[shortcode]"); ?>

You can also use shortcode dynamically based on the custom field setting like below:

<?php
if(get_post_meta($post->ID, 'gallery', true)) {
    $shortcode = get_post_meta($post->ID, 'gallery', true);
    echo do_shortcode("$shortcode");
 }
 else { echo ''; }
?>

How to create your own wordpress shortcodes?

There are times you cannot find any shortcode that fits your need exactly. Two things you can do:

1. Customize an existing one from other plugin.
2. Build one from scratch yourself.

However, both require you to have good understanding how shortcodes work behind the scene. Don’t worry. It is not that difficult if you have a little bit of coding skill. To define your own wordpress shortcode, you first write a function of what you want the shortcode to do. Then you register the function via add_shortcode(tagName, functionName). Here is an example to define the shortcode name bartag with attribute foo. The extract method below taking the return of another function shortcode_atts that is used to define the default attribute value(s). If an attribute is not in this default list, it will not even be interpreted.

// [bartag foo="foo-value"]
  function bartag_func( $atts ) {
     extract( shortcode_atts( array(
        'foo' => 'something',
        'bar' => 'something else',
     ), $atts ) );
    return "foo = {$foo}";
  }
  add_shortcode( 'bartag', 'bartag_func' );

Now you have an good idea how to define a function. Here we are going to create a shortcode to make Google chart creation easier (ie. no need to remember the parameters and url).

Creating a Google chart is quite simple, you just need to simply define a url under “img” will do the magic. However, the url uses some short parameters that you may need to look them up in order to create the url correctly. To make it easier, we create the shortcode above to make the parameters more explicit and hide the google url for you. With this shortcode, now you can create a sparkline chart as following.

function chart_shortcode( $atts ) {
   extract(shortcode_atts(array(
     'data' => '',
     'colors' => '',
     'size' => '400x200',
     'bg' => 'ffffff',
     'title' => '',
     'labels' => '',
     'advanced' => '',
     'type' => 'pie'
   ), $atts));

switch ($type) {
case 'line' :
   $charttype = 'lc'; break;
case 'xyline' :
   $charttype = 'lxy'; break;
case 'sparkline' :
   $charttype = 'ls'; break;
case 'meter' :
   $charttype = 'gom'; break;
case 'scatter' :
   $charttype = 's'; break;
case 'venn' :
   $charttype = 'v'; break;
case 'pie' :
   $charttype = 'p3'; break;
case 'pie2d' :
   $charttype = 'p'; break;
default :
   $charttype = $type;
break;
}

if ($title) $string .= '&chtt='.$title.'';
if ($labels) $string .= '&chl='.$labels.'';
if ($colors) $string .= '&chco='.$colors.'';
$string .= '&chs='.$size.'';
$string .= '&chd=t:'.$data.'';
$string .= '&chf='.$bg.'';

return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

After you write this code, save it under plugin file named google-chart.php and put the following header above the function.

<?php
/**
* @package Google Chart
* @version 1.0
*/
/*
Plugin Name: Google Chart Shortcode
Plugin URI:
Description: This is google chart shortcode plugin
Author: Raymond Hon
Version: 1.0
Author URI: http://www.solutionhacker.com
*/

...

</php>

Then you can activate this plugin in WordPress. If it is activated, you can put the following wordpress shortcode in your post and generate the chart as below:

[chart data="0,12,24,26,32,64,54,24,22,20,8,2,0,0,3" bg="F7F9FA" size="200x100" type="sparkline"]

[[chart data="0,12,24,26,32,64,54,24,22,20,8,2,0,0,3" bg="F7F9FA" size="200x100" type="sparkline"]]

When wordpress shortcode meets custom fields in post

Congratulation! If you follow my tutorial above, you have just equipped the key skill that can take your wordpress website to the next level.  However, I am not going to stop here. I would like to show you how you can use shortcode with custom field. First, you can write a shortcode to extract custom field value and use it in your post. To do that, you can build a plugin following the code below:

add_shortcode('field', 'shortcode_field');
function shortcode_field($atts){
     extract(shortcode_atts(array(
                  'post_id' => NULL,
               ), $atts));
  if(!isset($atts[0])) return;
       $field = esc_attr($atts[0]);
       global $post;
       $post_id = (NULL === $post_id) ? $post->ID : $post_id;
       return get_post_meta($post_id, $field, true);
}

Once you can extract the custom field from post using shortcode, you can use it for UI and/ or post content.