Key Takeaways

• Die Flot-Bibliothek ist ein effektives Werkzeug zum Erstellen reaktionsschneller Echtzeitdiagramme in einer WordPress-Site. Es ist einfach zu implementieren und funktioniert auf allen Ger?ten.
• Ein Pushups -Trackerformular und eine Datenbanktabelle k?nnen verwendet werden, um Daten in den Grafiken zu füllen. Sobald dieses System vorhanden ist, kann jede Art von draphierten Daten erstellt werden.
• Der Flot für WordPress -Plugin kann verwendet werden, um die Flot -Bibliothek in WordPress zu registrieren und auszuführen. Die Bibliothek kann jedoch auch ohne Plugin implementiert werden.
• Echtzeit-Diagramme erstellen, beinhaltet mehrere Schritte, darunter das Abrufen der Flot-Bibliothek, das Erstellen von Pushups-Ergebnissen und das Erstellen des Diagramms. Es ist wichtig zu verstehen, wie Flot die Daten interpretiert und sich nicht nur auf das Kopieren und Einfügen des Code

In diesem Teil unserer Serie zum Erstellen von reaktionsschnellen Echtzeitdiagramme innerhalb einer WordPress-Site werden wir endlich zu den guten Sachen kommen! Die letzten drei Teile dienen dazu, die neueren Designer auf den neuesten Stand zu bringen. Wenn Sie gerade ankommen, zu schnell vorw?rts übersprungen oder unausl?schlich verwirrt sind, kehren Sie zu den früheren Teilen zurück und überprüfen Sie ein wenig. Ein Teil des Codes ist für dieses Projekt ziemlich spezifisch, z. Ich habe ein einfaches Pushups -Trackerformular und eine Datenbanktabelle für die Verwendung mit unseren Flot -Diagrammen erstellt. Natürlich k?nnen Sie nahezu jede Datenquelle verwenden, um die Daten auf Ihren Seiten zu füllen. Um einem Neuling zu unterrichten, wie man mit Formularen und Phpmyadmin anf?ngt, wollte ich den gesamten Prozess von Grund auf den gesamten Prozess durchgehen. Sobald Sie dieses System auf Ihrer WordPress -Site vorhanden haben, k?nnen Sie buchst?blich alle Arten von drapischen Daten erstellen. Die Flotgrafikbibliothek ist umfangreich und sehr einfach zu implementieren. Wie ich demonstrieren kann, k?nnen Sie mit unserem Pushups-Tracker ausspülen und wiederholen und ein leistungsstarkes System zum Anzeigen dieser Daten erstellen-alles in Echtzeit auf einer reaktionsschnellen Website.

Schritt 1: Holen Sie sich die Flot -Bibliothek

Ich benutze Flot für meine Grafiken aus vielen Gründen, aber vor allem, weil es einfach zu implementieren ist und ich es dazu bringen konnte, auf jedem vorstellbaren Ger?t zu arbeiten. Es verwendet die Canvas -Funktion in HTML5, um Daten zu zeichnen, und ist in der Lage, verrückte, erstaunliche Sachen. Sie k?nnen alles verwenden, was Sie wollen. Aber für dieses Tutorial werden wir Flot verwenden. Insbesondere verwenden wir mein Plugin (Flot für WordPress), um die Flot -Bibliothek in WordPress ordnungsgem?? zu registrieren und auszuführen. Ich empfehle dringend, das Plugin zu verwenden, aber Sie k?nnen Flott ohne ihn implementieren. Flot für WordPress -Plugin

Schritt 2: Machen Sie die Liegestütze -Ergebnisse nach

Gehen Sie in WordPress zu "Post" S> "Neue" und erstellen Sie einen Beitrag mit dem Titel "Pushups -Ergebnisse". Stellen Sie im K?rper den folgenden Shortcode ein:

[pushups_results_sc]

Ver?ffentlichen Sie den Beitrag und Sie sind fertig. Derzeit zeigt der Post -Inhalt den genauen Text ?[Pushups_Results_Sc]“ an, da wir die Funktion für den Shortcode noch nicht erstellt haben.

Schritt 3: Erstellen Sie unser Graph

In Teil 2 dieser Serie haben wir eine neue Tabelle in unserer WordPress -Datenbank namens Pushups erstellt. Wir verwenden es, um die Liegestützinformationen aus unseren Formularen zu speichern. Wenn Sie mit PhpMyAdmin wirklich vertraut sind, gehen Sie zur Registerkarte SQL und führen Sie diese Abfrage aus, um die Tabelle zu erstellen, die wir verwenden: [SourceCode Language = ”SQL”] Erstellen Sie Tabelle `{Ihre Datenbank}`.`pushups` ( `pushups_id` int (10) nicht null auto_increment, `pushups_count` int (3) nicht null, `pushups_date` varchar (15) nicht null, `pushups_wpuser` varchar (100) nicht null, "Active" int (2) nicht null Standard "1", Index (`pushups_id`) ) Motor = MyISAM [/Sourcecode] Bis zu diesem Zeitpunkt ging es darum, die Infrastruktur zu erreichen, damit Sie anfangen k?nnen, Daten zu ziehen und auf fantastische Weise anzuzeigen. Von hier aus dreht sich alles um die Grafiken! Erstellen Sie eine neue PHP -Datei und rufen Sie sie auf Pushups_Results.php. Sie werden dies in Ihren WP-Content/Plugins/Flot-for-WP/Flot-Ordner hochladen, nachdem Sie den folgenden Code eingefügt haben: [SourceCode Language = ”PHP”] Php /* Beschreibung: Dieser Code soll von einem WordPress -Shortcode aufgerufen werden Es wird in der Datenbank aufgerufen und die Daten in einem Flot -Diagramm angezeigt. Autor: @JPhornor und @tarahornor Lizenz: GPL3 */ // Hier ist unsere Funktion! Funktion Pushups_results () { /* Holen Sie sich die DB -Verbindung. Wenn Sie keine connect_to_db.php erstellt haben Datei fügen Sie hier einfach Ihre eigenen Datenbankverbindungsinformationen hinzu */ include ("connect_to_db.php"); Connect_to_db (); /* Dies bringt uns den aktuellen angemeldeten Benutzer und weist den Benutzernamen zu zum Variablen -WPUSER, der in der Hauptabfrage verwendet wird */ get_currentuserinfo (); $ current_user = wp_get_current_user (); $ wpuser = $ current_user-> user_login; // der gro?e Test! Wenn ein Benutzer nicht angemeldet ist, bekommen er nichts! if (! is_user_logged_in ()) { echo ‘ Login Um Pushup -Ergebnisse zu sehen!

Register Wenn Sie noch nicht.

"; } anders { // die Frage $ sql = mysql_query ("Ausw?hlen * aus Pushups, wobei` pushups`.`pushups_wpuser` = '$ wpuser' und `pushups`.`active` = 1 order by` pushups`.`.`.`Pushups_date`` “); /* Min- und Max -Abfragen. Es ist im Allgemeinen nicht erforderlich, produzieren zu müssen Unsere eigenen Min- und Max -Zahlen für Flot Setzen Sie dies mit einem Komma, das Flott als Null interpretiert. */ $ min = mySQL_Query (?W?hlen Sie Pushups_count aus Pushups Order by PUBUPS_COUNT ASC Limit 1“); $ max = mySQL_Query (?W?hlen Sie Pushups_Count aus Pushups Order by pushups_count Desc Limit 1 ″); // Wir müssen den minischen Punkt im Diagramm berechnen while ($ row = mysql_fetch_array ($ min)) { $ min_count = $ row [’pushups_count’]; } $ min_count = $ min_count * .9; // Dies gibt uns einen Atemraum in der Tabelle // Berechnen wir den maximalen Punkt im Diagramm while ($ row = mysql_fetch_array ($ max)) { $ max_count = $ row [’pushups_count’]; }$ max_count = $ max_count * 1.1; // Dies gibt uns auch einen Atemraum in der Tabelle /* Jetzt generieren wir unser JavaScript und HTML auf der Seite. Dies ist nicht meine bevorzugte Art, es zu tun, aber es erledigt den Job. */ echo "