Daten sind heutzutage überall verfügbar, sei es in einer einfachen Textdatei, einer REST-API, einem Online-Google-Sheet ... Sie nennen es! Diese Vielfalt an Kontexten macht den Aufbau von Diagrammen zu mehr als nur einer Datenbank in Ihrem lokalen Projekt - wo Daten sind, gibt es einen Weg.
Das ist so ziemlich das, was wir in diesem Beitrag behandeln werden: JavaScript-Datenvisualisierungen mit Daten aus verschiedenen Quellen erstellen.
Wenn Sie mitmachen und eine der hier behandelten Visualisierungen erstellen möchten, verwenden wir Chart.js. Besorgen Sie sich das also und integrieren Sie es in Ihre eigene Umgebung.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>Quelle 1: HTML-Datentabelle
Viele, viele Websites haben Datentabellen, und warum nicht? Sie sind eine großartige Möglichkeit, Daten anzuzeigen, und dafür wurden sie entwickelt. Aber wäre es nicht noch besser, wenn Sie eine Visualisierung hätten, die von den darin enthaltenen Daten angetrieben wird – und das mit wenig zusätzlichem Aufwand?
Mit ein wenig JavaScript können die Daten aus einer HTML-Tabelle aus dem HTML isoliert und für ein Diagramm vorbereitet werden. Sehen Sie sich die folgende Datentabelle an
| Jahr | Verkaufte Artikel | Umsatz ($) | Gewinn ($) |
|---|---|---|---|
| 2016 | 10 | 200 | 89 |
| 2017 | 25 | 550 | 225 |
| 2018 | 55 | 1200 | 600 |
| 2019 | 120 | 2450 | 1100 |
Sie enthält Verkaufsdaten für ein Unternehmen. Wenn wir das nun grafisch darstellen könnten, wäre es sowohl visuell ansprechend als auch hilfreich für die Benutzer, um Erkenntnisse zu gewinnen. Machen wir es also!
Zunächst definieren wir eine Funktion für unser Diagramm. Diese stammt direkt aus der Chart.js-Bibliothek. Es lohnt sich also, diese mit der Dokumentation abzugleichen, falls etwas unklar sein sollte. Ich habe einige Kommentare hinzugefügt, um Schlüsselbereiche hervorzuheben.
function BuildChart(labels, values, chartTitle) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels, // Our labels
datasets: [{
label: chartTitle, // Name the series
data: values, // Our values
backgroundColor: [ // Specify custom colors
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [ // Add custom color borders
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1 // Specify bar border width
}]
},
options: {
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behavior of full-width/height
}
});
return myChart;
}Nachdem wir nun eine Funktion zum Erstellen eines Diagramms für die Tabellendaten haben, schreiben wir das HTML für die Tabelle und fügen ein Canvas-Element hinzu, das Chart.js zur Injektion seiner Diagramm-Magie verwenden kann. Dies sind exakt dieselben Daten wie im obigen Tabellenbeispiel.
<table class="table" id="dataTable">
<thead>
<th>Year</th>
<th>Items Sold</th>
<th>Turnover ($)</th>
<th>Profit ($)</th>
</thead>
<tbody>
<tr>
<td>2016</td>
<td>10</td>
<td>200</td>
<td>89</td>
</tr>
<tr>
<td>2017</td>
<td>25</td>
<td>550</td>
<td>225</td>
</tr>
<tr>
<td>2018</td>
<td>55</td>
<td>1200</td>
<td>600</td>
</tr>
<tr>
<td>2019</td>
<td>120</td>
<td>2450</td>
<td>1100</td>
</tr>
</tbody>
</table>
<div class="chart">
<canvas id="myChart"></canvas>
</div>Dann müssen wir die Tabelle mit Vanilla JavaScript in JSON parsen. Dies wird von Chart.js verwendet, um die Diagramme und Grafiken zu füllen.
var table = document.getElementById('dataTable');
var json = []]; // First row needs to be headers
var headers =[];
for (var i = 0; i < table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
}
// Go through cells
for (var i = 1; i < table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j = 0; j < tableRow.cells.length; j++) {
rowData[headers[j]] = tableRow.cells[j].innerHTML;
}
json.push(rowData);
}
console.log(json);Die letzte Zeile haben wir hinzugefügt, damit wir die Ausgabe in der DevTools-Konsole überprüfen können. Hier ist, was in die Konsole protokolliert wird
Perfekt! Unsere Tabellenüberschriften werden zu Variablen und den Inhalten der Tabellenzellen zugeordnet.
Alles, was noch zu tun ist, ist, die Jahresbeschriftungen und die verkauften Artikelwerte den Arrays zuzuordnen (was Chart.js für sein Datenobjekt benötigt) und die Daten dann in die Diagrammfunktion zu übergeben.
Dieses Skript ordnet die JSON-Werte einem Array von Jahren zu. Wir können es direkt nach der vorherigen Funktion hinzufügen.
// Map JSON values back to label array
var labels = json.map(function (e) {
return e.year;
});
console.log(labels); // ["2016", "2017", "2018", "2019"]
// Map JSON values back to values array
var values = json.map(function (e) {
return e.itemssold;
});
console.log(values); // ["10", "25", "55", "120"]Wenn wir die Funktion BuildChart aus unserem ersten Snippet aufrufen (einschließlich eines Namens für das Diagramm), erhalten wir eine schöne Visualisierung der Daten aus der HTML-Tabelle.
var chart = BuildChart(labels, values, "Items Sold Over Time");Und das war's! Die Daten des Diagramms wurden nun isoliert, in die JavaScript-Visualisierung übergeben und gerendert.
Sehen Sie den Pen
BarChart Loaded From HTML Table von Danny Englishby (@DanEnglishby)
auf CodePen.
Quelle 2: Eine Echtzeit-API
Es gibt viele, viele öffentliche APIs auf der Welt, von denen viele reich an interessanten und nützlichen Daten sind. Nutzen wir eine davon, um zu demonstrieren, wie Echtzeitdaten zum Füllen eines Diagramms verwendet werden können. Ich werde die Forbes 400 Rich List API verwenden, um die Top 10 der reichsten Menschen der Welt zu grafisch darzustellen. Ich weiß, cool, oder?! Reichenranglisten finde ich immer interessant, und diese API liefert noch viel mehr Daten. Aber für den Moment werden wir Daten anfordern, um ein Diagramm mit Namen und Echtzeit-Nettovermögen mit reinem JavaScript anzuzeigen!
Zuerst möchten wir wieder eine Diagrammfunktion definieren, diesmal mit ein paar mehr Optionen.
function BuildChart(labels, values, chartTitle) {
var data = {
labels: labels,
datasets: [{
label: chartTitle, // Name the series
data: values,
backgroundColor: ['rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
],
}],
};
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
responsive: true, // Instruct chart JS to respond nicely.
maintainAspectRatio: false, // Add to prevent default behavior of full-width/height
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '$ Billion'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Name'
}
}]
},
}
});
return myChart;
}Als Nächstes benötigen wir dasselbe HTML-Canvas-Element, auf dem das Diagramm gerendert wird.
<div class="chart" style="position: relative; height:80vh; width:100vw">
<canvas id="myChart"></canvas>
</div>Jetzt holen wir uns Echtzeitdaten. Sehen wir uns an, was die Forbes-API in der Konsole zurückgibt.
Wie Sie anhand des zurückgegebenen JSONs sehen können, gibt es eine Menge reichhaltiger Informationen, die in ein Diagramm eingespeist werden können. Machen wir also unsere Ranglisten!
Mit etwas leichtem JavaScript können wir die Daten von der API abrufen, die gewünschten Werte auswählen und den Array-Variablen zuordnen und schließlich unsere Daten übergeben und das Diagramm rendern.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.response);
// Map JSON labels back to values array
var labels = json.map(function (e) {
return e.name;
});
// Map JSON values back to values array
var values = json.map(function (e) {
return (e.realTimeWorth / 1000); // Divide to billions in units of ten
});
BuildChart(labels, values, "Real Time Net Worth"); // Pass in data and call the chart
}
};
xhttp.open("GET", "https://forbes400.herokuapp.com/api/forbes400?limit=10", false);
xhttp.send();
Sehen Sie den Pen
Chart Loaded From RichListAPI von Danny Englishby (@DanEnglishby)
auf CodePen.
Quelle 3: Ein Google Sheet
Bisher haben wir uns Daten in Standard-HTML-Tabellen und APIs angesehen, um Diagramme zu füllen. Aber was ist, wenn wir bereits ein vorhandenes Google Sheet mit vielen Daten haben? Nun, das können wir auch verwenden, um ein Diagramm zu erstellen!
Zunächst gibt es einige Regeln für den Zugriff auf ein Google Sheet
- Das Google Sheet muss veröffentlicht sein
- Das Google Sheet muss öffentlich sein (d.h. nicht auf private Ansicht eingestellt)
Solange diese beiden Punkte zutreffen, können wir auf ein Google Sheet in Form von JSON zugreifen, was bedeutet, dass wir es natürlich grafisch darstellen können!
Hier ist ein Google Sheet mit einigen fiktiven Daten, die ich öffentlich veröffentlicht habe. Es besteht aus drei Datenfeldern: MachineId, Date und ProductsProduced.
Wenn wir die URL des Sheets nehmen, notieren wir alles nach dem letzten Schrägstrich
https://docs.google.com/spreadsheets/d/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFgDies ist die Sheet-Identität und was wir für die GET-Anfrage benötigen, die wir an Google senden. Um eine GET-Anfrage für JSON zu stellen, fügen wir diesen String in die URL in eine andere URL ein.
https://spreadsheets.google.com/feeds/list/[ID GOES HERE]/od6/public/full?alt=jsonDas ergibt uns die folgende URL
https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=jsonUnd hier ist die Antwort, die wir in der Konsole erhalten
Der wichtige Teil ist das feed.entry-Objekt-Array. Dies enthält wichtige Sheet-Daten, die wie folgt aussehen, wenn wir sie genauer betrachten
Beachten Sie die rot unterstrichenen Elemente. Die Google Sheets API hat jedem Spaltennamen gsx$ vorangestellt (z.B. gsx$date). Genau so zerlegen wir die Daten aus dem Objekt, indem wir diese eindeutig generierten Namen verwenden. Da wir das wissen, ist es an der Zeit, die Daten in einige isolierte Arrays einzufügen und sie an unsere Diagrammfunktion zu übergeben.
function BuildChart(labels, values, chartTitle) {
var data = {
labels: labels,
datasets: [{
label: chartTitle, // Name the series
data: values,
backgroundColor: ['rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
'rgb(54, 162, 235)',
],
}],
};
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
responsive: true, // Instruct chart js to respond nicely.
maintainAspectRatio: false, // Add to prevent default behavior of full-width/height
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Produced Count'
}
}]
},
}
});
return myChart;
}Und, Sie ahnen es, als nächstes kommt das Canvas-Element
<div class="chart" style="position: relative; height:80vh; width:100vw">
<canvas id="myChart"></canvas>
</div>...dann die GET-Anfrage, die Zuordnung unserer Beschriftungs- und Wertarrays und schließlich das Aufrufen des Diagramms mit den Daten.
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var json = JSON.parse(this.response);
console.log(json);
// Map JSON labels back to values array
var labels = json.feed.entry.map(function (e) {
return e.gsx$date.$t;
});
// Map JSON values back to values array
var values = json.feed.entry.map(function (e) {
return e.gsx$productsproduced.$t;
});
BuildChart(labels, values, "Production Data");
}
};
xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1ySHjH6IMN0aKImYcuVHozQ_TvS6Npt4mDxpKDtsFVFg/od6/public/full?alt=json", false);
xhttp.send();Und, bumm!
Sehen Sie den Pen
Chart Loaded From a Google Sheet von Danny Englishby (@DanEnglishby)
auf CodePen.
Was werden Sie mit Daten machen?
Sie haben wahrscheinlich verstanden, dass es eine Vielzahl von Möglichkeiten gibt, Daten für ansprechend aussehende Diagramme und Grafiken zu erhalten. Solange wir einige formatierte Zahlen und eine Datenvisualisierungsbibliothek haben, haben wir eine Menge Macht zur Verfügung.
Hoffentlich denken Sie jetzt darüber nach, wo Sie Daten haben könnten und wie Sie sie in ein Diagramm einfügen können! Wir haben hier nicht einmal alle Möglichkeiten abgedeckt. Hier sind noch ein paar weitere Ressourcen, die Sie nutzen können, jetzt wo Sie die Diagramm-Fähigkeiten drauf haben.