Cómo mostrar gráficos de Google en WordPress

¿Quieres mostrar los gráficos de Google en WordPress? Nuestro snippet creará un nuevo shortcode que aprovecha la API de gráficos de Google. Este shortcode le permitirá mostrar una serie de gráficos, tales como líneas, xyline, sparkline, metro, dispersión, venn, pastel y pie2d.

Instrucciones:

Todo lo que tienes que hacer es añadir este código al archivo functions.php de tu tema o en un plugin específico del sitio:

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');

Vea el siguiente ejemplo de shortcode de un gráfico circular en 3D. Cambie el atributo type en su shortcode para especificar el tipo de gráfico que desea mostrar.

[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"]

Nota: Si es la primera vez que añade fragmentos de código en WordPress, consulte nuestra guía sobre cómo copiar / pegar correctamente fragmentos de código en WordPress, para no romper accidentalmente su sitio.

Si le gustó este fragmento de código, por favor considere revisar nuestros otros artículos en el sitio como: Los mejores constructores de páginas de WordPress (Comparados).