Statistiken mit Grafiken auf einer Webseite ausgeben?

[Wichtelherbert]

Guten Morgen zusammen,

ich möchte eine Webseite bauen, auf der ein paar Statistiken für ein Spiel was ich mit einem Freund spiele vergleichen werden sollen.
Die Daten dafür kommen von einer API.

Außer ein paar Tabellen und Grafiken würde ich dies gern auch visuell noch mit einer Animation darstellen. Zwei Menschen rennen und der eine bessere Statik hat läuft davor. Hoffe, ihr wisst, wie ich das meine.

HTML und CSS beherrsche ich ganz gut und weis das für die Verarbeitung und die Grafik auf der Seite noch eine zusätzliche Sprache genutzt werden muss. Sollte ich mich diesbezüglich mit Javascript beschäftigen oder kann ich dies auch mit Python erledigen.
Bei Python käme hinzu, dass ich dies vorhatte zu lernen, so könnte ich beide Fliegen mit einer Klappe schlagen.
Oder wird dies zu kompliziert und ich komme mit Javascript eher an mein Ziel.

Danke im Vorfeld für Eure Meinungen

 

[kim88]

Python wird serverseitig verarbeitet genau wie PHP, etc.

Damit kannst du Dinge berechnen aber nicht animieren.

Python oder PHP verarbeiten Code und generieren dann ein HTML File das vom Server an den Browser geschickt wird

Animationen müssen vom Browser verarbeitet werden und die macht man mit CSS.

Wenn du nun noch einen Mensch der rennt animieren willst, helfen stichworte wie SVG Animation, etc

 

[kachiri]

Hier bietet sich eigentlich Chart.js an:
https://www.chartjs.org/docs/latest/

 

[Der Lord]

https://www.chartjs.org/

damit kann man sich richtig tolle Statistiken basteln. Und wenn diese auch, noch wie du sagst, per API reinkommen, solltest du eine perfekte Grundlage haben.

wie kim88 schon richtig sagte: das ist letztendlich eine JS+CSS Geschichte. Im Browser hat Python nichts zu melden.

 

[netzgestaltung]

Hab früher sowas mit HiCharts.js gemacht, das ist aber glaube ich nicht frei verwendbar.

 

[Raijin]

+1 für ChartJS. Nutze ich auch gerade für eine firmeninterne Websoftware zur Auswertung. Es gibt zu ChartJS auch eine Reihe an interessanten Videotutorials auf https://www.chartjs3.com. Dort werden diverse individuelle Anwendungsfälle behandelt, die über die Standardbeispiele von chartjs.org hinausgehen. Mit der Dokumentation, den Samples und den besagten Tutorials kann man so ziemlich alle Anforderungen und Ideen abdecken.

 

[DerDummePunkt]

Python wird serverseitig verarbeitet genau wie PHP, etc.

Damit kannst du Dinge berechnen aber nicht animieren.

Python oder PHP verarbeiten Code und generieren dann ein HTML File das vom Server an den Browser geschickt wird

Animationen müssen vom Browser verarbeitet werden und die macht man mit CSS.

Wenn du nun noch einen Mensch der rennt animieren willst, helfen stichworte wie SVG Animation, etc

Sorry, aber dem muss ich ein bisschen widersprechen.

OP, es ist durchaus möglich, das Mittels Python "darzustellen"
Hierzu gibts z.B. Plotly
Zugegeben, da wird am Ende auch nur HTML mit Javascript draus, trotzdem, wenn OP nicht will, muss er kaum eine Zeile zu HTML, CSS oder JS schreiben.

Im Browser hat Python nichts zu melden.

Auch das ist nicht ganz richtig:
Seht euch mal Brython an. Auch hier, zugegeben, fraglich wie sinnvoll das ist, natürlich zumindest aktuell, weil dafür noch kein ernstzunehmendes Ökosystem existiert, keine echte Alternative zu JS, aber rein technisch gesehen...

Ich bin aber ganz bei euch, ich würde auch empfehlen, dass mittels Javascript zu lösen

Als Alternative zu dem oft genannten Chart JS möchte ich noch Highcharts anführen.
Ein ganzes Eck komplizierter als Chart JS, aber auch um einiges mächtiger.

 

[BeBur]

gern auch visuell noch mit einer Animation darstellen. Zwei Menschen rennen und der eine bessere Statik hat läuft davor.

Das wird verhältnismäßig aufwendig, verglichen mit ein paar normalen Statistiken. Als ersten Schritt würde ich dir raten, zu Unterscheiden "etwas weiter vorne" und "deutlich weiter vorne". Da musst du dir nur formelmäßig einig werden, was das jeweils in Zahlen bedeuten soll. Dann platzierst du deine beiden Animationen entsprechend.
Eine kontinuierliche Platzierung geht auch, ist auch nicht dramatisch, aber etwas mehr rechenarbeit und mit mehr Feintuning und Randfällen verbunden.

OP, es ist durchaus möglich, das Mittels Python "darzustellen"
Hierzu gibts z.B. Plotly
Zugegeben, da wird am Ende auch nur HTML mit Javascript draus, trotzdem, wenn OP nicht will, muss er kaum eine Zeile zu HTML, CSS oder JS schreiben.

So eine Abstraktionsschicht einzuführen, davon ist einem Anfänger schwer abzuraten. Solche Projekte gibt es für die meisten verbreiteten Sprachen und wird zum Teil sogar produktiv und professionell ernsthaft verwendet (siehe Java).

Ein ganzes Eck komplizierter als Chart JS, aber auch um einiges mächtiger.

D.h. davon (Highcharts) ist ebenfalls abzuraten oder hast du das Gefühl, der TE braucht eine besonders mächtige library?

 

[DerDummePunkt]

Wenn ein Tool bzw. ne Lib wie Plotly OP schneller ans Ziel führt und er sowieso Python lernen möchte, dann ist das für mich keine unnötige Abstraktionsschicht, sondern ne gangbare Alternative.

Nur weil etwas auch professionell verwendet wird, heißt das nicht automatisch, dass es für den Laien zu komplex ist
Gleiches gilt für Highcharts

Genau darum ging's mir in dem Post, Alternativen aufzeigen.
Wie gesagt, am Ende bin ich aber beim Konsens, Javascript mit ChartJS an die bestehenden APIs erscheint mir als das sinnvollste.

 

[Raijin]

Es ist müßig, jetzt schon zu sehr ins Detail zu gehen. @Wichtelherbert muss sich erstmal anschauen ob die Vorschläge generell in die richtige Richtung gehen. Bisher wissen wir ja nur, dass es ganz allgemein um Statistiken, Tabellen, Grafiken und Animationen geht. Ob damit explizit auch Graphen im Sinne von Linien-, Balken, Tortendiagrammen oder dergleichen gemeint sind, für die Chart-Bibliotheken wie ChartJS oder auch HighCharts (kostenpflichtig?) prädestiniert sind, ist zumindest mir nicht 100%ig klar. Somit erübrigt sich zunächst auch eine zu tiefgreifende Diskussion über die einzelnen Vorschläge.

 

[Wichtelherbert]

Eigentlich benötige ich keine großartigen Graphen oder Tortdiagramme.

Ich versuche es mal mit einem Beispiel, was ich mir gedacht hatte:
Frank hat 20 Punkte
Peter hat 100 Punkte

Beim Laden der Seite stehen beide Personen am Start.
Nach ca. 5 sek. sollen beide Personen losrennen und Frank nach 20% ca. stehen bleiben und Peter auch noch weiter laufen
Hoffe, dass ich es verständlich rübergebracht habe.

 

[netzgestaltung]

Dafür brauchst du eigentlich nur HTML und CSS - das geht mit dem Progress Element und dem Attributen "max" und "value".
Mit einem kleinem JS kannst du die Attribute verändern, mit CSS die Transition und das Layout steuern.

Zb ähnlich wie hier: https://stackoverflow.com/questions/11998913/animate-html5-progress-bar-with-javascript
Beispiel: https://jsfiddle.net/526hM/

 

[Raijin]

Das habe ich mir fast gedacht. In so einem Fall sind ChartJS und die meisten anderen Chart-Bibliotheken nur bedingt geeignet. Im Prinzip wäre das ja eher ein Progress Bar und kein Diagramm.

Man kann sowas zwar auch mit ChartJS basteln und zB einen Horizontal Bar Chart erstellen, bei dem man bei den Datenpunkten ein Image anzeigt. Die Animation käme aus ChartJS selbst, sich füllende Balken = rennende Images. Aber das ist dann doch ziemliches Gefrickel und man ist mit einem animierten Progress Bar besser bedient.

 

[netzgestaltung]

Hier hab ich einen schnellen Anfang gebaut: https://jsfiddle.net/4two0z7a/2/ - Läuft noch nicht ganz, fehlt aber nicht viel.

Fehler gefunden, ein Beistrich hat gefehlt: https://jsfiddle.net/4two0z7a/6/

<progress value="0" max="120" data-value="60"></progress>
<progress value="0" max="120" data-value="100"></progress>

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;
  height:30px;
  width:50%;
}
progress[value]::-webkit-progress-bar {
  background:#EEEEEE;
}
progress[value]::-moz-progress-bar,
progress[value]::-webkit-progress-bar-value {
  background:#530000;
}

var animate_progress = function(progress){
      // taken from https://stackoverflow.com/a/44588435
      var value = parseInt(progress.dataset.value),
          step = value*16/500,
          current =  progress.value || 0,
          animate = function(current){
            current += step;
            progress.value = current;

            current < value && requestAnimationFrame(function(){
              animate(current);
            });
          };

      animate(current);
    },
    progresses = document.querySelectorAll('progress');

// wrapper for delayed start
setTimeout(function(){
  progresses.forEach(function(progress){
    animate_progress(progress);
  });
}, 2000);

 

[Wichtelherbert]

Ich danke euch und werde mir das ganze mal anschauen.

 

[sandreas]

Für Charts gibts zumindest was, was ohne Programmiersprache auskommt :-)
https://chartscss.org/