Vor einigen Tagen habe ich in meinem Notizbuchblog für den Artikel Umfrage: Welche Notizbuchgröße bevorzugt ihr? das großartige WordPress Plugin WP-Polls installiert.
Um die Umfrage und die Anzeige etwas aufzupeppen, habe ich dann noch die Google Chart API studiert und damit ein 3D-Kuchendiagramm integriert. Das sieht jetzt so aus:

Wie bin ich dazu vorgegangen?

1. Über die Homepage des Plugins habe ich mit Hilfe der Seite Usage den Code zur Integration der Umfragen in die sidebar.php integriert.
2. Nach dem Anlegen der Umfrage habe ich dann die Formatierung über Standardeinstellungen so modifziert, dass alles ins Layout des Notizbuchblogs passte.
3. Zur Integration der Google Chart API muss man dasFOrmat der URL kennen, die das entsprechende Bild anfordert. Die URL enthält die Parameter, die zur Erzeugung notwendig sind. Da die URL sich natürlich beim Ändern der Ergebnisse ändern muss, muss sie dynamisch mit JavaScript zusammengebaut werden.
4. Damit man in JavaScript die URL pro Seitenaufruf dynamisch zusammenbauen kann, müssen die Parameter zur Laufzeit irgendwo in der Seite versteckt gespeichert werden. Das geht, indem man den folgenden Code in die Templates “Result Body: Displayed When The User HAS NOT Voted” und “Result Body: Displayed When The User HAS Voted” einbaut:
   

   <input type=”hidden” id=”p-c-a-%POLL_ANSWER_ID%” value=”%POLL_ANSWER_VOTES%|%POLL_ANSWER%” class=”pcsel”/>

   Wichtig ist dabei, dass der Input Tag for dem schließenden </li> integriert wird.

5. Nun sind die Ergebnisse in der Seite und können ausgelesen werden. Da hilft die in WordPress integrierte jQuery Bibliothek. Der folgende JavaScript Code setzt die URL zusammen und baut das entsprechende <img> Tag in die Seite ein:
   

   <script type=”text/javascript”>
   var pchartlist=jQuery(”.pcsel”);
   var chd=”";
   var chdl=”";
   for(var pclc=0; pclc<pchartlist.length; pclc++) {
   data=pchartlist[pclc].value.split(’|');
   chd+=data[0]+’,';
   chdl+=data[1]+’|';
   }
   chd=chd.substr(0,chd.length-1);
   chdl=chdl.substr(0,chdl.length-1);
   var mtag=’img src=”http://chart.apis.google.com/chart?cht=p3&chd=t:’+chd+’&chs=160×150&chdl=’+chdl+’&chdlp=b&&chco=708332″‘;
   document.write(’<’+mtag+’>’);
   </script>

6. Die Farbe kann über den Parameter chco=708332 geändert werden, die Größe über chs=160×150. Die Chart API bietet sehr viele Möglichkeiten zur Formatierung, etwa um die Legende zu positionieren oder ein- und auszublenden. Einfach einen Blick in Google Chart API werfen.

Ich habe bisher nur eine Umfrage im Blog und ich gehe davon aus, dass das Verfahren mit mehreren Umfragen nicht funktioniert. Dazu bräuchte ich noch einen zusätzlich Parameter im Template. Dazu werde ich den Autor noch anschreiben. Außerdem wird das Verfahren mit Umfragen nicht korrekt funktionieren, die Mehrfachauswahl zulassen – zumindest muss man dann die Grafik anders interpretieren.

Das Ergebnis seht ihr im Screenshot oben, aber überzeugt euch selbst …

Wer es selbst ausprobieren will und Probleme mit der Integration hat, kann mir gerne eine Mail schreiben.

Dieser Eintrag wurde am Samstag, den 26. September 2009 um 14:19 Uhr erstellt und ist in der Kategorie Internet zu finden. Kommentare können in einem RSS 2.0 Feed verfolgt werden.
Aktionen: Kommentar schreiben, oder Trackback auf eigener Seite einrichten.

Tags zu diesem Eintrag: API, Chart, Plugin, WP-Polls