Node.js: Säulendiagramm mit FusionCharts mit MongoDB

In diesem Tutorial wird FusionCharts, eine der führenden Diagrammbibliotheken, erläutert und erläutert, wie Sie mit FusionCharts ein Säulendiagramm erstellen.

Daten in Form von Zahlen zu verstehen und zu analysieren ist immer schwierig. Aber wenn das Gleiche visuell dargestellt wird, werden die Dinge sehr schnell verständlicher und ergeben einen Sinn. In diesem Beitrag zeige ich Ihnen, wie Sie Daten in Form von Diagrammen darstellen.

Die Beispieldaten, die ich verwenden werde, sind die der zehn besten Runscorer im ODI Cricket im Jahr 2015. Die gleichen Daten finden Sie auf cricinfo Hier.

Für die Erstellung der Diagramme stehen sowohl clientseitige als auch serverseitige Diagramme zahlreiche Optionen zur Verfügung. Aber in diesem Beitrag werde ich eine beliebte Javascript-API verwenden FusionCharts.

Fusioncharts

Was ist FusionCharts?

Laut ihrer offiziellen Dokumentation ist ein FusionCharts:

FusionCharts ist eine KOSTENLOSE Open-Source-Flash-Charting-Komponente, die zum Rendern datengesteuerter animierter Diagramme verwendet werden kann. FusionCharts wurde in Macromedia Flash MX erstellt und kann mit jeder Web-Skriptsprache wie PHP, ASP, .NET, JSP, ColdFusion, JavaScript, Ruby on Rails usw. verwendet werden, um interaktive und leistungsstarke Diagramme bereitzustellen. Mit XML als Datenschnittstelle nutzt FusionCharts bei der Erstellung die flüssige Schönheit von Flash voll aus kompakt, interaktiv Und optisch fesselnd Diagramme.

Der Beitrag wird aus folgenden Teilen bestehen:

  • Erstellen des Node.js-Backends zum Abrufen von Daten
  • Interaktion mit dem Node.js-Backend über den Javascript-Client
  • Rendern des Diagramms anhand der erhaltenen Daten
  • Erstellen des Node.js-Backends zum Abrufen von Daten

    • Vielleicht möchten Sie Folgendes lesen: Node.js und MongoDB führen CRUD-Operationen durch

    Lassen Sie uns zunächst die folgenden Daten in die Mongodb-Sammlung importieren:

    [
      {"player": "AB de Villiers", "runs":162},
      {"player": "CH Gayle", "runs":215},
      {"player": "KJ Coetzer", "runs":156},
      {"player": "L Ronchi", "runs":170},
      {"player": "TM Dilshan", "runs":161},
      {"player": "MJ Guptil", "runs":237},
      {"player": "HM Amla", "runs":153},
      {"player": "AB de Villiers", "runs":149},
      {"player": "HM Amla", "runs":159},
      {"player": "DA Warner", "runs":178}
    ]
    
    

    Speichern Sie die obige JSON-Datei unter dem Dateinamen „data.json“ und verwenden Sie dann den folgenden Befehl, um die oben genannten Daten zu importieren:

    mongoimport -d test -c top_scores --type json --file data.json --jsonArray
    

    Damit haben wir nun die Daten in unserer Mongodb und diese können durch Ausführen des folgenden Befehls bestätigt werden:

    > db.top_scores.find();
    { "_id" : ObjectId("55be11f845ed173efcfc34d4"), "player" : "AB de Villiers", "runs" : 162 }
    { "_id" : ObjectId("55be11f845ed173efcfc34d5"), "player" : "CH Gayle", "runs" : 215 }
    { "_id" : ObjectId("55be11f845ed173efcfc34d6"), "player" : "KJ Coetzer", "runs" : 156 }
    { "_id" : ObjectId("55be11f845ed173efcfc34d7"), "player" : "L Ronchi", "runs" : 170 }
    { "_id" : ObjectId("55be11f845ed173efcfc34d8"), "player" : "TM Dilshan", "runs" : 161 }
    { "_id" : ObjectId("55be11f845ed173efcfc34d9"), "player" : "MJ Guptil", "runs" : 237 }
    { "_id" : ObjectId("55be11f845ed173efcfc34da"), "player" : "HM Amla", "runs" : 153 }
    { "_id" : ObjectId("55be11f845ed173efcfc34db"), "player" : "AB de Villiers", "runs" : 149 }
    { "_id" : ObjectId("55be11f845ed173efcfc34dc"), "player" : "HM Amla", "runs" : 159 }
    { "_id" : ObjectId("55be11f845ed173efcfc34dd"), "player" : "DA Warner", "runs" : 178 }
    

    Lassen Sie uns nun einen Node.js-basierten Webserver schreiben, der Express verwendet, um Daten aus der MongoDB abzurufen und sie in der Form zurückzugeben:

    [{"label":"MJ Guptil", "value": 237}, ...]
    

    Die obige Datenstruktur wird von verarbeitet FusionCharts-API.

    Das Folgende ist der Code für die Node.js Server:

    //Express is required for creating Node.js based web apps
    var express = require('express');
    
    //Importing the required mongodb driver
    var MongoClient = require('mongodb').MongoClient;
    
    //MongoDB connection URL
    var dbHost="mongodb://localhost:27017/test";
    
    //Name of the collection
    var myCollection = "top_scores";
    
    //DB Object
    var dbObject;
    
    //Connecting to the Mongodb instance.
    //Make sure your mongodb daemon mongod is running on port 27017 on localhost
    MongoClient.connect(dbHost, function(err, db){
      if ( err ) throw err;
      dbObject = db;
    });
    
    var app = express();
    app.set('port', 3300);
    
    //Starting up the server on the port: 3300
    app.listen(app.get('port'), function(){
      console.log('Server up: http://localhost:' + app.get('port'));
    });
    
    app.get("/scores", function(req, res){
      //Query Mongodb and iterate through the results
      dbObject.collection(myCollection).find({},{},{}).toArray(
        function(err, docs){
          var result = [];
          for(index in docs){
            var doc = docs[index];
            var resultObject = {};
            resultObject.label = doc.player;
            resultObject.value = doc.runs;
            result.push(resultObject);
          }
          res.json(result);
        }
      );
    
    });
    

    Speichern Sie den obigen Code in der Datei und benennen Sie ihn wie folgt: column_chart_sample_server.js. Führen Sie den obigen Code mit dem folgenden Befehl aus:

    G:\node\testapp>node column_chart_sample_server.js
    Server up: http://localhost:3300
    

    Dadurch wird der Server auf Port 3300 ausgeführt. Öffnen Sie Ihren Browser und laden Sie die URL: http://localhost:3300/scores. Sie würden die Antwort der API sehen.

    Interaktion mit dem Node.js-Backend über den Javascript-Client

    • Lesen Sie auch: Einführung in Node.js

    Rufen wir nun die obige API über Javascript auf und dafür würde ich jQuery wie unten gezeigt verwenden:

    $(function(){
      $.ajax({
    
        url: 'http://localhost:3300/scores',
        type: 'GET',
        crossDomain: true,
        success : function(data) {
          console.log(data);
        }
      });
    });
    

    Rendern der FusionCharts anhand der erhaltenen Daten

    Wie am Anfang des Beitrags erwähnt würde ich verwenden FusionCharts Javascript-Bibliothek zum Rendern von Säulendiagrammen. Laden Sie zunächst Folgendes herunter:

    • Erforderlicher Javascript-Code für FusionCharts von Hier.
    • Bootstrap-CSS-Bibliothek aus Hier. Ich werde es für alle CSS-bezogenen Anforderungen verwenden.
    • Neuester jQuery-Code von Hier.

    Nachdem Sie alle relevanten Quellen heruntergeladen haben, kopieren Sie die Dateien von ihren entsprechenden Speicherorten und erstellen Sie eine Verzeichnisstruktur, wie in der Abbildung unten gezeigt:
    FusionChartsIm obigen Bild gibt es zwei Dateien, nämlich: column_chart_sample.html Und column_chart_sample.js. Ich würde diese beiden Dateien in diesem Beitrag implementieren. column_chart_sample.html enthält den erforderlichen HTML-Code und column_chart_sample.js enthält den Code zum Aufrufen der Server-API und zum Initialisieren des FusionCharts-Codes.

    Das Folgende ist der Code für column_chart_sample.html:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Sample for Column Chart using FusionChart</title>
      <link rel="stylesheet" href="css/bootstrap.css"/>
    </head>
    <body>
      <div  >
        <div  >
          <div  >
            <h3>Top 10 run scorers in ODI cricket in the year 2015</h3>
            <!-- Container for rendering the chart -->
            <div id="chart-container"></div>
          </div>
        </div>
      </div>
      <!-- jQuery Javascript -->
      <script src="js/jquery-2.1.4.js"></script>
    
      <script src="js/bootstrap.js"></script>
      <!-- FusionCharts related Javascript library -->
      <script src="js/fusioncharts.js"></script>
      <script src="js/fusioncharts.charts.js"></script>
      <script src="js/fusioncharts.theme.zune.js"></script>
      <script src="js/column_chart_sample.js"></script>
    </body>
    </html>
    

    Teilen Sie uns mit, wie Sie Schritt für Schritt den Javascript-Code für die Darstellung des Diagramms erstellen.

  • Erstellen Sie ein JSON-Objekt mit Diagrammeigenschaften:
    var chartProperties = {
      "caption": "Top 10 run scorers in ODI Cricket in 2015",
      "xAxisName": "Player",
      "yAxisName": "Runs Scored",
      "rotatevalues": "1",
      "theme": "zune"
    };
    
  • Rufen Sie die Daten für das Diagramm ab, indem Sie die zu Beginn erstellte serverseitige API aufrufen, wie unten gezeigt:
    var chartData;
    $(function(){
      $.ajax({
    
        url: 'http://localhost:3300/scores',
        type: 'GET',
        crossDomain: true,
        success : function(data) {
          chartData = data;
        }
      });
    });
    
  • Erstellen einer Instanz von FusionCharts durch Übergabe der ID des HTML-Elements, in dem das Diagramm gerendert werden soll, der Abmessungen des Diagramms, des Typs des Diagramms, des Datenformats und der Datenquelle des Diagramms, wie unten gezeigt:
    var apiChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      width: '550',
      height: '350',
      dataFormat: 'json',
      dataSource: {
        "chart": chartProperties,
        "data": chartData
      }
    });
    

    Wir haben bereits gesehen, wie chartProperties Und chartData Objekt wird erstellt.

  • Rendern Sie das Diagramm mit dem folgenden Code:
    apiChart.render();
    
  • Alles zusammenfügen column_chart_sample.js sieht wie folgt aus:

    var chartData;
    $(function(){
      $.ajax({
    
        url: 'http://localhost:3300/scores',
        type: 'GET',
        crossDomain: true,
        success : function(data) {
          chartData = data;
          var chartProperties = {
            "caption": "Top 10 run scorers in ODI Cricket in 2015",
            "xAxisName": "Player",
            "yAxisName": "Runs Scored",
            "rotatevalues": "1",
            "theme": "zune"
          };
    
          var apiChart = new FusionCharts({
            type: 'column2d',
            renderAt: 'chart-container',
            width: '550',
            height: '350',
            dataFormat: 'json',
            dataSource: {
              "chart": chartProperties,
              "data": chartData
            }
          });
          apiChart.render();
        }
      });
    });
    

    Um dieses Beispiel in Chrome auszuführen, führen Sie die folgenden Schritte aus:

  • Installieren Sie das Plugin „Allow-Control-Allow-Origin:*“ aus dem Chrome Webstore.
  • Laden Sie „column_chart_sample.html“ im Chrome-Browser
    ODER

    Kopieren Sie den gesamten Projektordner in einen Apache-Webserver-WWW-Ordner und laden Sie die folgende URL in den Browser: http://localhost:8080/fusioncharts/column_chart_sample.html

  • In anderen Browsern würden Sie eine Fehlermeldung ähnlich der folgenden sehen: „CORS-Header „Access-Control-Allow-Origin“ fehlt„.

    Sobald Sie den HTML-Code geladen haben, wird ein Diagramm wie unten dargestellt angezeigt:
    FusionCharts

    Damit habe ich Ihnen gezeigt, wie Sie die Daten aus einer Datenbank laden und sie dem Endbenutzer in Form eines Säulendiagramms darstellen.

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen