amCharts gegevens uit CSV bestand laden


amcharts logocsv grafiek icon

Er staat een mooie handleiding bij amcharts op de website voor het uitlezen van de gefiekgegevens uit een CSV bestand, hier is mijn versie en ervaring:

Wat heb je nodig?:

1) amCharts

Ik heb het bestand “samples\_JSON_lineWithScrollAndZoom.html” uit de bibliotheek genomen als voorbeeld voor het uitlezen uit een CSV bestand.

Standaard ziet het bestand er zo uit:

De grafiek wordt standaard gevuld met willekeurige data en ziet er zo uit:

amcharts line with scroll and zoom standaard

Hoe werkt het?

Boven in het script zie je staan  generateChartData();  dit roept een functie aan dat iets verder onder in het bestand staat:

De gegevens worden stuk voor stuk ingeladen met  chartData.push :

chartData.push({date: newDate, visits: visits});

Gegevens uit CSV bestand laden

Hieronder een voorbeeld om een CSV bestand met 2 kolommen in een grafiek te laden, een DATUM en een GETAL

1) We beginnen met het instellen van CHART datum instelling, dat doe je met  chart.dataDateFormat = "YYYY-MM-DD"; , zet deze onder de andere variabelen die de grafiek instellen.

2) Verwijderen van de standaard chartdata gegevens:

Verwijder deze regel:  generateChartData();  en verwijder de gehele functie  generateChartData()

3) Daarna voegen we een functie toe om een CSV bestand te laden in Java:

4) Hier onderin wordt de functie parseCSV() aangeroepen, deze is als volgt:

4) De standaard grafiekwaarden (values) zijn:

categoryField: "date", verander deze in  categoryField: "datum",

valueField: "visits",  varander deze in  valueField: "waarde",

5) Maak een CSV bestand aan genaamd “data.csv” met de inhoud:

6) Je kan nu het CSV bestand inladen met  loadCSV("data.csv");

Het resultaat zal er zo uit zien:

amcharts line with scroll and zoom data

Opschonen grafiek

De optie Select of Pan voor je muisfuncties kan in principe weggelaten worden, dit is een demo functie om te laten zien wat mogelijk is.

1) De functie setPanSelect() kan in zijn geheel verwijderdt worden.

2) Het DIV blok met de opties kan ook verwijderdt worden:

Aanpassen grafiek

Standaard is de grafiek een beetje kaal, je kan deze naar wens aanpassen:

1) De titel van de webpagina aanpassen:  <title>amCharts examples</title>

2) Titel X-as is in te stellen met  title: "Datum" onder het kopje  categoryAxis:

3) Titel Y-as is in te stellen met  title: "Waarde", onder het kopje  valueAxes:

4) Om de grafiektitel te laten zien moet je een stukje configuratie toevoegen aan de instellingen:

5) De tekst in het ballonnetje bij het selecteren van een knooppunt kun je wijzigen door deze regel aan te passen:

balloonText: "[[category]]<br><b><span style='font-size:14px;'>Waarde: [[value]]</span></b>"

Het resultaat:

amcharts line with scroll and zoom data schoon

De code voor het uitlezen van een CSV bestand met amCharts is nu als volgt:

Grootte aanpassen

De hoogte en breedte van de grafiek zijn aan te passen door deze regel te wijzigen:

<div id="chartdiv" style="width: 100%; height: 500px;"></div>