DATA - Fusion Tables is een hele handige tool. Als je weet hoe het werkt tenminste. Ik gebruik het veel. Niet alleen om een (interactieve) kaart bij een verhaal te plaatsen, maar juist ook wanneer ik zelf data analyseer.
Tijd voor een tutorial die iets dieper op Fusion Tables in gaat (lees hier een eerdere, algemene tutorial).
De kaarten zijn altijd interactief. Als je op een datapunt (bij mij vaak polygonen) klikt, verschijnt er een pop-up venster. Daarin lees je de waarden van de andere kolommen van de tabel. Maar je kunt er ook een grafiekje in plaatsen, hoe leuk! En duidelijk!
Zo’n grafiekje in een pop-up maak je met behulp van een Google Chart, het ziet er zo uit: 
Maar zo ver zijn we nog niet. Ik begin bij het begin. 
1. Je kunt de inhoud van het pop-up venster aanpassen bij ‘configure info window’, direct boven de kaart in Fusion Tables. Hier kun je in het tabje ‘automatic’ aangeven welke kolommen je wil weergeven in het venster. Handig om te weten, maar wij moeten in het andere tabje zijn, ‘custom’. Hier zie je een stukje HTML-code, die moet je aanpassen om er een grafiekje in te krijgen.
2. Hoe dan? Ik ben toch geen programmeur? zul je denken. Wees gerust, ik ook niet. Ik kan wel een klein beetje code lezen. Ik weet hoe ik de pixels van een afbeelding groter moet maken en ik weet wat html-tags zijn en wat de meeste haakjes en tekentjes doen. Ik kan het niet zelf from scratch produceren, maar dat hoeft ook niet hiervoor. Er is namelijk een handige tool die de code voor je genereert: de ChartTool. (Google heeft ook een functionaliteit om grafieken te maken: Google Charts. Je hoeft hierbij de grafiek niet als plaatje te uploaden, maar hij bestaat uit een link, waarin de waarden staan. Dit gaan wij gebruiken voor in de pop-up. ChartTool helpt ons met het maken van deze link/code.)
3. In de ChartTool kies je allereerst een type grafiek, in dit geval koos ik een ‘vertical bar chart’. Er verschijnt een venster waarin je de staafgrafiek kunt maken. Let wel, je maakt nu één staafgrafiek, je vult handmatig de waarden in. Later, verander je de code zo, dat automatisch de waarden uit de kolommen van de Fusion Table worden gebruikt. Je geeft de grafiek een naam, zegt hoe groot het venstertje moet zijn en als derde maak je de variabelen. Voor elk staafje dat je wil weergeven (dus elke kolom uit je Fusion Table) maak je een nieuwe ‘data set’ (variabele) aan. Neem als voorbeeld één rij uit je Fusion Table en vul de waarden handmatig in. Onder ‘scale’ vul je de hoogste waarde die je weergeeft, of iets daarboven in (neem voor het gemak de hoogste waarde uit je hele Fusion Table, dan staat het goed voor de rest). Onder ‘legenda’ zet je neer waarvan we de waarde zien (in mijn geval, januari 2010 en december 2011). Deze dingen zijn het belangrijkst, je hebt nu een grafiek. Je kunt ook de rest van de opties in de ChartTool nog invullen, dat is aan jou.
4. Aan de rechterkant in ChartTool zie je als het goed is je grafiekje al:
Selecteer nu de link die staat onder ‘Paste HTML to embed in website’. Kopieer, en plak de code in Fusion Tables op de plek waar nu een andere code staat onder het kopje ‘custom’ (zie stap 1). Zo, nu staat er al een grafiekje in, je kunt dit even proberen door op opslaan te klikken en een willekeurig datapunt aan te klikken. Het grafiekje dat we net in de ChartTool hebben gemaakt staat nu in elk pop-upje dat je aanklikt.
5. Dat is al leuk, maar we willen natuurlijk dat de waarden die bij de kolommen horen er in komen te staan. Daarvoor moeten we zelf een beetje met de code gaan prutsen. De code die ik uiteindelijk heb gebruikt ziet er zo uit:
Je ziet dat er een aantal dingen tussen { } haakjes staan. Tussen die haken staan mijn kolomtitels uit Fusion Tables. Dit betekent dat voor dat datapunt de waarden onder die kolom opgezocht worden. Bij mij is dat {Januari 2010 werkzoekenden} en {December 2011 werkzoekenden}. Dit heb ik in plaats van de waarden die ik eerder in ChartTool handmatig invulde neergezet. In de titel wilde ik niet alleen ‘werkzoekenden’ hebben staan, wat ik in de ChartTool in had gevuld, maar ook welke postcode dat dan is, daarom heb ik ook {postcode} erbij gezet.
6. Et voila! Je kunt verder nog een beetje met de hoogte en breedte spelen als je wil, maar in principe is dit voldoende. Klik op ‘save’ en als je nu de datapunten in je kaart aanklikt komt er in het pop-upje een grafiek te staan met de corresponderende waarden uit de kolommen van je Fusion Table.
Reacties (1)
* aan het pielen slaat *