Zur Einbindung der Visualisierungen (interaktiven Grafiken) von North Data.

• Übersicht
• Einbindung von Widgets
  • Konfiguration
  • Liste Widget-übergreifender Optionen
  • Firmen-Identifikation
  • Autorisierung
  • Abmessungen
  • Navigation / Click Handler
  • Layout von Mehrfach-Grafiken / Item Handler
• Widget-Referenz
  • Widget-Typ "history"
  • Widget-Typ "graph"
  • Widget-Typ "pubTable"
  • Widget-Typ "barChart"
  • Widget-Typ "financials"
  • Widget-Typ "sheets"
  • Widget-Typ "drillDown"

Folgende Widgets sind aktuell verfübar:

type	Beschreibung	Bild
history	Firmenhistorie (Timeline)
graph	Netzwerk einer Firma oder Person`
pubTable	Publikationen einer Firma oder Person
barChart	Balkendiagramm für finanzielle Kennzahlen
sheet	Tabellarische Darstellung der Bilanz oder GuV
financials	Tabelle mit finanziellen Kennzahlen
drillDown	Darstellung der Größe der wichtigsten Jahresabschlussposten als unterteiltes Rechteck		https://www.northdata.de/widgetTestDrillDown.html

Folgende Widgets werden in Kürze verfügbar sein:

Zur Einbindung werden benötigt: 1. externe Scripts, 2. externes Stylesheet, 3. Initialisierung/Konfigurationscode:

1. Externe Scripts:

<script src="[https://d3js.org/d3.v3.min.js](https://d3js.org/d3.v3.min.js)" charset="utf-8"></script>
<script src="[https://www.northdata.de/js/viz.min.js](https://www.biz-q.com/js/viz.min.js)"></script>

D3 ist eine verbreitete Open-Source-Visualisierungsbibliothek (https://d3js.org/). Wenn D3 bereits eingebunden wurde, kann der erste Script-Tag entfallen.

2. Externes Stylesheet:

Über die drei Parameter können Farben in der Netzwerkdarstellung ausgewählt werden: Farbe des primären Knoten (color1), Farbe der anderen Knoten (color2), Farbe der anderen Knoten bei Mouse-Hover (color3)

3. Initialisierung und Konfiguration per Javascript

<figure id="graph" data-layout="graph" data-name="Weiler Werkzeugmaschinen GmbH" data-address="Emskirchen" data-min-height="300"></figure>
<script>
   new NorthData.Widget( document.getElementById("graph"), { /*options*/ }   )
</script>

Für jede Visualisierung muss ein Widget-Objekt angelegt werden, mit einem HTML-Element als "Root".

Die Optionen können entweder als zweiter Parameter in Javascript übergeben werden, oder als Data-Attributes am HTML-Element.

Beispiel Javascript:

<script>
   new NorthData.Widget( document.getElementById("myFigure"), { 
    layout: "history",
    apiKey: "abcd-wxyz",
    name: "Weiler Werkzeugmaschinen GmbH",
    address: "Emskirchen",
    minHeight: 300,
    success: function() { console.info("ok") },
    error: function(error) { console.error(error) }
  })
</script>

Beispiel HTML-Element:

<figure id="myFigure" data-layout="graph" data-name="Weiler Werkzeugmaschinen GmbH" data-address="Emskirchen" data-min-height="300" data-api-key="abcd-wxyz"></figure>

Wichtig: HTML-Data-Attributes werden mit Bindestrichen formatiert, nicht als Camel-Case. Also minHeight in Javascript entspricht data-min-height in HTML.

Javascript-Optionen und HTML-Data-Attributen können auch frei kombiniert werden. (Die Javascript-Optionen überschreiben die Attribute.)

Bei Javascript-Optionen vom Typ Zahl oder String können auch Funktionen verwendet werden, die passende Werte zurückliefern.

Die Firma wird über die Konfigurationsoptionen name, address, registerCity und registerName identifiziert.

1. Es muss mindestens die Kombination Name/Ort oder Amtsgericht/HR angegeben werden – idealerweise beide.

2. Verwenden Sie als Adresse einfach nur den Ort. Dies ist absolut ausreichend zur Identifikation: kleine Fehler der Adresse (Hausnummern!) können dazu führen, dass eine Firma nicht identifiziert wird.

3. Die Identifikation der Firma ist ansonsten weitgehend tolerant gegenüber verschiedenen Schreibweisen der Firma, früheren Namen/Orten, unterschiedlichen Schreibweisen des Orts, alten Formen des HR-Zeichen, etc.

Die Autorisierung erfolgt per API-Key (wie beim Daten-API), oder über die Freischaltung der Domain, wo die Widgets eingebunden werden. Um einen API-Key zu erhalten bzw. eine Domain freischalten zu lassen, wenden Sie sich bitte an North Data.

Der API-Key sollte nur beim Testen verwendet werden. Beim Testen ist der API Key meistens erforderlich, da die beim Testen verwendete Domain nicht freigeschaltet ist.

Im Produktionsbetrieb sollte der API-Key nicht verwendet werden, da er im HTML-Source-Code sichtbar ist.

Widgets nutzen immer die vorgegebene Breite des HTML-Elements. Die Höhe passen sie aber zur optimalen Darstellung dynamisch an.

Interaktivität und User Engagement der Netzwerk- und Historiendarstellung werden maßgeblich verbessert, wenn die Knoten anklickbar sind und weitere Seiten verlinken. Dazu können Click Event Handler über die Optionen companyClick, personClick und publicationClick definiert werden:

function handleCompanyClick(node) {
  var hr = node.registerCity + " " + node.registerId  
  var url = "/companies.html?hr=" + encodeURIComponent(hr)
  window.location.assign(url)
}

new NorthData.Widget( myFigure, { 
  companyClick: handleCompanyClick,
  // personClick: …,
  // publicationClick: ...
})

Die Optionen companyClick, personClick und publicationClick sollten nur gesetzt werden, wenn der Click tatsächlich behandlelt wird! (Grund: korrekte Darstellung des Mauszeigers.)

Die Attribute des der Funktion übergebenen Knoten (im Beispiel: node) sind in der folgenden Tabelle zusammengestellt.

Verschiedene Widgets können mehrere Grafiken zu einer Firma erzeugen: Balkendiagramme (Widget-Type barChart) für Umsatz, Gewinn, usw., die tabellarische Darstellung der Bilanz neben der Bilanz auch eine Gewinn- und Verlustrechnung.

Es gibt in diesem Fall viele Möglichkeiten der Darstellung: nebeneinander, untereinander, oder - häufig die eleganteste Lösung - in Tabs. Die Darstellung kann angepasst werden über einen Item-Handler:

function wrapChart(title, element) {
  // wrap title and element in figure and legend tags
  var figure = document.createElement("figure")
  var legend = document.createElement("legend")
  legend.textContent = title
  figure.appendChild(legend)
  figure.appendChild(element)
  var chart = document.createElement("div")
  chart.className = "chart"
  chart.appendChild(legend)
  chart.appendChild(figure)
  return chart
}

new NorthData.Widget( myFigure, { 
  type: "barChart",
  handleItem: wrapChart
})

Dem Item-Handler werden die Überschrift der Grafik (z.B. "Gewinn") und das jeweilige Grafikelement übergeben. Der Rückgabewert ist das "neue Element", was dann in das Dokument eingefügt wird, oder null, falls nichts eingefügt wird (d.h., das komplette DOM-Handling von der Funktion übernommen wird). Beispiel siehe hier: https://www.northdata.de/widgetTestBarChart.html

Ist kein Item-Handler definiert, wird nur die Überschrift in einen <h2>-Tag gesetzt.

Im folgenden werden die verschiedenen Widgets im Detail vorgestellt, und die nur für sie jeweils verfügbaren Konfigurations-Optionen aufgelistet.

Stellt die wichtigsten Ereignisse zu einer Firma als Timeline dar. Beispielseite: https://www.northdata.de/widgetTestHistory.html

Stellt das Netzwerk einer Firma oder Person, d.h. die Verflechtungen mit Firmen (Beherrschungen, Komplementäre, etc.) und Personen (Geschäftsführer, Vorstände, etc.) als Graph dar.

Beispielseite: https://www.northdata.de/widgetTestGraph.html

Interaktive Liste von Publikationen (Handelsregister, Insolvenzregister) zur jeweiligen Firma.

Beispielseite: https://www.northdata.de/widgetTestPubTable.html

Die einzelnen Publikationen können durch Klick auf der Überschrift ein- und ausgeklappt werden. Semantische Konzepte wie Firmen oder Personen sind im HTML-Text markiert, und können per CSS in der Darstellung verändert werden.

Stellt finanzielle Kennzahlen als Balkendiagramm dar.

Beispielseite: https://www.northdata.de/widgetTestBarChart.html

Stellt finanzielle Kennzahlen (soweit verfügbar) als Tabelle dar.

Beispiel: https://www.northdata.de/widgetTestFinancials.html

Das Tabellen-"Basis-Styling" ist nur rudimentär, so dass Sie es problemlos nach Ihren Bedürfnissen anpassen können. Möchten Sie das nicht tun, kann ein erweitertes Styling über folgende CSS-Datei eingebunden werden:

https://www.northdata.de/css/styling.css

Stellt Bilanz und Gewinn-/Verlustrechnung (soweit verfügbar) als interaktive Tabelle dar. Summen-Zeilen können per Klick ein- und aufgeklappt werden.

Beispielseite: https://www.northdata.de/widgetTestSheet.html

Das Tabellen-"Styling" ist nur rudimentär, so dass sie es problemlos nach Ihren Bedürfnissen anpassen können. Möchten Sie das nicht tun, kann ein erweitertes Styling kann über folgende CSS-Datei eingebunden werden:

https://www.northdata.de/css/styling.css

Stellt die größten Positionen in den Ausgaben, Aktiva und Passiva des neuesten verfügbaren Jahresabschluss als untergliedertes Rechteck dar. Die Fläche der jeweiligen Boxen entspricht der Größe der Position, so dass die Größenverhältnisse auf den ersten Blick ersichtlich sind. In der Bilanz zusammengehörige Position erhalten "ähnliche" Farben.

Beispielseite: https://www.northdata.de/widgetTestDrillDown.html