# Graph zeichnen HTML5 oder Jquery? Mysql-Daten in Javascript



## moritzmoritzz (28. Mai 2012)

Hallo *Community,*

mein erster Beitrag und gleich eine Frage. Naja, dazu ist dieses Forum doch hoffentlich da !

Also, ich habe 2 Fragen:

*Wie zeichne ich am besten Graphen?*
Beispiel: http://www.highcharts.com/demo/spline-plot-bands - dort findet ihr viele Beispiele. 

Ich weiß, dass ist ein fertiges System was auch funktioniert, doch bringt es mir wenig etwas fertiges zu nehmen, wenn ich dabei bin mein eigenes Backendsystem zu schreiben. Es sollen Statistiken zu der Seite angezeigt werden.

Also HTML5 oder JQuery oder was ganz anderes? 

*Wie bekomme ich Mysql-Daten in ein JS-Array?*

An dieser Frage grübel ich schon seit einiger Zeit, aber irgendwie habe ich keine Idee. Ajax? Oder was ist da besser? Eignet sich ein Array überhaupt um Graphen zu zeichnen? 

Vielleicht kann mir ja jemand helfen 

moritzz


----------



## sheel (28. Mai 2012)

Hi und Willkommen bei tutorials.de,

a) willst du dein Backendsystem verkaufen?
Wenn nein: Was spricht dagegen, fertige Teile zu verwenden?

b) Sollen die Daten während dem Seitenanzeigen nachgeladen werden?
Ja: Ajax
Nein: Ganz normales PHP-echo


----------



## Lime (28. Mai 2012)

Also ich kann dir zumindest eine Frage beantworten. Wie bekommst du Mysql-Daten in ein JS-Array:
Da du - denk ich - mit PHP arbeitest und die Seite ja praktisch erzeugst, kannst du auch den JS-Code (oder einen Teil davon) erzeugen.


```
echo 'var arrayname = new Array("value1","value2","value3");';
```

Daraus kann man sicher eine schöne Schleife produzieren. 
Ich denke ein Array eignet sich schon, du musst dir nur überlegen wie du es aufteilst. Den Key des Arrays array[0], array[1], array[2], ... würde ich als x-Achsen-Beschriftung nehmen. Entsprechend dann die y-Achsen-Beschriftung als Wert. Wenn du mehrere Funktionen in einem Graph hast, dann musst du dort noch einen zusätzlichen Array einbauen.

lg


----------



## moritzmoritzz (28. Mai 2012)

Danke euch beiden für die rasche und präzise Antwort.



> a) willst du dein Backendsystem verkaufen?


*Ja*, das will ich weil ich mich im kommenden Jahr selbstständig melden werde und dieses System meinen Kunden anbieten werde. Es wird zur Datenverarbeitung benutzt. Als besondere Features will ich eben Statistiken etc. einbauen.



> Sollen die Daten während dem Seitenanzeigen nachgeladen werden?


*Nein* - es reicht vollkommen aus, wenn die Daten bei der Euzeugung aufgerufen werden.



> Also ich kann dir zumindest eine Frage beantworten. Wie bekommst du Mysql-Daten in ein JS-Array:
> Da du - denk ich - mit PHP arbeitest und die Seite ja praktisch erzeugst, kannst du auch den JS-Code (oder einen Teil davon) erzeugen.
> 
> 
> ...


Ich habe die Funktionen in einer externen JS-Datei. Sieht das nicht ein bisschen "falsch" aus, wenn ich sowas in meinem Quelltext stehen habe? Gibt es keine elegantere Lösung? 
Mit dieser Möglichkeit kann ich aber das array "arraynam" an die Funktion übergeben, das wäre doch so kein Problem oder?

Moritz


----------



## Lime (28. Mai 2012)

Deswegen hab ich ja geschrieben "(oder einen Teil davon)". Du kannst durchaus nur die JS-Variable von PHP erzeugen lassen und deinen JS-Code woanders ablegen bzw. includen.


----------



## moritzmoritzz (28. Mai 2012)

okay. Danke dir :> jetzt fehlt noch der Graph.
Mache ich das mit JQuery Html5 oder gibts da ne bessere Alternative?


----------



## Lime (28. Mai 2012)

Ich hab zwar keine Ahnung davon, ich habs selber auch noch nie gemacht bzw. gebraucht, aber ich würde mal sagen, du wirst beides brauchen. Nur HTML5 wird nicht reichen.

Was ich eben gefunden habe, wäre folgendes: http://www.worldwidewhat.net/2011/06/draw-a-line-graph-using-html5-canvas/

Hier werden JS und HTML5 kombiniert. Sieht eigentlich nicht wirklich schwer aus, man kann denk ich auch mehrere Funktionen in einen Graph schreiben, wenn das notwendig ist. (So könnte man z.B. Jahre - unterteilt in Monate - vergleichen, ...)

gruß


----------



## moritzmoritzz (28. Mai 2012)

okay. vielen Dank :> 

dann schaue ich mir das doch gleich mal an!


----------



## moritzmoritzz (28. Mai 2012)

*Entschuldigt meinen Doppelpost.*

Ich bin jetzt soweit, dass ich in Canvas eine vertikale und eine horizontale Linie habe. Das Grundgerüst also, nur scheint mir die Linie verbugt zu sein :/ das sieht nicht nach einem *schwarzen* Strich aus, sondern nach einem braunen-grauen. Warum ist das so? Gibt es da nen trick? Wenn ich den Strich "2" breit mache sieht es wunderbar schwarz aus. Kann ich den "2" breiten Streich in der Mitte durchschneiden oder geht das nicht?

Gruß,

Moritz


----------



## Lime (28. Mai 2012)

Wenn du uns den Code zeigst, können wir dir eher helfen.


----------



## CPoly (28. Mai 2012)

Ich kann Google Charts sehr empfehlen https://developers.google.com/chart/

Weitere Möglichkeit die mir einfällt http://g.raphaeljs.com/


----------



## moritzmoritzz (28. Mai 2012)

Lime hat gesagt.:


> Wenn du uns den Code zeigst, können wir dir eher helfen.



Na klar:

```
var canvas = document.getElementById(d); // D ist die übergebene Id des Canvas
graph = canvas.getContext('2d');

graph.beginPath();    // Hier beginne ich mit dem Zeichnen von dem Achsen
graph.moveTo(5,(h-(h-5)));
graph.lineTo(5,(h-5));
graph.lineWidth = 2; // Nur mit 2 sieht das richtig schwarz au.s Ansonsten gleibt das grau.
graph.stroke();
```



CPoly hat gesagt.:


> Ich kann Google Charts sehr empfehlen https://developers.google.com/chart/
> 
> Weitere Möglichkeit die mir einfällt http://g.raphaeljs.com/



Wie ich bereits oben gesagt habe möchte ich selber herausfinden wie ich einen Graphen erstelle. Das bringt mir mehr als ein fertiges Paket zu nehmen. Trotzdem danke ich dir für den hilfreichen Link, weil man bei Google den Source Code einsehen kann.


Außerdem ist mir aufgefallen, dass wenn ich das Canvas breiter mache die "1"-breite Linie breiter wird. Also wird ein Canvas gar nicht in Pixeln eingeteilt? Kann mir da jemand auf die Sprünge helfen?

Moritzz


----------



## Maniac (29. Mai 2012)

Hat jetzt zwar nichts mit deinem Graphen zu tun, sondern eher mit dem übergeben der Daten/Array von PHP zu JS.

Warum übergibst du nicht einen JSON-String? Kannst dir dein PHP-Array als JSON umwandeln und dieses dann in JS super verwenden.


----------



## moritzmoritzz (29. Mai 2012)

Maniac hat gesagt.:


> Hat jetzt zwar nichts mit deinem Graphen zu tun, sondern eher mit dem übergeben der Daten/Array von PHP zu JS.
> 
> Warum übergibst du nicht einen JSON-String? Kannst dir dein PHP-Array als JSON umwandeln und dieses dann in JS super verwenden.



Was genau ist ein JSON(Objekt)? Wie kann ich so eins mit Php erzeugen?

Moritz


----------



## Maniac (29. Mai 2012)

http://de2.php.net/manual/de/function.json-encode.php


----------

