Deshalb ist dein Code mit meinem nicht gegangen...
Das freut mich. Wie man sieht muss ich aber noch sehr viel lernen und üben.
Bedanke mich nochmals bei dir für deine Geduld und Mühe mir behilflich zu sein!!!!
Vielen Dank für deine rasche und ausführliche Hilfe.
Vielen Dank Sempervivum für deine sehr schnelle Hilfe und Geduld!
Kann es sein, dass dein Code einen Fehler enthält?
Habe es mit Hilfe mit deinem Lösungsansatz geschafft es zu lösen:
<!DOCTYPE html>
<html>
<head>
<title>chart.js Multiple graphs</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<!--https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#installation-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="myChart" width="100" height="100"></canvas>
<script>
var var1 = 555, var2 = 666, var3 = 777;
var ctx = document.getElementById("myChart");
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Line Dataset',
fill: false,
borderColor: "#c68d2a",
data: [
{ x: 0, y: 2.5 },
{ x: 50, y: 2.5 },
{ x: 60, y: 2.5 },
{ x: 70, y: 2.5 },
{ x: 100, y: 2.5 }
]
}, {
label: '2nd Scatter Dataset',
type: 'scatter',
backgroundColor: "#5d1414",
pointRadius: 5,
data: [
{ x: 60, y: 1 },
{ x: 60, y: 2 },
{ x: 60, y: 3 },
]
}]
},
options: {
scales: {
xAxes: [{
display: true, //this will remove all the x-axis grid lines
type: 'linear',
position: 'bottom',
ticks: {
display: true, //this will remove only the label
max: 100,
min: 0,
stepSize: 50
}
}],
yAxes: [{
ticks: {
display: true, //this will remove only the label
max: 4,
min: 0,
stepSize: 1
}
}]
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: function(value, context){
var index = context.dataIndex +1;
console.log(context.datasetIndex);
switch (index) {
case 1: return var1 + '-' + context.dataIndex;
case 2: return var2 + '-' + context.dataIndex;
case 3: return var3 + '-' + context.dataIndex;
}
}
}
}
}
});
</script>
</body>
</html>Habe aber nicht verstanden, warum ich zum context.dataIndex 1 dazuzählen muss, damit es funktioniert.
Habe ich etwa etwas falsch verstanden bzw. ist mein Code nur ein Zufall?
var index = context.dataIndex +1;Hallo,
vielen Dank für deiner Hilfe.
Klappt aber leider nicht ganz... :-/
Habe das hier gefunden. Habe leider nicht verstanden wie ich das ganze umsetzen muss.
Sorry, wie man sicher sieht, bin ich kein Experte.
Mit eurer Mühe und Geduld schaffe aber auch ich es.
Wow, großes Danke für deiner Mühe und Unterstützung.
Habe mich mit deinem Beispiel intensiv befasst und es meinen Vorstellungen weiter angepasst.
<!DOCTYPE html>
<html>
<head>
<title>chart.js Multiple graphs</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<!--https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#installation-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<canvas id="myChart" width="100" height="100"></canvas>
<script>
var ctx = document.getElementById("myChart");
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Line Dataset',
fill: false,
borderColor: "#c68d2a",
data: [
{ x: 0, y: 2.5 },
{ x: 50, y: 2.5 },
{ x: 60, y: 2.5 },
{ x: 70, y: 2.5 },
{ x: 100, y: 2.5 }
]
}, {
label: '2nd Scatter Dataset',
type: 'scatter',
backgroundColor: "#5d1414",
pointRadius: 5,
data: [
{ x: 60, y: 1 },
{ x: 60, y: 2 },
{ x: 60, y: 3 },
]
}]
},
options: {
scales: {
xAxes: [{
display: true, //this will remove all the x-axis grid lines
type: 'linear',
position: 'bottom',
ticks: {
display: true, //this will remove only the label
max: 100,
min: 0,
stepSize: 50
}
}],
yAxes: [{
ticks: {
display: true, //this will remove only the label
max: 4,
min: 0,
stepSize: 1
}
}]
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: function(value){
return value + ' (100%) '; //der value wird leider nicht angezeigt. Es steht "[object Object]".
}
}
}
}
});
</script>
</body>
</html>Eine Sache ist noch ausständig:
Ich möchte nämlich, wie bereits erwähnt, nur bei bei den braunen Punktwerten bei genau definierter vertikaler Position (x,y) den Inhalt von drei unterschiedlichen Variablen anzeigen.
Bei meinem Recharche im Netz bin ich zufällig auf die plugins gekommen und so habe ich als ersten Lösungsansatz (?) diese versucht in meinem Code einzubauen.
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: function(value){
return value + ' (100%) '; //der value wird leider nicht angezeigt. Es steht "[object Object]".
}
}
}Bei diesem Beispiel sollte als erster Lösungsansatz der value Wert der Punkte angezeigt werden, klappt aber leider auch nicht, ich bekomme die Ausgabe "[object Object]" neben dem braunen Punkten.
Am Ende der Versuche sollte aber nicht der Wert (x,y) der braunen Punkte angezeigt werden, sondern der Inhalt von drei unterschiedlichen Variablen. Zum Beispiel:
1. brauner Punkt (x1,y1) Wert der Variable ABC anzeigen
2. brauner Punkt (x1,y2) Wert der Variable XYZ anzeigen
Ich hoffe ich habe mich klar ausgedrückt und jemand kann mir bei der Umsetzung behilflich sein.
Vielen Dank schon im Voraus!!!
Super.
Vielen Dank schon im Voraus für deiner Hilfsbereitschaft und Geduld!
Liebe Grüße
Wie ich sehe, ist es nicht so einfach es verständlich zu erklären...
Ich hoffe ich bin hiermit klarer:
Die gelbe gerade Linie ist ein Graph (z.B. "Africa" oder "Europe") aus dem genannten Beispiel. Die y-Achse soll genau die Werte zB 1,2,3,... haben, innerhalb der sich auch die Werte der zb gelben Linie befinden. Im einfachsten Fall zB eine gerade horizontale Linie. (siehe Skizze, klappt bereits)
Zu meinem Problem:
Zum genannten Liniendiagramm möchte ich jetzt bei einem bestimmten x-Wert bei genau den Werten 1,2,3 vertikal wie in meiner Skizze ersichtlich die braunen Punktwerte anzeigen, welche aber andere Zahlendimensionen haben.
Vielen Dank für dein Interesse mir zu helfen.
Ich habe ein bestehendes Liniendiagramm (zB. dies), entspricht meiner Skizze als Beispiel der orangen Linie, und ich möchte in diesem Diagramm die braunen Punktwerte anzeigen.
Ich hoffe die Aufgabenstellung ist klar ansonsten bitte einfach nachfragen.
Bedanke mich schon im Voraus für eurer Unterstützung bei der Umsetzung.
Hallo Leute,
ich möchte z.B. ausgehend von diesem Beispiel mein Liniendiagramm nach den Vorstellungen meiner Skizze (siehe Anlage) anpassen.
Konkret möchte ich ausgehend von meiner Skizze bei einem bestimmten x-Wert (z.B. 1) die brauen Punktwerte bei bestimmten y-Werten (1,2,3) auf dem Dagramm darstellen, wobei aber die Punktwerte wie ersichtlich ganz andere Zahlendimensionen haben .
Die orange Linie ist bestimmte Linie, welche angezeigt werden soll (das klappt bereits!).
Hat jemand von euch eine Ahnung ob und wie ich das umsetzen kann?
Bedanke mich schon im Voraus für eure Hilfe!
Liebe Grüße
wow, sieht ja sehr elegant aus!!!
ein großes Danke!
dein demo Beispiel funktioniert auch mit node Red
Jetzt werde ich versuchen dein Beispielprogramm zu verstehen und es versuchen an meine Bedürfnisse anzupassen
Nochmals großes Danke für dein Bespiel und der raschen Rückantwort!!!
Vielen Dank für deine rasche Antwort!
Klingt schon mal viel versprechend
Ich gehe davon aus, dass es gehen sollte. Einen Link in der passenden Richtung(
) habe ich gefunden. Muss mich noch genauer einlesen bzw. informieren.
Hallo Sempervivum!
Vielen Dank für das Interesse mir zu helfen.
Ich bin ein Anfänger in den Programmiersprachen html und javascript.
Da ich in Node Red Funktionen mit javascript programmieren kann nehme ich an, dass es auch Eventlistener und Trigger gibt. Muss mich einlesen... Für mich ist es alles Neuland. War schon froh, wenn ich es geschafft habe die Tabelle mit den Daten auf dem Bildschirm auszugeben.
Hat niemand ein funktionierendes Beispiel ähnlich meiner Problemstellung an dem man sich orientieren kann? Oder passende Quellen für eventuelle Unterlagen?
Vielen Dank an euch!
Vielen Dank für dein Interesse mir zu helfen!
Ich greife mit dem Programm node red auf die Daten einer Internetseite (json-Format) zu. (klappt)
Die Tabelle habe ich auf Basis diesem Beispiel aufgebaut und mit dem Programm node red auf das Dashboard angezeigt. (klappt)
Die Tabelle wird mit den eingelesen Werten gefüllt. (klappt)
Nun möchte ich wie bereits erwähnt in verschiedenen Zellen nicht dessen numerischen Wert anzeigen sondern diesen Wert durch die Anzahl von Icons ersetzen. (zb. statt der Nummer 2, zb 3 Kreise (zb fa circle) anzeigen.
Hallo Leute,
Habe eine Tabelle, welche mit Daten gefüllt wird.
Nun möchte ich bei einer Zelle der Tabelle abhängig eines Wertes nicht dessen Wert anzeigen sondern ein Icon.
Dh. zB ist der Wert 3, soll es nicht drei als Nummer anzeigen sondern zB drei Kreise (zb: fa circle Icon) anzeigen; ist der Wert 1, soll es nicht 1 als Nummer anzeigen sondern zB. 1 Kreis usw.
Habe leider keine Ahnung wie ich das umsetzen kann...Auch bei meiner Recharche im Netz bin ich nicht weitergekommen...:-/
Ich hoffe ich habe meine Problemstellung verständlich beschrieben und hoffe ihr könnt mir helfen.
Vielen Dank für eurer Hilfe!!!!
Wow
Super, ein rießen großen Danke für eure raschen und sehr hilfsreichen Antworten!!!!
Vielen Dank.
Vielen Dank für die sehr rasche Antwort.
Der Slider wechselt die Bilder, das stimpt.
Die Bilder aber im Slider haben trasparente Bereiche und da möchte ich gerne ein Hintergrundbild fix laden und dabei für den bestmöglichsten Kontrast mit der Trasparenz /Helligkeit des Hintergrundbildes im Quellcode spielen.
Sorry für die dumme Frage, wie soll das konkret aussehen? kann ich auch mit der Größe / Trasparenz / Helligkeit spielen?
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
background-image: "img_test_wide.jpg";
position: relative;
margin: auto;Hallo Experten,
wie kann ich bei einer Slideshow (siehe Code) ein bestimmtes Hintergundbild genau hinter den anderen Bildern der Slideschow einbauen und dabei auch die Trasparenz des Bildes im Code festlegen?
Habe leider zu meinem Problem leider nichts passendes gefunden, was ein Anfänger auf anhieb versteht...
Sorry, ich bin ein kompletter Neuling in html / javascript.
Vielen Dank bereits im Voraus für eure Tipps bzw Hilfsbereitschaft!