Datavisualisering med CSS-diagram, diagram och mer

En bra datapresentation är en viktig aspekt i webbbranschen eftersom det är nyckeln att låta besökarna förstå ditt innehåll inom några sekunder. Ju lättare eller snabbare dina besökare får tag i ditt webbinnehåll, desto högre reflekterar du din professionalism när du hanterar presentationen. Kriterier för en anständig datapresentation ska vara enkla men beskrivande, väl utvecklade men klarar av att behålla användarens intresse, inte svettas för att smälta innehållet, bekvämt att jämföra och till sist bör användaren kunna fatta beslut eller slutföra de data som presenteras utan problem. Så svårt som dessa galen kriterier kan låta är det möjligt.

I dagens inlägg vill vi ta dig för en tur för olika tillvägagångssätt för vackra och kreativa datavisningsverktyg som är helt baserade på CSS / HTML. Ja bara kopiera och klistra sedan anpassa det efter dina önskemål. Dessa diagram kan vara CSS-stapeldiagram som visar data i horisontell / vertikal form, rullgardinslista för att organisera data eller till och med linjediagram och cirkeldiagram!

Du vill ha mer? Fortsätt skrolla!

Horisontell Barchart

Ett enkelt sätt att visa den statistiska siffran som en översikt med detta tillgängliga stapeldiagram med hjälp av CSS. Fältet beräknar värdesceller och etiketter som används. Tabellrubrikerna används med hjälp av ljudkurs

CSSplay

Stångdiagram är en slutgiltig lista med stilar och klasser definierade i varje rad. Det första diagrammet har ett fel som uppstår när värdena närmar sig 100% som korrigeras i det andra diagrammet. Källkod ingår för din referens.

Procentandel Bargraph

Med hjälp av procentuell breddförmåga hos CSS skapas ett procentbaserat stapeldiagram i denna handledning. I ett horisontellt stapeldiagram kan du antingen ställa in en markör för att röra längden från vänster till höger eller skapa ett vertikalt diagram med samma teknik och reproducera den flera gånger

Maxdesign

Russ Weakley lär dig att skapa ett diagram baserat på procent och använda bakgrundsbilder. Kod och bilder kopplade kan kopieras och laddas ned för att användas i ditt projekt.

Vertikal barchart

Skapa vertikala stapeldiagram med CSS och PHP genom att skapa en enkel lista med höjd i pixlar av enskild stapel, y-axel i stapelgruppen och klass för att ställa in datasætten. Eric Meyer lär dig att göra detsamma i ett stapeldiagram, linjediagram, spetsdiagram och ett 3D-diagram med samma tekniker

Ren CSS Linegraph

Linjediagram levererar information mycket snabbare än tabeller med siffror. Lär dig att skapa en linjediagram med CSS med hjälp av HTML, ersätt texten med bilder och använd CSS sprites och absolut positionering för att få en linjediagram.

Enkel Linegraph

En mycket enkel linjediagram som endast använder DHTML och CSS och där du kan ställa in en transparent bakgrund för grafen. Denna graf laddar snabbare och blandar med resten av sidan.

Mgraph

Denna Ajax-graf används för att representera data om ett år enligt varje månad med bara CSS och XHTML och körs i Firefox och Opera

Flerfärgslistor

Paul Novitski lär dig att skapa en lista med flera kolumner med hjälp av CSS i den här artikeln. Han diskuterar en hel del tekniker för att uppnå listor med flera kolumner som att flyta delningslistorna, numrera dem med HTML-attribut, CSS-genererat innehåll, inpakning av listan med XHTML, CSS etc och lägger till slut en liten styling och bakgrundsbild för att uppnå multikolonnen lista perfekt.

Bulletgraph

En punktdiagram jämför en enda åtgärd med en eller flera andra åtgärder och visar det kvalitativa utbudet av prestanda. De är ganska flexibla för datadrivna webbplatser. Lär dig att skapa en punktdiagram med hjälp av CSS / HTML.

Kolumn bargraph

En kolumnstångsdiagram skapas med hjälp av CSS där värdena visas i färgade vertikala staplar som når olika höjder enligt de angivna värdena. Denna graf ger oss snabbt en klar uppfattning eftersom värdena skrivs direkt här. Använda CSS-selektorer, sprites, styling av listor etc, lär dig att skapa en kolumndiagram från handledning.

Nedtidsgrafik

Nedtidsgrafen hade ursprungligen ett problem som visade långa tidsintervaller på det begränsade skärmområdet och håller en transparent layout av händelser som klargjordes av det månatliga kalenderparadigmet. OnMouseOver () hålls igång och olika färger används för olika typer av downtime-händelser.

Dynamisk levande CSS-graf

En live dynamisk CSS-graf för att visa svarstid för ping som utförs av en webbserver läser data från en webbserver med CSS och JavaScript-kod, AJAX-funktioner och grafglidning.

Horisontell bargraph

Ett stapeldiagram behöver inte alltid vara bevertiskt. En horisontell stapeldiagram kan också skapas. I denna artikel skapas ett horisontellt stapeldiagram med olika färgvariationer med hjälp av en klass "horisontell graf" och specificerar graden av graden från markeringen med hjälp av CSS.

Multigraph

En linjediagram som inte använder några tabeller med bilder skapas med CSS och DHTML som laddas snabbare och bakgrunden kan ändras så transparent.

Produktionsplan graf

En produktionsplangraf skapas med hjälp av grafklassen som grafbehållare och hLine också vLine för separatorlinjedragning. Denna graf används i intranät applikationer. Graden av grafen beräknas enligt det visade antalet dagar och höjd med antalet jobbändringar.

Sandwich graf

En sandwichgrav skapas när en enda stapel i ett stapeldiagram är uppdelad i flera lager där höjden på en enda kolumn kan indikera en global trend medan höjden på ett enda lager indikerar en del av detta lager. Skapa en CSS-sandwichgrav från den här handledningen.

Staplad bargraph

För en staplad graf används en definitionslista för att presentera data, då marginerna och vadderingen återställs för att visas samma i alla webbläsare. Axlar läggs till och stiliseras för att få staplade staplar. Varje detalj beskrivs exakt i denna handledning.

Enkel bargraph

Ett stapeldiagram skapat med hjälp av CSS och PHP sans grafikbibliotek och utan stora beräkningar som används för marginaler. Padding gör det ganska lätt att förstå tekniken som bara används