So erstellen Sie Drilldown-Diagramme mit PHP, MySQL und FusionCharts

Angenommen, Sie zeigen ein Säulendiagramm an, das die jährlichen Umsatzzahlen Ihres Unternehmens anzeigt, wobei jede Spalte ein einzelnes Jahr darstellt. Wenn Sie auf eine Spalte klicken, gehen Sie eine Ebene tiefer, um vierteljährliche Daten anzuzeigen. Wenn Sie jetzt noch einmal klicken, erhalten Sie monatliche Verkaufszahlen.

Was Sie hier tun, ist ein Drilldown von jährlichen über vierteljährliche zu monatlichen Daten anhand eines Drilldown-Diagramms. Mit Drilldown-Diagrammen können Sie auf einzelne Datendiagramme klicken, um weitere Details anzuzeigen (ein Datendiagramm bezieht sich auf eine Spalte im Säulendiagramm, auf Linien in einem Liniendiagramm oder auf Kreisdiagramme in einem Kreisdiagramm)..

Drilldown-Diagramme sind in Geschäftsberichten und Analyse-Dashboards sehr nützlich. In diesem Lernprogramm werde ich den schrittweisen Prozess der Erstellung eines Drilldown-Diagramms mit der JavaScript-Diagrammbibliothek von FusionCharts behandeln. Wir werden die in einer MySQL-Datenbank vorhandenen Daten mit PHP abrufen und dann die Kernbibliothek von FusionCharts und ihren PHP-Diagramm-Wrapper verwenden, um unser Diagramm zu zeichnen.

Was wir heute machen: (Sie können die Live-Version hier sehen oder den Quellcode über diesen Link herunterladen).

Es handelt sich um ein 2D-Säulendiagramm mit zwei Ebenen. Erste Ebene enthält jährliche Umsatzdaten für 6 Jahre. Wenn Sie auf ein Jahr klicken, können Sie vierteljährliche Daten für dieses Jahr anzeigen (zweite Ebene)..

Ich habe den gesamten Prozess in sieben Schritte unterteilt:

• 1: Einschließlich JavaScript-Dateien und PHP-Wrapper
• 2: DB-Verbindung einleiten und validieren
• 3: Daten werden mit SQL-Abfrage abgerufen
• 4: Konvertierung des Abfrageergebnisses in JSON
• 5: Wiederholen Sie die Schritte -3 und 4 für jede Drilldown-Ebene
• 6 Erstellen einer Diagramminstanz und Schließen der DB-Verbindung

1. Einschließlich JavaScript-Dateien und PHP-Wrapper

Um Diagramme in diesem Projekt zu rendern, benötigen wir sowohl die Kern-JS-Bibliothek von FusionCharts als auch ihren PHP-Wrapper:

• JavaScript-Diagrammbibliothek von FusionCharts - fusioncharts.js - wird mit HTML eingefügt

  2. Einrichten und Überprüfen der DB-Verbindung

  Nachdem wir alle Abhängigkeiten aufgenommen haben, müssen wir die Verbindung mit unserer Datenbank herstellen, um Daten für das Diagramm abzurufen.

  So initiieren und validieren wir die Datenbankverbindung in PHP:

  connect_error) exit ("Es ist ein Fehler bei Ihrer Verbindung aufgetreten:". $ dbhandle-> connect_error); ?>

  Um die Verbindung zur MySQL-Datenbank herzustellen, sollten diese vier Parameter angegeben werden:

  • Adresse des Servers, auf dem die Datenbank installiert ist. In unserem Fall ist es solocalhost.
  • Benutzername, um eine Verbindung zur Datenbank herzustellen. Standardwert ist Wurzel.
  • Passwort für diesen Benutzernamen.
  • Name der Datenbank, unter der die Tabelle erstellt wird.

  $ dbhandle stellt Verbindung mit der Datenbank her. Ich habe Dummy-Werte in das obige Codeausschnitt eingefügt, und Sie müssen Werte für ersetzen $ hostdb, $ userdb, $ passdb, und $ namedb mit aktuellen Werten für Ihre Datenbank.

  3. Abrufen von Daten mithilfe der SQL-Abfrage

  Nachdem die Verbindung zur MySQL-Datenbank erfolgreich hergestellt wurde, können Sie die SQL-Abfrage unten verwenden, um die Daten für unser Diagramm abzurufen:

  // SQL-Abfrage für das übergeordnete Diagramm $ strQuery = "SELECT Year, Sales FROM annual_sales"; // Die Abfrage ausführen oder die Fehlermeldung zurückgeben. $ Result = $ dbhandle-> query ($ strQuery) oder exit ("Fehlercode ($ dbhandle-> errno): $ dbhandle-> error");

  Wenn abfrage ($ strQuery) wird erfolgreich ausgeführt, die Daten werden ausgefüllt $ Ergebnis.

  4. Konvertieren des Abfrageergebnisses in JSON

  Wenn Sie alle obigen Schritte bis jetzt ordnungsgemäß ausgeführt haben, sollten Sie Daten aus der Abfrage in abgerufen haben $ Ergebnis Variable.

  Um die JSON-Daten im richtigen Format zu bilden, erstellen wir ein assoziatives Array - $ arrData - und drücken Sie alle Diagrammkonfigurationsattribute und -daten wie im folgenden Code gezeigt:

  // Wenn die Abfrage eine gültige Antwort zurückgibt, wird das JSON-Array vorbereitet. if ($ result) // '$ arrData' enthält die Diagrammoptionen und -daten. $ arrData = array ("chart" => array ("caption" => "YoY Sales - KFC", "xAxisName" => "Year", // andere Diagrammattribute)); // ein Array für das übergeordnete Diagramm erstellen $ arrData ["data"] = array (); // Daten in Array verschieben, während ($ row = mysqli_fetch_array ($ result)) array_push ($ arrData ["data"]), array ("label" => $ row ["Year"], "value" => row) ["Sales"], "link" => "newchart-json-". $ Row ["Year"]))); 

  Dieser Code enthält die JSON-Daten für das übergeordnete Diagramm. Das Verknüpfung Das Attribut in den JSON-Daten bezieht sich auf das nächste Diagramm, das nach dem Klicken auf die einzelne Datendarstellung wiedergegeben werden soll. Für eine detailliertere Beschreibung besuchen Sie diese offizielle Dokumentationsseite.

  5. Wiederholen Sie die Schritte 3 und 4 für jede Drill-Down-Ebene

  Um zur nächsten Ebene zu gelangen, müssen wir die Daten erneut mit der Variablen abrufen $ resultQuarterly aus der jeweiligen Datenbanktabelle (Quarterlysales). Dies ist ähnlich zu dem, was wir in Schritt 3 gemacht haben. Code für dasselbe ist unten gezeigt:

  $ strQuarterly = "SELECT Quartal, Umsatz, Jahr von Vierteljahr_Verkauf WO 1"; $ resultQuarterly = $ dbhandle-> query ($ strQuarterly) oder exit ("Fehlercode ($ dbhandle-> errno): $ dbhandle-> error");

  Das assoziative Array $ arrData wird mit den untergeordneten Diagrammdaten für jede übergeordnete Datendarstellung angehängt, aber hier kommen die Daten darunter linkeddata . Der Code hierfür wird unten mit zugehörigen Kommentaren gezeigt:

  // linkeddata ist für die Eingabe von Daten und Diagrammoptionen in untergeordnete Diagramme verantwortlich. $ arrData ["linkeddata"] = array (); $ i = 0; if ($ resultQuarterly) while ($ row = mysqli_fetch_array ($ resultQuarterly)) $ year = $ row ['Year']; if (isset ($ arrData ["linkeddata"] [$ i - 1]) && $ arrData ["linkeddata"] [$ i - 1] ["id"] == $ year) array_push ($ arrData ["linkeddata.) "] [$ i - 1] [" linkedchart "] [" data "], array (" label "=> $ row [" Quarter "]," value "=> $ row [" Sales "])));  else array_push ($ arrData ["linkeddata"], array ("id" => "$ year"), "linkedchart" => array ("chart" => array ("caption" => "QoQ Sales - KFC für $ year "," xAxisName "=>" Quartal "," yAxisName "=>" Umsatz "," paletteColors "=>" # D5555C "," baseFont "=>" Open Sans "," theme "=>" elegant " ), "data" => array (array ("label" => $ row ["Quarter"], "value" => $ row ["Sales"]))))); $ i ++; 

  Jetzt haben wir unser assoziatives Array mit Daten in der Variablen bereit $ arrData und schließlich verschlüsseln wir das Array mit json_encode () Methode. Die Variable $ jsonEncodedData enthält die Daten für das Diagramm mit Drilldown-Funktion.

  $ jsonEncodedData = json_encode ($ arrData);

  6. Erstellen einer Diagramminstanz und Schließen der DB-Verbindung

  Ein HTML

  eignet sich am besten als Container für unser Diagramm und erklärt es wie folgt:

  Super Chart auf dem Weg!

  Als nächsten Schritt erstellen wir eine Diagramminstanz und übergeben den Diagrammtyp, seine Abmessungen, die Container-ID und andere Details an das Diagramm, um das Diagramm zu rendern. Hier ist die Vorlage zum Erstellen der FusionCharts-Instanz:

  // Syntax für die Instanz - neue FusionCharts ("Diagrammtyp", "Diagramm-ID", "Diagrammbreite", "Diagrammhöhe", "Div-ID zum Rendern des Diagramms", "Datentyp", "tatsächliche Daten")

  Hier ist der Code zum Erstellen der FusionCharts-Instanz (mit obiger Vorlage), Rendern des Diagramms und Schließen der Datenbankverbindung:

  // Erstellen der FusionCharts-Instanz $ columnChart = neue FusionCharts ("column2d", "myFirstChart", 600, 300, "linked-chart", "json", "$ jsonEncodedData"); // FusionCharts Render-Methode $ columnChart-> render (); // Render-Methode // Datenbankverbindung schließen $ dbhandle-> close ();

  Ihre Diagramme besser aussehen lassen

  Wenn Sie den Quellcode für dieses Projekt heruntergeladen haben, müssen Sie unter einige Parameter bemerkt haben Diagramm Array, das wir oben nicht besprochen haben. Diese Parameter steuern das Aussehen und die Funktionalität eines Diagramms und werden formal als Diagrammattribute bezeichnet.

  Hier einige Erklärungen zu einigen Schlüsselattributen, die ich in meinem Code verwendet habe:

  • canvasBgColor und bgColorMit diesen beiden Attributen können Sie die Hintergrundfarbe der Zeichenfläche und des Containers Ihres Diagramms steuern.
  • baseFont: Sie können dieses Attribut verwenden, um die Schriftfamilie für Ihr Diagramm festzulegen. Sie sind nicht nur auf Systemschriftarten beschränkt, sondern können beliebige Schriftarten hinzufügen. Um eine benutzerdefinierte Schriftart zu verwenden, schließen Sie die Quelldatei für diese Schriftart in HTML ein und legen Sie sie mit fest baseFont Attribut. In unserem Beispiel werden Open Sans von Google Fonts verwendet.
  • plotToolText: Das Anzeigen zusätzlicher Informationen zum Schwebeflug ist eine großartige Möglichkeit, das Datenerlebnis zu verbessern plotToolText kommt ins Bild. Sie können die QuickInfo für das Diagramm anpassen. Sie können HTML verwenden -
    und benutzerdefiniertes CSS, um Ihren Tooltip mit diesem Attribut zu gestalten.
  • Thema: Dieses Attribut hilft Ihnen, in allen Diagrammen ein konsistentes Design zu erhalten. Sie können die Kosmetika eines Diagramms in einer Datei definieren und mit einschließen Thema Attribut, um ein gemeinsames Design für alle Ihre Diagramme zu haben. Auf dieser Dokumentationsseite zum Thema Manager können Sie mehr darüber erfahren.

  Es gibt Hunderte von Attributen, die Sie zum Anpassen Ihres Diagramms verwenden können, und es ist praktisch unmöglich, alles in diesem Beitrag zu beschreiben. Daher habe ich oben nur einige wichtige aufgelistet. Weitere Informationen finden Sie auf der Seite mit den Diagrammattributen für 2D-Säulendiagramme.

  Mehr Ressourcen

  Ich habe versucht, alles ausführlich zu behandeln, aber Sie werden sich mit Herausforderungen konfrontiert sehen, wenn Sie es alleine versuchen oder dieses Konzept weiterführen möchten. Um Ihnen auf Ihrer Reise zu helfen, finden Sie hier einige wichtige Ressourcen:

  • Dokumentation: Um mehr über Drilldown-Diagramme und deren Implementierung zu erfahren, besuchen Sie die offizielle Seite des Entwicklercenters.
  • PHP-Wrapper: Wenn Sie mehr darüber erfahren möchten, was mit dem Wrapper von FusionCharts möglich ist, können Sie deren PHP-Diagrammseite erkunden. Es enthält viele Live-Beispiele mit vollem Code.

  Fühlen Sie sich frei, Ihre Fragen / Rückmeldungen / Vorschläge in den Kommentarbereich zu posten. Immer gerne reden und helfen!

  Code