Overslaan naar hoofdinhoud

Google Charts

Openen in ChatGPT
Shadow google-chart 23.06
Java API

De GoogleChart component integreert de Google Charts bibliotheek in webforJ, waardoor je toegang krijgt tot grafiektype zoals staaf-, lijn-, cirkel-, geo- en meer. Grafieken worden geconfigureerd met Java met een type, een dataset en een opties map die het uiterlijk en gedrag regelt.

Een grafiek maken​

Google Charts importeren

Om de GoogleChart klasse in je app te gebruiken, gebruik de volgende XML in je POM-bestand:

<dependency>
    <groupId>com.webforj</groupId>
    <artifactId>webforj-googlecharts</artifactId>
    <version>${webforj.version}</version>
</dependency>

Om een grafiek te maken, specificeer een grafiektype, configureer de visuele opties en geef de gegevens op die moeten worden weergegeven.

Dit voorbeeld maakt een geo-grafiek die de omzetgegevens over verschillende landen in kaart brengt, met aangepaste kleuren, positionering van de legenda en grootte van het grafiekgebied:

Toon Code

Grafiektypen​

De GoogleChart addon biedt een uitgebreide reeks grafiektypen om aan verschillende visualisatiebehoeften te voldoen. Het kiezen van het juiste grafiektype is essentieel om het verhaal van de gegevens effectief te communiceren. Zie de galerij hieronder voor voorbeelden van veelvoorkomende grafieken die in een webforJ-app kunnen worden gebruikt.

Toon Code

Opties​

De GoogleChart addon maakt uitgebreide aanpassing mogelijk via een verscheidenheid aan opties. Deze opties stellen je in staat om het uiterlijk en de functionaliteit van je grafieken af te stemmen op de behoeften van je app. Opties worden doorgegeven als een Map<String, Object> aan de setOptions() methode van de grafiek.

Hier is een voorbeeld voor het instellen van de opties van een grafiek:

Map<String, Object> options = new HashMap<>();
options.put("title", "Maandelijkse Omzet");
options.put("backgroundColor", "#EFEFEF");

// Pas de opties toe op de grafiek
chart.setOptions(options);

Voor meer informatie over de beschikbare opties voor specifieke grafieken, zie de Google Visualization API referentie (Grafiekgalerij).

Gegevens instellen​

Het visualiseren van gegevens met GoogleChart vereist een correcte structuur en instelling van de gegevens. Deze gids zal je helpen om je gegevens voor te bereiden en toe te passen op je grafieken.

Basisgegevensstructuur​

De meest eenvoudige manier om de gegevens te definiëren is door gebruik te maken van List<Object>, waarbij elke rij een lijst van waarden is.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Taak", "Uren per Dag"));
data.add(Arrays.asList("Werk", 11));
data.add(Arrays.asList("Eten", 2));
data.add(Arrays.asList("Reizen", 2));
data.add(Arrays.asList("TV Kijken", 2));
data.add(Arrays.asList("Slapen", 7));
chart.setData(data);

Kaarten gebruiken voor complexere structuren​

Voor complexere datastructuren kun je kaarten gebruiken om rijen weer te geven en ze vervolgens om te zetten naar het vereiste formaat.

List<Object> data = new ArrayList<>();

// Header rij
data.add(Arrays.asList("Land", "Omzet"));

// Gegevensrijen
Map<String, Object> row1 = Map.of("Land", "Duitsland", "Omzet", 1000);
Map<String, Object> row2 = Map.of("Land", "Verenigde Staten", "Omzet", 1170);
Map<String, Object> row3 = Map.of("Land", "Brazilië", "Omzet", 660);

data.add(new ArrayList<>(row1.values()));
data.add(new ArrayList<>(row2.values()));
data.add(new ArrayList<>(row3.values()));

chart.setData(data);

Zodra de gegevens zijn voorbereid, kunnen ze worden toegepast op de GoogleChart met behulp van de setData-methode.

Toon Code

Gegevens en opties laden vanuit JSON​

Je kunt ook gegevens en opties vanuit JSON-bestanden laden met behulp van Gson voor eenvoudigere beheer. Deze aanpak helpt je gegevens en opties georganiseerd en eenvoudig te updaten.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Jaar", "Verkopen", "Uitgaven"));
data.add(Arrays.asList("2013", 1000, 400));
data.add(Arrays.asList("2014", 1170, 460));
data.add(Arrays.asList("2015", 660, null)); 
data.add(Arrays.asList("2016", 1030, 540));
chart.setData(data);

Map<String, Object> options = new Gson().fromJson(
    Assets.contentOf("options.json"),
    new TypeToken<Map<String, Object>>() {}.getType()
);
chart.setOptions(options);

Grafiekvisuals bijwerken​

Het vernieuwen of bijwerken van het uiterlijk van je grafieken in reactie op gegevenswijzigingen, gebruikersinteracties of aanpassingen in visuele opties is eenvoudig met de redraw() methode. Deze methode zorgt ervoor dat je grafieken nauwkeurig blijven en visueel in lijn met de onderliggende gegevens of eventuele wijzigingen in hun instellingen.

Roep redraw() aan in situaties zoals:

  • Na Gegevenswijzigingen: Zorgt ervoor dat de grafiek eventuele updates aan de gegevensbron weerspiegelt.
  • Bij Verandering van Opties: Past nieuwe stijlen of configuratiewijzigingen toe op de grafiek.
  • Voor Responsieve Aanpassingen: Past de lay-out of grootte van de grafiek aan wanneer de afmetingen van de container veranderen, zodat een optimale weergave op verschillende apparaten verzekerd is.
Toon Code

Grafieken exporteren als afbeeldingen​

De getImageUri() methode biedt een manier om je Google Charts als base64-gecodeerde PNG-afbeeldingen te exporteren. Deze methode is bijzonder nuttig voor het delen van grafieken buiten de webomgeving, het insluiten ervan in e-mails of documenten, of gewoon voor archiveringsdoeleinden.

Roep getImageUri() op je grafiekinstantie aan nadat de grafiek volledig is gerenderd. Gewoonlijk wordt deze methode gebruikt binnen een "ready" evenementlistener om ervoor te zorgen dat de grafiek klaar is voor export:

chart.addReadyListener(e -> {
    String imageUri = chart.getImageUri();
    // Nu kun je de imageUri gebruiken, bijvoorbeeld als de src-attribuut van een img-tag
});

GoogleChartSelectedEvent​

De GoogleChartSelectedEvent wordt geactiveerd telkens wanneer een gebruiker een datapunt of segment in een Google Chart component selecteert. Dit evenement maakt interactie mogelijk met de geselecteerde grafiekgegevens en biedt details over wat is geselecteerd. Het evenement kan worden beluisterd door de addSelectedListener() methode op de GoogleChart instantie te gebruiken.

De GoogleChartSelectedEvent is nuttig in applicaties waar gebruikersinteractie met de grafiek nodig is.

GoogleChart chart = new GoogleChart(GoogleChart.Type.BAR);

// Voeg de geselecteerde listener toe aan de grafiek
chart.addSelectedListener(event -> {
    // Verkrijg de selectie
    List<Object> selection = chart.getSelection();
    
    // Verwerk het geselecteerde evenement
    if (!selection.isEmpty()) {
        System.out.println("Geselecteerde Rij: " + selection.get(0));
        // Verdere verwerking op basis van de rij/kolom van de selectie
    }
});

Payload​

De GoogleChartSelectedEvent biedt toegang tot de selectiegegevens, die kunnen worden opgehaald met de getSelection() methode op het grafiekobject. Deze methode retourneert een lijst van objecten, waarbij elk object de volgende eigenschappen bevat:

  • rij: De index van de rij in de gegevens tabel van de grafiek die is geselecteerd.
  • kolom: De index van de kolom in de gegevens tabel, wat optioneel is en van toepassing is op grafieken die de selectie van individuele cellen toestaan, zoals een tabelgrafiek.

Voor grafieken zoals cirkeldiagrammen of staafgrafieken wordt doorgaans alleen de rij verstrekt, wat het geselecteerde datapunt aangeeft.

Hier is een voorbeeld van payload:

[
  {
    "row": 3,  // De geselecteerde rij-index in de gegevens
    "column": 2  // (Optioneel) De geselecteerde kolom-index
  }
]
Meerdere Datapunten Selecteren

Als de gebruiker meerdere datapunten selecteert, retourneert de getSelection() methode een array van objecten, waarbij elk object een geselecteerd element vertegenwoordigt. De payload kan variëren op basis van het grafiektype en de interactie die de gebruiker uitvoert.