X

Cómo mostrar gráficos de Google en WordPress

Snippets de IsItWP

¿Quieres mostrar gráficos de Google en WordPress? Nuestro fragmento creará un nuevo shortcode que aprovecha la API de gráficos de Google. Este shortcode te permitirá mostrar una variedad de gráficos, como líneas, xyline, sparkline, medidor, dispersión, venn, pastel y pastel2d.

Instrucciones:

Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico para el 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 código corto de un gráfico circular 3D. Cambie el atributo type en su código corto 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 agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo copiar y pegar fragmentos de código correctamente en WordPress, para no dañar accidentalmente tu sitio.

Si te gustó este fragmento de código, considera revisar nuestros otros artículos en el sitio como: Los mejores constructores de páginas de WordPress (comparados).

Comentarios   Dejar una respuesta

  1. Hola, gracias por esto. ¿Cómo puedo usar el tipo de barra apilada? ¿o el tipo de medidor? Además, ¿cómo puedo personalizar esto aún más con, por ejemplo, opacidad y demás…. Espero recibir una respuesta de usted, gracias.

  2. ¡Hola! ¿Cómo agrego una etiqueta alt a esta imagen? Especifico que mi conocimiento de HTML es muy bajo 🙂

  3. Geniales códigos. Gracias y funcionó.
    Además, ¿cómo agrego tablas de Google Charts? Además, ¿afecta mi SEO si uso las tablas? Gracias.

Agregar un comentario

Nos complace que hayas elegido dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.

Lista de verificación para lanzar WordPress

La lista de verificación definitiva para lanzar WordPress

Hemos recopilado todos los elementos esenciales de la lista de verificación para el lanzamiento de tu próximo sitio web de WordPress en un práctico ebook.
¡Sí, envíame el eBook gratis!