Diagramme mit Ruby on Rails erstellen

Stell sicher, dass Ruby on Rails auf deinem System installiert ist. Für dieses Tutorial musst du außerdem die Gems Chartkick und Groupdate zu deinem Gemfile hinzufügen.

#Gemfile
gem 'chartkick'
gem 'groupdate'

Führe dann den Befehl bundle install aus, um die Gems zu installieren.

bundle install

Falls du noch kein Rails-Projekt hast, kannst du mit folgendem Befehl eines für Rails 7 anlegen:

rails new chart_app -d postgresql (Rails 7 uses Importmap by default)

Hinweis: Ersetze postgresql je nach bevorzugter Datenbank durch mysql oder sqlite3.

Chartkick mit Importmap konfigurieren

Füge in config/importmap.rb Folgendes hinzu:

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

Und füge in app/javascript/application.js Folgendes hinzu:

import "chartkick"
import "Chart.bundle"

Für esbuild, Webpacker oder andere JS-Bundler findest du alles Nötige in der Chartkick-Dokumentation.

Ein Diagramm mit Chartkick und Groupdate erstellen

Model und Daten vorbereiten:

Angenommen, du hast ein User-Model mit einem Zeitstempel created_at. Wir stellen die Anzahl der pro Tag angelegten Nutzer im Diagramm dar.

class UsersController < ApplicationController
  def index
    @users_by_day = User.group_by_day(:created_at).count
  end
end

User.group_by_day(:created_at).count erzeugt eine einfache SQL-Abfrage, die die Anzahl der pro Tag angelegten Nutzer zählt.

Die Index-View erstellen:

Verwende in deiner View den line_chart-Helper von Chartkick, um das Diagramm zu erstellen:

<!-- app/views/users/index.html.erb -->
<h1>Users Registered Over Time</h1>
<%= line_chart @users_by_day %>

Wenn du deinen Server mit rails s startest und deine Seite aufrufst, solltest du ein Liniendiagramm mit der Anzahl der täglich angelegten Nutzer sehen.

Diagramme verfeinern

Mit Chartkick kannst du Diagramme über verschiedene Optionen wie Farben, Meldungen und mehr anpassen. Hier ein Beispiel, wie du das vorherige Diagramm anpasst:

<%= line_chart @users_by_day, colors: ["#b00"], message: "Loading...", library: { backgroundColor: "transparent" } %>

Verschiedene Diagrammtypen erstellen

Chartkick unterstützt verschiedene Diagrammtypen. Unten findest du Beispiele für Diagramme, die du umsetzen kannst.

Kreisdiagramm

So erstellst du ein Kreisdiagramm, das die Verteilung der Nutzerrollen in deiner Anwendung zeigt:

Ruby:

@user_roles = User.group(:role).count

erb:

<%= pie_chart @user_roles %>

Säulendiagramm

So visualisierst du die Anzahl der Posts, die Nutzer pro Monat erstellt haben:

Ruby:

@posts_by_month = Post.group_by_month(:created_at).count

erb:

<%= column_chart @posts_by_month %>

Flächendiagramm

So erstellst du ein Flächendiagramm, das wie das Liniendiagramm aussieht, aber gefüllt ist:

erb:

<%= area_chart @users_by_day %>

Fazit

Mit Chartkick erstellst du in deinen Ruby-on-Rails-Anwendungen schnell und einfach dynamische Diagramme mit nur wenigen Zeilen Code. Wenn du diese Diagramme in deine Anwendung integrierst, bietest du Visualisierungen, die Erkenntnisse aus den Daten liefern und deinen Nutzern bessere Entscheidungen ermöglichen.

Diese Artikel könnten dir auch gefallen:

• So erstellst du eine Rails-Migration
• So machst du eine Rails-Migration rückgängig