In dit project wordt veel met data gewerkt.
In deze reeks leer je hoe data in een donut-chart kunt plaatsen die je zelf helemaal van scratch hebt opgebouwd.
stroke-dasharraysetInterval()Een donutchart is een manier om groottes van en waarde weer te geven. Je ziet de rand van een cirkel groeien naarmate de waarde in het midden toeneemt.
Het gat in de donut blijkt transparant te zijn.
De oplossing is met SVG's gedaan inclusief de tekst in het midden. Dat maakt het mogelijk de chart flexibel in te zetten: hij past zijn grootte gemakkelijk aan, ook die van de tekst in het midden, die selecteerbaar is.
Een donut chart laat door een boogsegment zien hoe groot een waarde is.
Daarvoor zijn cirkels met SVG een goede oplossing: ze schalen goed en lijnen (stroke) in SVG kunnen met stippellijnen een boog beschrijven. Met het attribuut stroke-dasharray kun je de lengte van een streepje in de stippellijn aangeven, maar met een tweede waarde ook de tussenruimte tussen twee streepjes.
De strategie is er dan om twee cirkels weer te geven boven op elkaar. De onderste is compleet rond en de bovenste wordt, het streepje van de stippellijn zo lang dat je de gewenste boog krijgt.
De slimmigheid is hier ook dat je de omtrek van de cirkel op 100 stelt en deze verdeelt in een deel streep en een deel tussenruimte.
In SVG beschrijf je de cirkel door met cx en cy het middelpunt neer te zetten en met r de straal van de cirkel.
Deze straal is voor een omtrek van 100 dus 100 gedeeld door 2 keer π en dat is 15.91549430918954. De fill is de vulkleur, en die maken we transparant. De stroke heeft natuurlijk een kleur maar ook een dikte, die je als attribuut meegeeft.
Het attribuut stroke-dashoffset is 75 en die bepaalt hoever het begin van de streep wordt verplaatst. Dat is driekwart van 100, zodat de boog onderin begint en linksom draait.
Een donutchart laat de waarde in het midden zien.
daarvoor maken we de tekst met het text-element in de svg. Die kun je dan op een plek in het midden plaatsen door gebruik te maken van attributen x en y.
We hebben een tekst voor de waarde en een voor de eenheid.
We plaatsen binnen een groeperingselement g.
Het graden symbool ° voor de temperatuur maak je met de HTML-entiteit °
Met css kun je dan tekstgrootte en lettertype instellen. De tekstkleur met de css-eigenschap bij svg: fill.
Het voordeel van deze aanpak is dat het geheel mooi mee-schaalt als je de grootte van het geheel wijzigt.
De temperatuur is nu hard-coded in de SVG en de grootte van de boog eveneens.
We maken een script met de temperatuur als variabele en een functie uitvoeren(), die deze
temperatuur weergeeft en de booglengte aanpast. Die functie krijgt een parameter voor de temperatuur.
De tekstuitvoer van de temperatuur gaat eenvoudig door het SVG-element met zijn id in een DOM-variabele te stoppen en met de eigenschap die inhoud van de temperatuur in te vullen.
Voor de lengte van de boog nemen we een maximum-temperatuur van bijvoorbeeld 25 graden. Als dat het maximum is dan is de cirkel vol. We delen dus de temperatuur door het maximum en vermenigvuldigen dat met 100. Dat doen we natuurlijk in een variabele.
Als de cirkel ook een DOM variabele is dan kun je in de functie deze ook stijlen met .style.dashArray. De waarde daarvan kan als string-literal worden weggeschreven met twee waarden met een spatie (komma zou ook wel mogen) ertussen. De eerste waarde is de lengte van boog de tweede is dan 100 - die lengte van de boog.
De gemaakt functie kun je dan aanroepen met de temperatuur.
Check of de wijziging van de temperatuurvariabele ook het verwachte resultaat geeft.
Die variabele in de vorige video is natuurlijk niet voor niets gemaakt.
Je kunt nu eenvoudig een slider maken, die deze variabele wijzigt.
We maken een slider, die van het geheel een thermostaat maakt.
De slider is een input-element met het type range. De andere attributen zijn:
min (met hier de waarde 1),max (met de waarde 30 en dus ook de uitvoer hierop aanpassen),step (het aantal tussenstappen die we bij hele graden op 1 zetten),id (voor het script) envalue (voor een beginwaarde die we hier op 18 zetten).Om deze slider in het script te laten werken, geven we het DOM-element een .addEventListener. Het eerste argument is bij sliders change, die reageert dan op elke verandering, en het tweede argument een functie, die de uitvoeren-functie aanroept met de waarde van de slider als argument.
Met setInterval() wordt de chart geanimeerd door JavaScript.
De werkwijze met setInterval() is niet zo voor zware animaties geschikt, omdat het dan teveel van de verwerking van het JavaScript, maar omdat dit kleine zijn, is het wel goed in te zetten hier.
Met setInterval() voeren we de temperatuur voor elke graad vanaf 0 uit en verhogen die temperatuur vervolgens met 1 graad en dat herhaalt het script dan na een heel kort momentje (dat je zelf instelt) tot de beoogde temperatuur is bereikt. Is dat bereikt, dan stop je met clearInterval() het proces.