Google är ett företag som – trots att de hamnar i blåsväder ibland – i många fall gör livet lättare för oss webbutvecklare. Även fast mycket av det Google gör inte är fri mjukvara så måste man nog ändå tillstå att Google grundar mycket av sin verksamhet i den fria mjukvarans principer – stora delar av Googles infrastruktur baseras på just fri mjukvara – och mängder av den kod Google producerar ges tillbaks till de fri mjukvaruprojekt som berörs och delar av nyproducerad kod släpps under fri mjukvarulicenser.
Google är dessutom bra på att producera öppna gränssnitt (API) mot många av de tjänster de erbjuder. Så även fast tjänsten i sig inte är fri mjukvara så går funktionaliteten att använda utanför själva tjänsten.
Här på Tekniska Verken använder vi några av Googles tjänster och API:er – Google Analytics och Google Charts för att nämna några – och nu tänkte jag berätta om ytterligare ett Google API, nämligen Google Visualization.

Vad är Google Visualization?

Enkelt beskrivet är Google Visualization ett API som låter dig skapa interaktiva diagram eller datastrukturer (som tabeller t ex). På Tekniska Verken använder vi diagram på Mina Sidor för att visualisera förbrukningsstatistik. Och att skapa diagram programmatiskt är inte plättlätt så om det finns funktionalitet för det att tillgå gör man ju bäst i att använda den. Varför uppfinna hjulet igen?
I dagsläget använder vi Google Charts för att skapa statiska diagram – i form av bilder – på Mina Sidor. Vi kommer inom en inte allt för lång framtid att behöva skapa interaktiva diagram och därför tänkte jag nu dela med mig av hur Google Visualization funkar.

Skapa interaktiva diagram

Hos Google finns massor av exempel på hur man använder diagramfunktionerna. Så jag tänker inte dra grunderna här utan tänkte visa hur vi gjort en "omslutningsklass" (wrapper) för att enklare kunna skapa diagram där man även kan byta diagramtyp mellan stapel- och linjediagram.

Klassen heter kort och gott Chart och har - i dess nuvarande form - bara två publika metoder - drawBar och drawLine - och ett statiskt (singleton) konfigurationsobjekt där man kan ange omfång, färger och lite annat smått och gott för diagrammen.

I exemplen nedan används också jQuery.

Så för att allt ska funka behöver följande tre Javascript importeras (i HEAD-taggen). Vi passar också på att ange några konfigurationer för diagrammen:

24 rader HTML
  1. <head> 

  2. <!-- ... --> 

  3. <!-- Googles JavaScript API --> 

  4. <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

  5. <!-- jQuery --> 

  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

  7. <!-- Chart --> 

  8. <script type="text/javascript" src="http://www.tekniskaverken.se/t-net/my-pages/js/chart.js"></script> 

  9.  

  10. <!-- Ange bredd, höjd och färger på staplarna för diagrammen --> 

  11. <script type="text/javascript">   

  12. // Bredd: 720 pixlar, höjd: 250 pixlar  

  13. Chart.Config.setSize(480, 250);   

  14. // Har man fler är tre kolumner (staplar eller linjer) är   

  15. // det bara att fylla på.  

  16. Chart.Config.setColors('#237a9e','#949e23','#9e2365');   

  17. // Beskrivning av den horizontella axeln  

  18. Chart.Config.set('hAxis', { title: 'Månad',   

  19. titleColor: '#444444' });   

  20. // Beskrivning av den vertikala axeln  

  21. Chart.Config.set('vAxis', { title: 'Förbrukning',   

  22. titleColor: '#444444' });   

  23. </script> 

  24. </head> 

Okej, nu har vi allt för att kunna börja skapa diagram.

JavaScript-koden för att skapa diagrammen kör vi "inline" i själva HTML-dokumentet. Jag behöver väl knappast nämna att "data-objektet" nedan genereras automatiskt av serverkod vid "rikitigt" användande.

41 rader HTML
  1. <body> 

  2. <!-- ... --> 

  3. <!-- Här kommer diagrammet att placeras när det är  

  4. laddat och klart --> 

  5. <div id="chart1"> 

  6. <p>Laddar diagram</p> 

  7. </div> 

  8. <script type="text/javascript">   

  9. // Först sätter vi upp en datatabell  

  10. var data = new google.visualization.DataTable();   

  11. // Lägg till datakolumner: datatyp, rubrik  

  12. data.addColumn('string', 'Månad');   

  13. data.addColumn('number', '2008');   

  14. data.addColumn('number', '2009');   

  15. data.addColumn('number', '2010');   

  16.   

  17. // Lägg till rader  

  18. data.addRows(3);   

  19.   

  20. // Lägg till värde: rad, kolumn, värde  

  21. data.setValue(0, 0, 'jan');   

  22. data.setValue(0, 1, 32);   

  23. data.setValue(0, 2, 10);   

  24. data.setValue(0, 3, 43);   

  25.   

  26. data.setValue(1, 0, 'feb');   

  27. data.setValue(1, 1, 12);   

  28. data.setValue(1, 2, 17);   

  29. data.setValue(1, 3, 23);   

  30.   

  31. data.setValue(2, 0, 'mar');   

  32. data.setValue(2, 1, 15);   

  33. data.setValue(2, 2, 16);   

  34. data.setValue(2, 3, 23);   

  35.   

  36. // Skapa ett diagram  

  37. // Titel, data, id för HTML-element [valfria: bredd, höjd]  

  38. var chart = new Chart('EL-förbrukning Q1', data, 'chart1');   

  39. chart.drawBar();   

  40. </script> 

  41. </body> 

Laddar diagram

Lätt som en plätt!

Låt nu säga att vi vill att något ska hända om man klickar på en stapel. Då kan vi helt enkelt skicka med en "callback-funktion" till drawBar():

15 rader JavaScript
  1. chart.drawBar(function(theChart) {  

  2. var sel = theChart.getSelection();  

  3. for (var i = 0; i < sel.length; i++) {  

  4. var item = sel[i];  

  5. var year = data.getColumnLabel(item.column);  

  6. var month = Chart.Months[data.getValue(item.row, 0)];  

  7. var message = year + "-" + month + "-01";  

  8.  

  9. if (item.row != null && item.column != null)  

  10. message += ' med värde: ' +  

  11. data.getFormattedValue(item.row, item.column);  

  12.  

  13. alert('Du klickade på: ' + message);  

  14. }  

  15. }); 

Laddar diagram...

Sen kan kan ju kanske göra mer spännande saker än att skicka upp en meddelanderuta. En tanke när det gäller förbrukningsdiagrammen är att ändra "upplösning" och visa dygnsförbrukning för vald månad (i de fall där eventuell dygnsförbrukning finn tillgänglig så klart).

Sist men inte minst tänkte jag visa hur man kan växla mellan stapel- och linjediagram. Nu kommer jQuery till användning:

22 rader HTML
  1. <a id="toggle-chart" href="javascript:void(0)">Visa som linjediagram</a> 

  2. <div id="chart3"> 

  3. <p>Laddar diagram</p> 

  4. </div> 

  5. <script type="text/javascript">   

  6. var chart = new Chart('EL-förbrukning första kvartalet', data, 'chart3');   

  7. chart.drawBar();   

  8.   

  9. $('#toggle-chart').click(function() {   

  10. if (this.state == undefined) this.state = 0;   

  11. if (!this.state) {   

  12. this.chart.drawLine();   

  13. $(this).text('Visa som stapeldiagram');   

  14. }   

  15. else {   

  16. this.chart.drawBar();   

  17. $(this).text('Visa som linjediagram');   

  18. }   

  19.   

  20. this.state = !this.state;   

  21. })[0].chart = chart;   

  22. </script> 

Visa som linjediagram

Laddar diagram

Sådär, detta var ett exempel på hur man kan använda Google Visualization API:et. Diagrammen blir snygga och fina - i alla fall i alla riktiga webbläsare som Firefox, Chrome, Safari och Opera - och är enkla att använda. Så behöver du visualisera data är Google Visualization ett hett tips.


Kommentarer Skriv en kommentar   Prenumerera

  1. Det finns inga kommentarer till denna artikel ännu.