From dc790f554d928d76405496b7fdbf8d1e480a0853 Mon Sep 17 00:00:00 2001
From: Millicool <milena.j.schneeberger@gmail.com>
Date: Thu, 5 Feb 2026 16:23:45 +0100
Subject: [PATCH] Use plotly for better graphs

---
 global.R |  1 +
 server.R | 17 +++++++++--------
 ui.R     |  4 ++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/global.R b/global.R
index cc08164..43ec4a2 100644
--- a/global.R
+++ b/global.R
@@ -9,6 +9,7 @@ library(purrr)
 library(ggplot2)
 library(ggthemes)
 library(stringr)
+library(plotly)
 # Json of Crime Reports
 crime_json <- fromJSON(file="data.json")
 get_bezirk_by_stadtteil <- function(name) {
diff --git a/server.R b/server.R
index 1dd6c48..0273bbd 100644
--- a/server.R
+++ b/server.R
@@ -216,14 +216,14 @@ server <- function(input, output, session) {
     )
     
   })
-  output$grph_top3 <- renderPlot({
+  output$grph_top3 <- renderPlotly({
     data_tibble <- map_data_to_top3_plot(
       bezirk = currently_selected_bezirk(),
       stadtteil = currently_selected_stadtteil(),
       year = "2024"
     )
     req(nrow(data_tibble) > 0)
-    ggplot(data_tibble, aes(x = reorder(Name, -Erfasst), y = Erfasst, fill = Name)) +
+    ggplotly(ggplot(data_tibble, aes(x = reorder(Name, -Erfasst), y = Erfasst, fill = Name)) +
       geom_col(width = 0.7) +
       scale_x_discrete(
         labels = function(x) str_wrap(x, width = 15)) +
@@ -279,8 +279,8 @@ server <- function(input, output, session) {
           margin = margin(r = 15) # r = right (rechts) in Pixeln
         ),
       )
-    
-  }, res = 100)
+    )
+  })
   
   observeEvent(input$vergleich_location, {
     currently_compared_location(c(input$vergleich_location))
@@ -289,14 +289,14 @@ server <- function(input, output, session) {
     currently_compared_crimes(input$vergleich_straftat)
   })
   
-  output$vergleich_balkendiagramm <- renderPlot({
+  output$vergleich_balkendiagramm <- renderPlotly({
     data_tibble <- map_data_to_plot(
       locations = currently_compared_location(),
       crimes = currently_compared_crimes(),
       year = currently_compared_year()
     )
 
-    ggplot(data_tibble, aes(x = Erfasst, y = reorder(Location, Erfasst, FUN = sum), group = Name, fill = Name)) + #reorder macht die höchsten Werte nach oben, und sortiert nach Gesamtwert
+    ggplotly(ggplot(data_tibble, aes(x = Erfasst, y = reorder(Location, Erfasst, FUN = sum), group = Name, fill = Name)) + #reorder macht die höchsten Werte nach oben, und sortiert nach Gesamtwert
       geom_col(position = position_dodge(width = 0.9)) +
       scale_fill_brewer(palette = "Blues") +
       geom_text(
@@ -352,7 +352,8 @@ server <- function(input, output, session) {
           # Fügen Sie hier einen Abstand nach RECHTS hinzu
           margin = margin(r = 15) # r = right (rechts) in Pixeln
         )
-      )  
-  }, res = 100)
+      ) 
+    )
+  })
   
 }
\ No newline at end of file
diff --git a/ui.R b/ui.R
index 63f429c..fd01999 100644
--- a/ui.R
+++ b/ui.R
@@ -227,7 +227,7 @@ ui <- function() {
                 uiOutput("txt_map_selection_bezirk"),
                 uiOutput("txt_map_selection_stadtteil"),
               ),
-              plotOutput("grph_top3"),
+              plotlyOutput("grph_top3", width = "484px", height = "667px"),
             ),
             col_widths = breakpoints(
               sm = c(12, 12), # Auf kleinen Bildschirmen: untereinander (100% Breite)
@@ -305,7 +305,7 @@ ui <- function() {
           ),  
           card(
             card_header(uiOutput("vergleichs_titel")), # Dynamischer Titel
-            plotOutput("vergleich_balkendiagramm")
+            plotlyOutput("vergleich_balkendiagramm")
           )
         )
       ),