X

Como exibir os gráficos do Google no WordPress

Snippets by IsItWP

Deseja exibir os gráficos do Google no WordPress? Nosso snippet criará um novo shortcode que aproveita a API de gráficos do Google. Esse shortcode permitirá que você exiba uma série de gráficos, como linhas, xyline, sparkline, metro, dispersão, venn, pizza e pie2d.

Instruções:

Tudo o que você precisa fazer é adicionar esse código ao arquivo functions.php do seu tema ou em um plug-in específico do site:

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

Veja o exemplo de shortcode abaixo de um gráfico de pizza 3D. Altere o atributo type em seu shortcode para especificar o tipo de gráfico que deseja exibir.

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

Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como copiar/colar corretamente trechos de código no WordPress, para não danificar seu site acidentalmente.

Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: Melhores construtores de páginas do WordPress (comparados).

Comentários   Deixe uma resposta

  1. Hello, thanks for this. How can I use stacked bar type? or gauge type? Also, how can I customize this further with for example opacity and so on…. Hope I get a reply from you thanks.

  2. Hello ! How to add alt tag to this image? I specify that my knowledge in html is very low 🙂

  3. Great codes. Thank you and it worked.
    Also, how do I add tables from Google Charts? Also, does it impact my SEO if I use the tables? Thanks.

Adicionar um comentário

Ficamos felizes por você ter optado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossa política de privacidade, e todos os links são nofollow. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

WordPress Launch Checklist

A lista de verificação definitiva para o lançamento do WordPress

Compilamos todos os itens essenciais da lista de verificação para o lançamento de seu próximo site WordPress em um ebook prático.
Sim, envie-me o livro eletrônico gratuito grátis!