Home / functions.php / Google charts shortcode, lines, xyline, sparkline, meter, scatter, venn, pie, pie2d
  • How to Google charts shortcode, lines, xyline, sparkline, meter, scatter, venn, pie, pie2d

    google-charts-shortcode-lines-xyline-sparkline-meter-scatter-venn-pie-pie2d

    Adding this snippet to the functions.php of your wordpress theme will create a new shortcode that takes advantage of the Google charts API. This shortcode will let you display a range of charts “lines, xyline, sparkline, meter, scatter, venn, pie, pie2d” See the below shortcode example of a 3D pie chart. Change the type attribute in your shortcode to specify the type of graph you wish to display.

    ( example screenshot ) ( click code to copy )

    wordpress snippet : PHP

    <>
    function google_chart_shortcode( $atts ) {
    	extract(shortcode_atts(array(
    	    'data' => '',
    	    'size' => '400x180',
    	    'colors' => '',
    	    'title' => '',
    	    'labels' => '',
    	    'type' => 'pie',
    	    'advanced' => ''
    	), $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.'';
    	return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
    }
    add_shortcode('chart', 'google_chart_shortcode');
    
    ( click code to copy )

    wordpress snippet : SHORTCODE

    <>
    [chart data="41,37.89,10.67,2.03" labels="Reffering+sites|Search+Engines|Direct+traffic|Other"  colors="ff0000,005599,fff000,000000" size="488x200" title="Traffic  Sources" type="pie"]
    

    ( WordPress codex functions, hooks, in this snippet. )

    add_shortcode, shortcode_atts, wp,