Dygraphen Gleitender Durchschnitt

Um dieses Beispiel in sich geschlossen zu halten, ist der zweite Parameter rohe CSV-Daten. Die Dygraphenbibliothek analysiert diese Daten (einschließlich Spaltenüberschriften), verkleinert ihren Container auf einen vernünftigen Standardwert, berechnet entsprechende Achsbereiche und Markierungen und zeichnet den Graphen. In den meisten Anwendungen ist es sinnvoller, stattdessen eine CSV-Datei einzufügen. Wenn der zweite Parameter für den Konstruktor keine neue Zeile enthält, wird er als der Pfad zu einer CSV-Datei interpretiert. Der Dygraph führt eine XMLHttpRequest aus, um diese Datei abzurufen und die Daten anzuzeigen, sobald sie verfügbar sind. Vergewissern Sie sich, dass Ihre CSV-Datei lesbar ist und von einer Stelle versorgt wird, die XMLHttpRequests versteht. Insbesondere können Sie keine CSV-Datei mit der Datei :. Heres ein Beispiel: (Daten von Weather Underground) Es gibt ein paar Dinge zu beachten: Die Dygraph schickte ein XHR, um die Temperaturen. csv-Datei zu erhalten. Die Etiketten wurden aus der ersten Temperaturlinie genommen. Die Datum, Hoch, niedrig ist. Der Dygraph wählte automatisch zwei unterschiedliche, leicht zu unterscheidende Farben für die beiden Datenreihen. Die Etiketten auf der x-Achse haben von Tag zu Monat umgestellt. Wenn Sie zoomen, wechseln Sie zu Wochen und dann Tage. Einige Heuristiken werden verwendet, um einen guten vertikalen Bereich für die Daten zu bestimmen. Die Idee ist, alle Daten sichtbar zu machen und menschenfreundliche Werte auf der Achse zu haben (d. H. 200 statt 193,4). Im Allgemeinen funktioniert das gut. Die Daten sind sehr spitz. Ein gleitender Durchschnitt wäre leichter zu interpretieren. Dieses Problem kann behoben werden, indem die entsprechenden Optionen in dem zusätzlichen Optionen-Parameter für den Dygraph-Konstruktor angegeben werden. Um die Anzahl der Tage für einen gleitenden Durchschnitt festzulegen, verwenden Sie die Option rollPeriod. Heres, wie seine getan: Ein rollender Durchschnitt kann mit dem Textfeld in der unteren linken Ecke des Graphen eingestellt werden (das showRoller-Attribut ist, was diese erscheint). Beachten Sie auch, dass wir explizit die Größe des Diagramms div festgelegt haben. Fehlerbalken Ein weiteres wichtiges Merkmal der Dygraphen-Bibliothek ist die Möglichkeit, Fehlerleisten um Datenreihen anzuzeigen. Für jeden Datenpunkt muss eine Standardabweichung angegeben werden. Ein Plusmnn-Sigma-Band wird an dieser Stelle um die Datenreihe gezogen. Wenn ein gleitender Durchschnitt angezeigt wird, berechnet Dygraphen die Standardabweichung des Durchschnitts an jedem Punkt. I. E. Sigma sqrt ((sigma 1 2 sigma 2 2. sigma n 2) n) Heres eine Demonstration. Es gibt zwei Datenreihen. Eine ist N (100,10) mit einer an jedem Punkt angegebenen Standardabweichung von 10. Die andere ist N (80,20) mit einer Standardabweichung von 20 an jedem Punkt angegeben. Die CSV-Datei wurde mit Octave generiert und kann bei twonormals. csv eingesehen werden. Was hier zu beachten ist: Die errorBars-Option wirkt sich sowohl auf die Interpretation der CSV-Datei als auch auf die Darstellung des Graphen aus. Wenn errorBars auf true gesetzt ist, wird jede Zeile als YYYYMMDD interpretiert. EIN . SigmaA. B. SigmaB. Hellip Die erste Zeile der CSV-Datei erwähnt nicht die Fehlerspalten. In diesem Fall sein gerechtes Datum, Series1, Series2. Die Mittelung wirkt sich sichtbar auf die Fehlerbalken aus. Dies ist am deutlichsten, wenn Sie kurbeln die rollenden Zeitraum zu etwas wie 100 Tage. Für die frühesten Daten gibt es nicht 100 Datenpunkte zu durchschnittlich, so dass das Signal lauter sein wird. Die Fehlerbalken werden kleiner wie sqrt (N) vorwärts in der Zeit, bis theres eine volle 100 Punkte zum Durchschnitt. Die Fehlerbalken sind teilweise transparent. Das sieht man, wenn sie einander überlappen. Die Google Visualization API bietet eine Standardschnittstelle zum Beschreiben von Daten. Nachdem Sie Ihre Daten mit dieser API angegeben haben, können Sie eine beliebige GViz-kompatible Visualisierung anschließen. Dygraphen ist eine solche Visualisierung. Insbesondere kann es als Ersatz für die AnnotatedTimeline-Visualisierung verwendet werden, die auf Google Finanzen und anderen Websites verwendet wird. Um zu sehen, wie dies funktioniert, sehen Sie sich die gviz Annotation-Demo an. Für eine einfache Demonstration der Verwendung von Dygraphen eine GViz-Visualisierung finden Sie unter danvk. orgdygraphstestsgviz. html. Dygraphen können auch als GViz Gadget verwendet werden. Dies ermöglicht es, in eine Google-Tabelle eingebettet werden. Für eine Demonstration dieses, sehen Sie diese Kalkulationstabelle. Die URL für das Gadget ist danvk. orgdygraphsgadget. xml. Heres ein Beispiel eines veröffentlichten gviz Gadget unter Verwendung von Dygraphen: Charting Fractions Situationen entstehen oft, wo Sie Fraktionen, z. B. Der Bruchteil der Befragten in einer Umfrage, die besagt, dass sie für den Kandidaten X stimmen oder die Anzahl der Treffer geteilt durch bei Fledermäusen (baseballs batting average). Fraktionen erfordern eine besondere Behandlung aus zwei Hauptgründen: Der Durchschnitt von a1b1 und a2b2 ist (a1a2) (b1b2). Nicht (a1b1 a2b2) 2. Die normale Näherung ist nicht immer anwendbar und es müssen anspruchsvollere Konfidenzintervalle verwendet werden (z. B. das Wilson-Konfidenzintervall), um Verhältnisse zu vermeiden, die 100 übersteigen oder unter 0 gehen. Glücklicherweise behandelt Dygraphs diese beiden für Sie Heres ein Diagramm und den erzeugten Befehl It: Batting Average für Ichiro Suzuki vs. Mariners (2004) Die Option fractions gibt an, dass die Werte in jeder Spalte als Fraktionen (zB 12 statt 0,5) analysiert werden sollen. Die errorBars-Option zeigt an, dass wed ein Konfidenzintervall um jeden Datenpunkt sehen kann. Wenn Fraktionen gesetzt sind, erhalten Sie standardmäßig ein Wilson-Konfidenzintervall. Wenn Sie sorgfältig auf die Tabelle schauen, können Sie sehen, dass die Fehlerbalken asymmetrisch sind. Ein paar Dinge zu beachten, über diese Tabelle: Die Fehlerbalken für Ichiros Batting Durchschnitt sind größer als für die Mariners, da er weit weniger bei Fledermäusen als sein Team hat. Dygraphs macht es einfach zu sehen, batting Durchschnitt über die letzten 30 Spiele. Das ist gewöhnlich ziemlich schwer zu berechnen. Es macht deutlich, wo die heiße und kalte Teil der Suzukis-Saison waren. Wenn Sie den Mittelungszeitraum auf etwas Großes einstellen, wie 200, sehen Sie die Mannschaften und Spieler, die durchschnittlich durch dieses Spiel schlagen. Die letzte Zahl ist die durchschnittliche Gesamtnote der Saison. Wenn sich die Fehlerbalken nicht überlappen, können wir mit 95 Vertrauen sagen, dass sich die Serien unterscheiden. Es gibt eine bessere als 95 Chance, dass Ichiro war ein besserer Hitter als sein Team als Ganzes im Jahr 2004, das Jahr gewann er den Batting-Titel. Eine letzte Demo Diese Grafik zeigt die monatlichen Schliessungen des Dow Jones Industrial Average, sowohl nominal als auch real (d. H. Inflationsbereinigt). Die schattierten Bereiche zeigen ihre monatliche Höhe und niedrig. CPI-Werte mit einer Basis von 1982-84 werden verwendet, um die Inflation anzupassen. Anzeige: Nominal Real Annotations Gemeinsame Gotchas Hier sind ein paar Probleme, die Ive häufig laufen, während mit der Dygraphs-Bibliothek. Wenn Ihr Diagramm nicht angezeigt wird, überprüfen Sie die JavaScript-Fehlerkonsole Ihres Browsers. Dygraphs macht jeden Versuch, Fehler und Warnungen zu protokollieren, und diese können Sie oft in die richtige Richtung führen. Stellen Sie sicher, dass Ihre CSV-Dateien lesbar sind Wenn Ihre Grafik nicht angezeigt wird, kann die XMLHttpRequest für die CSV-Datei fehlschlagen. Mit Tools wie Firebug können Sie feststellen, ob dies der Fall ist. Stellen Sie sicher, dass Ihre CSV-Dateien im richtigen Format vorliegen. Sie müssen die Form YYYYMMDD, Serie1, Serie2, hellip haben. Und wenn Sie die errorBars-Eigenschaft setzen, stellen Sie sicher, dass Sie alternative Datenreihen und Standardabweichungen. Dygraphen sind nicht glücklich, wenn sie in einem ltcentergt-Tag platziert werden. Dies gilt auch für die CSS-Text-align-Eigenschaft. Wenn Sie einen Dygraphen zentrieren möchten, legen Sie ihn in eine Tabelle mit dem Ausrichtungszentrumssatz. Stellen Sie die dateWindow-Eigenschaft nicht auf ein Datum ein. Es erwartet Millisekunden seit Epoche, die aus einer JavaScript-Date-Objekte valueOf-Methode erhalten werden können. Stellen Sie sicher, dass Sie keine hinteren Kommas in Ihrem Aufruf zum Dygraph-Konstruktor oder im Parameter options haben. Firefox, Chrome und Safari ignorieren diese, aber sie können dazu führen, dass ein Graph nicht in Internet Explorer angezeigt wird. Was als nächstes Wenn Sie Internet Explorer unterstützen müssen, lesen Sie in unseren Notizen auf IE. Um etwas Inspiration zu bekommen, schauen Sie, wie die Charts in unserer Galerie gebaut werden.