html5 canvas selbst zeichnen

[jampr]

Hi zusammen,

ich habe mal versucht, mir ein eigenes Balkendiagramm zu erzeugen. Allerdings scheitere ich schon an diesem Beispiel.

Wenn ich die einzelnen Codestücke in einem basic-HTML-Widget zusammenfüge, bekomme ich nur die Hintergrundstreifen in einem kleinen Bereich links oben dargestellt. Lustigerweise funktioniert sowohl die Positionierung, als auch die Darstellung in der VIS-Administration einwandfrei.

Hat jemand nen Tipp oder Beispiel, wie ich das funktionsfähig bekomme?

Ich habe mir auch schon flot und grafana angeschaut. Erfüllen aber beide nicht meine Wünschen.

[jampr]

so, ich habe es nun selbst geschafft, das in einem basicHTML-Widget darzustellen. Kann ich irgendwie aus so einem Script-Block ein sendTo benutzen? Funktioniert 'einfach so' leider nicht

<script>
var werte = ['30','15','7'];
</script>


<script>

var dist= 15;
var DoM = daysInMonth('07','2020');
var font = 10;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillRect(10, 2, 1, 310);
ctx.fillRect(1, 298, DoM *dist +8, 1);

for (var i = 1; i < DoM +1; ++i) {
ctx.save();

var text, x, y;

text = i;

//Set font size before measuring
ctx.font = font + 'px Arial, sans-serif';

//Get width of text
var metrics = ctx.measureText(text);

//Set the drawing coordinates
x = font / 2 + dist*i;
y = 308;
//Style
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = "bottom";
//Rotate the context and draw the text

ctx.translate(x, y);
ctx.rotate(-Math.PI / 2);
ctx.fillText(text, 0, font / 2);


ctx.restore();
}

for (var i = 1; i < DoM +1; ++i) {


if(i-1 in werte){
ctx.fillRect(dist * i, 298, 8,  -werte[i-1]);
}else{
 ctx.fillRect(dist * i, 298, 8,  0);
}
  
}


function daysInMonth (month, year) { 
                return new Date(year, month, 0).getDate(); 
} 

</script>


<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000;">
</canvas>

[jampr]

@jampr said in html5 canvas selbst zeichnen:

                                                                                                                                                                        <script>                                                                                                                                                                            var werte = ['30','15','7'];                                                                                                                                                                            </script>

kann mir jemand vielleicht noch sagen, wie ich die Werte aus einem Datenpunkt da rein bekomme?

var werte = getState("javascript.0.test.list_array").val;

funktioniert leider nicht.