Datavisualisatie is een essentieel onderdeel geworden van zakelijke en bedrijfsgerelateerde activiteiten. Of het nu gaat om grafieken, infographics, kaarten of dashboards, ze presenteren allemaal informatie op een makkelijk leesbare manier. Een voordeel van moderne technieken voor het maken van grafieken is dat u er geen speciale vaardigheden of kennis voor nodig hebt. Sterker nog, deze vaardigheid is niet voorbehouden aan ontwikkelaars, ontwerpers of programmeurs. U kunt zelfs Java script charts door de basis van Java en HTML5 te kennen.
Bibliotheken voor het maken van grafieken voor JavaScript
Het eerste wat je nodig hebt om JavaScript-grafieken te maken, is een grafiekbibliotheek. Deze bibliotheek bevat allerlei ontwerpen en protocollen voor het maken en extraheren van grafieken voor datavisualisatie. Sommige zijn gratis, zoals D3 en Google Charts. Je kunt ze voor meerdere doeleinden gebruiken, maar ze variëren van basic tot semi-geavanceerd. Voor de echt goede functies zul je echter moeten betalen. AnyChart, Highcharts en amCharts behoren tot de meest uitgebreide opties die er zijn.
In dit blog richten we ons op AnyChart. Met AnyChart kun je gegevens uitgebreid documenteren en visualiseren. Het beschikt ook over een uitgebreide API-referentie en ondersteunt verschillende grafiektypen en demo's in de code-speeltuin. Daarom is het een geschikte optie voor beginners.
Hoe maakt u JavaScript-grafieken
Bij het maken van grafieken kun je met JavaScript waarden invoeren en gegevens voorbereiden zoals je wilt. Je kunt elke gewenste variabele kiezen en eenvoudige code schrijven om deze in een basisgrafiek te visualiseren. Dit kan een lijngrafiek of een staafdiagram zijn en omvat drie stappen:
Gegevens voorbereiden voor een JS-diagram
Eenvoudige gegevens zijn de beste aanpak. Als u grote hoeveelheden gegevens verwerkt, moet u deze vereenvoudigen. Gegevensvoorbereiding is dus noodzakelijk. Met andere woorden, u moet de meeste populaire grafiektypen aanmaken. Dit omvat de X-as en vervolgens de Y-as. Staafdiagrammen zijn echter nog eenvoudiger, aangezien u meestal alleen de Y-as en een index of itemnummer nodig heeft. Bij gebruik van JavaScript met een array van gegevens krijgt u zoiets als dit:
// 5 datapunten = 5 categorieën voor één reeks
var data = [19, 24, 30, 34, 42];
// Y zijn deze waarden; X zijn de itemnummers [0,1,2,3,4,5]
Als u echter JSON/XML gebruikt om de gegevens over te dragen, moeten de gegevens er als volgt uitzien:
[{
'x': 'Product A',
'value': 19
},{
'x': 'Product B',
'value': 24
}...]
er zijn veel manieren om met datavisualisatiesoftware te werken, die ontwikkelaars vele malen in documentaties beschrijven. Bent u dus nieuwsgierig, dan kunt u beter de relevante secties van de documenten van de grafiekbibliotheek doornemen.
U zou ook Image Charts kunnen gebruiken en uw grafieken vrij eenvoudig zonder gedoe laten maken.
Een charting-bibliotheek verkrijgen
Het is essentieel om de juiste bibliotheek te kiezen. Als je diagrammen lokaal gebruikt, kun je het binaire pakket van het diagram downloaden. Wil je echter grafieken maken voor webapps of een website, kies dan voor een CDN. Image Charts biedt tal van functies, zoals het ophalen van bestanden vanaf de server die het dichtst bij de client staat. Dit resulteert uiteindelijk in een snellere laadtijd en betere prestaties voor de pagina.
De code ziet er ongeveer zo uit:
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
Een HTML/JavaScript-code schrijven
Het laatste deel van het proces van grafiek maken is het schrijven van eenvoudige HTML- of JavaScript-code.
Zodra de gegevensbibliotheek klaar is, kun je beginnen met het schrijven van de code om de grafiek te tekenen.
- Eerst moet u een grafiekcontainer op de pagina zelf aanmaken. Het beste is om een <div>-element te gebruiken en het ID in te stellen. Zo ziet de code eruit:
<div id="container"></div>
- Voeg vervolgens de volgende gegevens toe:
var data = [
{x: 'Dvd-speler', y: 19},
{x: 'Thuisbioscoopsysteem', y: 24},
{x: 'Karaokespeler', y: 30},
{x: 'Projector', y: 34},
{x: 'Tv-ontvanger', y: 42}
];
- Volgende stap: je moet het type diagram opgeven dat je wilt maken. Dit kunnen verschillende types zijn, zoals een lijndiagram, een staafdiagram, een cirkeldiagram, enz. De code moet de constructorfunctie bevatten:
var chart = anychart.bar();
- U moet er ook voor zorgen dat de grafiek duidelijk is voor de kijkers. Wat heeft het immers voor zin als u de grafiek niet makkelijk leesbaar maakt. Dat is nu juist het hele doel van de visualisatie. U zult hem dus moeten labelen en aangeven welke waarden welke hoeveelheid vertegenwoordigen. Begin met de grafiek een titel te geven:
chart.title('Product Sales');
- Maak vervolgens een reeks aan zodat u de waarden van uw hoeveelheden kunt invoeren en labelen. De code ziet er dan zo uit:
chart.addSeries(data);
// of we kunnen een eenvoudige dataset binnen de methode opgeven:
chart.addSeries([19, 24, 30, 34, 42]);
- De grafiek moet in een container worden geplaatst, zodat degene die we maken duidelijk wordt aangeduid. De code ziet er dan als volgt uit:
chart.container('container');
- Zo, dat is gebeurd. Je kunt nu het diagram tekenen. Voeg deze code in: 'chart.draw();'
- het resultaat ziet er ongeveer uit als een horizontaal staafdiagram waarbij verschillende waarden worden weergegeven door lange en korte balken.
De volledige code van de reeks ziet er als volgt uit:
<html>
<head>
<script
src="//cdn.anychart.com/js/latest/anychart.min.js"
type="text/javascript"
></script>
<script>
anychart.onDocumentLoad(function() {
var data = [
{ x: "Dvd-speler", y: 19 },
{ x: "Thuisbioscoopsysteem", y: 24 },
{ x: "Karaokespeler", y: 30 },
{ x: "Projector", y: 34 },
{ x: "Tv-ontvanger", y: 42 }
];
var chart = anychart.bar();
chart.title("Product Sales");
chart.addSeries(data);
chart.container("container");
chart.draw();
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
