JavaScript/Tutorials/Funktionsplotter

Es wird ein Script vorgestellt, das mathematische Funktionen über Inputelemente einliest und grafisch darstellt. Für die grafische Darstellung wird das Canvas-Element verwendet.

Es gibt auch eine Version des Funktionsplotters, die das SVG-Element verwendet.

Das Script besteht aus dem Grafikobjekt grafik, dem Plotobjekt plot und dem Funktionsplotter.

Das Grafikobjekt

Das Grafikobjekt ist die Schnittstelle zur Canvas-API.

SW.grafik(grafikelement)

legt das Canvas-Element an.

grafikelement: ID des Elements oder Referenz auf das Element, in dem das Canvas-Element angelegt wird.

SW.grafik definiert die Methoden:

.setwidth(width)

setzt die Linienstärke.

width: Linienstärke in Pixeln.

.line(xs,ys,xe,ye,color)

zeichnet eine Linie von (xs,ys) nach (xe,ye) in Farbe color.

xs,ys: Koordinaten des Startpunkts in Pixeln,

xe,ye: Koordinaten des Endpunkts in Pixeln,

color: Linienfarbe im css-Format.

.polyline(points,color)

zeichnet einen Linienzug.

points: Array der Form [{x: xwert, y: ywert},{…},…] mit den Koordinaten der Stützpunkte in Pixeln.

color: Linienfarbe im css-Format.

.polyfill(points,color,a)

zeichnet einen Linienzug. Die vom Linienzug umschlossene Fläche wird eingefärbt.

points: Array der Form [{x: xwert, y: ywert},{…},…] mit den Koordinaten der Stützpunkte in Pixeln.

color: Füllfarbe im css-Format.

alpha: Transparenz, 0<=alpha<=1

.text(x,y,size,color,text,align,direction)

gibt Text aus.

x,y: Koordinaten des Bezugspunkts in Pixeln,

size: Texthöhe im css-Format

color: Linienfarbe im css-Format.

align: String aus zwei Buchstaben, gibt die Lage des Bezugspunkts relativ zum Text an. Der erste Buchstabe darf die Werte l, m, oder r annehmen für links, mitte oder rechts. Der zweite Buchstabe darf die Werte o, m oder u annehmen für oben, mitte oder unten.

direction: gibt die Laufrichtung des Textes an, darf die Werte h und v für horizontal und vertikal annehmen.

.del()

löscht die Grafik.

Das Grafikobjekt

"use strict";

var SW = window.SW || {};

// Das Grafikobjekt
SW.grafik = function(grafikelement) {
  this.method = "canvas";
  // Canvas in Größe des "grafikelement" anlegen
  if(typeof grafikelement == "string") grafikelement = document.getElementById(grafikelement);
  this.w = grafikelement.offsetWidth;
  this.h = grafikelement.offsetHeight;
  var cv = document.createElement("canvas");
  cv.width = this.w;
  cv.height = this.h;
  grafikelement.appendChild(cv);
  var context = cv.getContext("2d"); 
  context.lineWidth = 1;
  context.globalAlpha = 1.0;
  
  // Linienstärke setzen
  this.setwidth = function(width) {
    context.lineWidth = width;
  } // setwidth
  
  // Linie von (xs,ys) nach (xe,ye) in Farbe color zeichnen
  this.line = function(xs,ys,xe,ye,color) {
    context.strokeStyle = color;
    context.beginPath();
    context.moveTo(Math.round(xs),Math.round(this.h-ys));
    context.lineTo(Math.round(xe),Math.round(this.h-ye));
    context.stroke();
  } // line

  // Polylinie mit den Werten in points in Farbe color zeichnen
  this.polyline = function(points,color) { 
    context.strokeStyle = color;
    context.beginPath();
    context.moveTo(Math.round(points[0].x),this.h-Math.round(points[0].y));
    for(var i=1,l=points.length;i<l;i++) 
      context.lineTo(Math.round(points[i].x),this.h-Math.round(points[i].y));
    context.stroke();
  } // polyline

  // Polylinie mit den Werten in points zeichnen
  // Die von der Polylinie umschlossene Fläche wird in Farbe color mit Alphawert alpha eingefärbt
  this.polyfill = function(points,color,alpha) { 
    context.fillStyle = color;
    context.globalAlpha = alpha;
    context.beginPath();
    context.moveTo(Math.round(points[0].x),this.h-Math.round(points[0].y));
    for(var i=1,l=points.length;i<l;i++) 
      context.lineTo(Math.round(points[i].x),this.h-Math.round(points[i].y));
    context.fill();
    context.globalAlpha = 1.0;
  } // polyfill
  
  // Text an (x,y) ausgeben
  // size: Schriftgröße
  // text: Text
  // align: Bezug für (x,y), zwei Buchstaben, z.B. lu für links unten, s. case
  // diretion: Textrichtung: v für vertikal, sonst horizontal
  this.text = function(x,y,size,color,text,align,direction) {
    var align_h = "m";
    var align_v = "m";
    if(align && align.length) {
      align_h = align.substr(0,1);
      if(align.length>1) align_v = align.substr(1,1);
    }
    context.save();
    context.translate(x,this.h-y);
    if(direction && direction=="v") 
      context.rotate(1.5*Math.PI);
    switch(align_h) {
      case "l": context.textAlign = "start"; break;
      case "m": context.textAlign = "center"; break;
      case "r": context.textAlign = "end"; break;
      default:  context.textAlign = "center"; break;
    }
    switch(align_v) {
      case "o": context.textBaseline = "top" ; break;
      case "m": context.textBaseline = "middle" ; break;
      case "u": context.textBaseline = "bottom" ; break;
      default:  context.textBaseline = "middle" ; break;
    }
    context.font = size + " sans-serif";
    context.fillStyle = color;
    context.fillText(text,0,0);
    context.restore();
  } // text

  // Canvas löschen
  this.del = function() {
    context.clearRect(0, 0, this.w, this.h);
  } // del
} // grafik

Das folgende Beispiel zeigt die Anwendung des Grafikobjekts.

Beispiel ansehen …

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel: Test Grafikobjekt auf Canvas-Basis</title>

<style>
  #plotarea { background-color:#ffffff; width:90%; height:80vh; border: 1px solid black }
</style>

<script src="grafik_canvas.js"></script>
<script>
"use strict";
window.addEventListener("DOMContentLoaded",function() {
  var grafik = new SW.grafik("plotarea");
  grafik.line(20,20,grafik.w-20,40,"black");
  var werte = [{x:20 ,y:25 },{x:15 ,y:grafik.h-10 },{x:grafik.w-10 ,y:grafik.h-50 },{x:grafik.w-30 ,y:100 },{x:grafik.w-100 ,y:50 }];
  grafik.setwidth(3);
  grafik.polyline(werte,"green");
  werte = [{x:70 ,y:70 },{x:70 ,y:grafik.h-70 },{x:grafik.w-70 ,y:grafik.h-70 },{x:grafik.w-70 ,y:70 }];
  grafik.polyfill(werte,"red",0.2);
  grafik.text(70,70,"0.8em","blue","Text_ro","ro","h"); // Referenzpunkt rechts oben
  grafik.text(70,70,"1em","blue","Text_lu","lu","h"); // Referenzpunkt links unten
  grafik.text(grafik.w-70,grafik.h/2,"1.5em","blue","Text_mm","mm","v"); // Referenzpunkt mitte mitte
});
</script>

</head>

<body>
  <h1>Beispiel: Test Grafikobjekt auf Canvas-Basis</h1>
  <figure id="plotarea"></figure>
</body>
</html>

Das Plotobjekt

Das Plotobjekt erstellt das Diagramm mit Achsen und Achsenbeschriftung.

SW.plot(feld,xstr,ystr)

legt den Bereich für das Diagramm an.

Feld: ID des Elements oder Referenz auf das Element, in dem das Diagramm angelegt wird.

xstr, ystr: Bezeichner der Objektelemente mit den x- und y-Werten im Datenarray. Defaultwerte sind x und y. Das Datenarray sieht dann so aus: [{x: xwert, y: ywert}{...},...]

SW.plot definiert die Methoden:

.scale(daten)

ermittelt zu den Werten im Array daten die kleinsten und größten Werte.

daten: Array der Form [{xstr: xwert, ystr: ywert}{...},...]

.clear()

löscht das Diagramm

.frame(x0,y0,xtext,ytext)

legt das Achsenkreuz an.

x0, y0: Koordinaten der linken unteren Ecke in Pixel.

xtext, ytext: Beschriftung der Achsen.

.plot(daten,color) Plottet die Daten.

daten: Array der Form [{xstr: xwert, ystr: ywert}{...},...]

color: Linienfarbe im css-Format.

Weitere Eigenschaften und deren Defaultwerte:

.ticwidth 

Linienstärke der Gitterlinien (1)

.linewidth 

Linienstärke der Plotlinien (1)

.borderwidth 

Linienstärke des Rahmens um den Plot (2)

.framecol 

Farbe des Rahmens ("black")

.gridcol 

Farbe der Gitterlinien ("gray")

.labelcol 

Farbe der Achsenbeschriftung ("black")

.fillopac 

Deckkraft der Füllfarbe unter der Plotlinie (0.1)

Das Plotobjekt

"use strict";

var SW = window.SW || {};

// Math.log10 wird noch nicht von allen Browsern unterstützt
if(!Math.log10) Math.log10 = function(x) { return Math.log(x)/Math.LN10; };

// Das Plotobjekt
// feld ist das Objekt bzw. dessen Id, in dem das Diagramm erstellt werden soll
// xstr und ystr geben die Bezeichner der Objektelemente mit den x- und y-Werten im Datenarray an.
// Defaultwerte sind x und y. Das Datenarray sieht dan so aus: [{x:xwert,y:ywert}{...},...]
SW.plot = function(feld,xstr,ystr) {
  // Defaultwerte
  this.ticwidth = 1;
  this.linewidth = 1;
  this.borderwidth = 2;
  this.framecol = "black";
  this.gridcol = "gray";
  this.labelcol = "black";
  this.fillopac = 0.1;
  
  // Plotbereich anlegen
  if(typeof feld == "string") feld = document.getElementById(feld);
  feld.innerHTML = "";

  // Einige Variablen
  var xobj = xstr?xstr:"x";
  var yobj = ystr?ystr:"y";
  var xmin=0,xmax=0,ymin=0,ymax=0;
  var xfak=0,yfak=0;
  var dx,dy,fx,fy;
  var gr = null;

  // Zu den Werten in daten xmin, xmax, ymin und ymax ermitteln
  this.scale = function(daten) {
    if(xmin==xmax) { // Startwerte beim ersten Datensatz
      xmax = xmin = daten[0][xobj];
      ymax = ymin = daten[0][yobj];
    }
    for(var i=1;i<daten.length;i++) {
      var t = daten[i];
      if(t[xobj]<xmin) xmin = t[xobj];
      if(t[xobj]>xmax) xmax = t[xobj];
      if(t[yobj]<ymin) ymin = t[yobj];
      if(t[yobj]>ymax) ymax = t[yobj];
    }
  } // scale
  
  // Plotbereich leeren
  this.clear = function() {
    feld.innerHTML = "";
    xmax = xmin = ymax = ymin = xfak = yfak = 0;
  } // clear

  // Achsenkreuz, Tics und Beschriftung, linke untere Ecke bei (x0,y0)
  // xtext und ytext sind die Beschriftungen der Achsen
  this.frame = function(x0,y0,xtext,ytext) {
    this.x0 = x0;
    this.y0 = y0;
    // Den Bereich für das Diagramm anlegen
    feld.innerHTML = "";
    gr = new SW.grafik(feld);
    this.method = gr.method;
    // Achsenbeschriftungen
    if(xtext.length) gr.text((gr.w-x0)/2+x0,0,".9em",this.labelcol,xtext,"mu","h"); 
    if(ytext.length) gr.text(10,(gr.h-y0)/2+y0,".9em",this.labelcol,ytext,"mm","v");
    // xmin und xmax auf die nächst kleinere bzw. größere "glatte" Zahl runden und den 
    // Abstand der Tics auf glatte Zahlen (1 2 5 0) für x-Achse legen
    if(xmax==xmin) { xmin -= 0.5; xmax += 0.5; }
    dx = (xmax - xmin)/100;    
    xmin -= dx; xmax += dx;
    dx = xmax - xmin;
    fx = Math.pow(10,Math.floor(Math.log10(dx))-1); // Die Größenordnung ermitteln
    xmin = Math.floor(xmin/fx)*fx;
    xmax = Math.ceil(xmax/fx)*fx;
    xfak = (gr.w-x0)/(xmax-xmin);
    var tx = ticdist(100*dx/gr.w);
    var mxmin = Math.ceil(xmin/tx)*tx;
    // Tics und Zahlen an der x-Achse
    gr.setwidth(this.ticwidth);
    for(var x=mxmin;x<=xmax;x+=tx) {
      var xx = (x-xmin)*xfak + x0;
      gr.line(xx,y0,xx,gr.h,this.gridcol);
      if(xtext.length && xx<(gr.w-5) && xx>5) gr.text(xx,y0-2,".8em",this.labelcol,myround(x,tx),"mo","h");
    }
    // ymin und ymax auf die nächst kleinere bzw. größere "glatte" Zahl runden und den 
    // Abstand der Tics auf glatte Zahlen (1 2 5 0) für x-Achse legen
    if(ymax==ymin) { ymin -= 0.5; ymax += 0.5; }
    dy = (ymax - ymin)/100; 
    ymin -= dy; ymax += dy;
    dy = ymax - ymin;
    fy = Math.pow(10,Math.floor(Math.log10(dy))-1); // Die Größenordnung ermitteln
    ymin = Math.floor(ymin/fy)*fy;
    ymax = Math.ceil(ymax/fy)*fy;
    yfak = (gr.h-y0)/(ymax-ymin);
    var ty = ticdist(gr.h<250 ?  50*dy/gr.h : 100*dy/gr.h);
    var mymin = Math.ceil(ymin/ty)*ty;
    // Tics und Zahlen an der y-Achse
    for(var y=mymin;y<=ymax;y+=ty) {
      var yy = (y-ymin)*yfak + y0;
      gr.line(x0,yy,gr.w,yy,this.gridcol);
      if(ytext.length && yy<(gr.h-5) && yy>5) gr.text(x0-2,yy,".8em",this.labelcol,myround(y,ty),"rm","h");
    }
    gr.setwidth(this.borderwidth);
    gr.polyline([
      {x:x0, y: y0},
      {x:gr.w-this.borderwidth, y:y0},
      {x:gr.w-this.borderwidth, y:gr.h-this.borderwidth},
      {x:x0, y:gr.h-this.borderwidth},
      {x:x0, y:y0}],
      this.framecol);
  } // frame

  // Daten Plotten
  // daten: Datenarray mit Objekten mit den x- und y-Werten
  // color Diagrammfarbe
  this.plot = function(daten,color) {
    var arr=[];
    for(var i=0,l=daten.length;i<l;i++)
      arr.push({x:(daten[i][xobj]-xmin)*xfak+this.x0, y:(daten[i][yobj]-ymin)*yfak+this.y0});
    if(this.fillopac>0) {
      var fillline;
      if(ymax*ymin<=0) fillline = -ymin*yfak+this.y0 ; 
      else if(ymin>0) fillline = 1+this.y0;
      else fillline = gr.h-1;
      arr.push({x:(daten[l-1][xobj]-xmin)*xfak+this.x0,y:fillline});
      arr.push({x:(daten[0][xobj]-xmin)*xfak+this.x0,y:fillline});
      arr.push({x:(daten[0][xobj]-xmin)*xfak+this.x0,y:(daten[0][yobj]-ymin)*yfak+this.y0});
      gr.polyfill(arr,color,this.fillopac);
      arr.length -= 3;
    }
    gr.setwidth(this.linewidth);
    gr.polyline(arr,color);
  } // plot
  
  // Hilfsfunktionen zum Runden
  var myround = function(z,d) { 
    var l10 = Math.floor(Math.log10(d));
    var f = Math.pow(10,l10); 
    var zz = Math.round(z/f)*f;
    var zzz = Number(zz.toPrecision(15)).toString(10);
    return zzz; 
  }
  
  // Hilfsfunktion zum berechnen des Abstands der Achsen-Tics, Abstände auf 1 2 5 0 gerundet
  var ticdist = function(td) { 
    var td10 = Math.pow(10,Math.floor(Math.log10(td)));
    td = Math.round(td/td10);
    td = Number(String(td).replace(/3/,"2").replace(/[4567]/,"5").replace(/[89]/,"10"));
    td *= td10;
    return td;
  } // ticdist
} // plot

Das folgende Beispiel zeigt die Anwendung des Plotobjekts:

Beispiel ansehen …

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel: Test Plotobjekt auf Canvas-Basis</title>

<style>
  #plotarea { background-color:#ffffff; margin:0; height:calc(100vh - 7em); min-height:300px; }
</style>

<script src="grafik_canvas.js"></script>
<script src="plot.js"></script>
<script>

"use strict";

window.addEventListener("DOMContentLoaded",function() {
  var daten = [],
    xmin = -Math.PI,
    xmax = Math.PI,
    npt = 1000;
  var dx = ( xmax - xmin ) / npt;    
  for(var x=xmin;x<=xmax;x+=dx) daten.push( { x: x, y: Math.sin(x) } );
  var plt = new SW.plot("plotarea") ;
  plt.scale(daten);
  plt.frame(50,35,"x","sin(x)");
  plt.plot(daten,"red");
});
</script>

</head>
<body>
  <h1>Beispiel: Test Plotobjekt auf Canvas-Basis</h1>
  <figure id="plotarea"></figure>
</body>
</html>

Der Funktionsplotter

Der Funktionsplotter befindet sich im Eventhandler für das Ereignis DOMContentLoaded. Hier werden die Referenzen auf die HTML-Elemente ermittelt und die benötigten Eventhandler angelegt.

In der Funktion fkt_plotter werden dann die Inputfelder mit den Funktionen und den Min- und Maxwerten für die X-Achse ausgelesen, die Funktionswerte berechnet und der Plot erstellt. Zusätzlich wird noch in einem versteckten Div-Element eine gekürzte Wertetabelle für Screenreader angelegt.

Leider ist canvas pixelorientiert. Im Beispiel zur Plotfunktion wird zwar die Größe des Plotbereichs in Abhängigkeit von der Größe des Viewports festgelegt, aber die Grafik behält ihre Größe bei nachträglicher Änderung der Viewportgröße. Daher wurde im Funktionsplotter auch noch ein Eventhandler für das Ereignis resize erstellt, der den Plot löscht und mit den neuen Maßen neu anlegt.

Das Plotterscript sieht so aus:

Das Plotterscript

"use strict";

window.addEventListener("DOMContentLoaded",function() {
  // Zahlen einlesen und bei Bedarf korrigieren
  var get_num = function(e) {
    var num = e.value;
    if (isNaN(num)) { num = num.replace(/,/g,"."); }
    if (isNaN(num) || num.length==0 ) { num = 0.0; e.value = num; }
    return parseFloat(num);
  }
  // Der Funktionsplotter
  var fkt_plotter = function() {
    var funktionen = [];
    // Funktionen lesen
    for(var i=0;i<e_fkt.length;i++ ) funktionen[i] = e_fkt[i].value;
    // xmin und xmax lesen, prüfen und bei Bedarf korrigieren
    var xmin = get_num(e_xmin);
    var xmax = get_num(e_xmax);
    if (xmax==xmin) {
      xmin -= 0.5; xmax += 0.5;
      e_xmin.value = xmin;
      e_xmax.value = xmax;
    }
    else if (xmax<xmin) {
      var t = xmax;
      xmax = xmin;
      xmin = t;
      e_xmin.value = xmin;
      e_xmax.value = xmax;
    }
    var dx = (xmax - xmin)/npt;
    // Werte für Diagramm berechnen ...
    var daten = [];
    for(var i=0;i<funktionen.length;i++) {
      try { 
        if(funktionen[i].length && funktionen[i].search(/\S/)!=-1) {
          var fun = new Function("x","with(Math){return("+funktionen[i]+")}");
          var ar = [];
          for(var x=xmin;x<=xmax;x+=dx) ar.push( { x: x, y: fun(x) } );
          daten.push(ar);
        }
      }
      catch(e) { 
        alert("Fehler in der Formel Nr "+(i+1)+":\n\n"+funktionen[i]+"\n\n"+e); 
      }
    }
    // ... und plotten
    plt.clear();
    plt.fillopac = .3;
    for(var i=0;i<daten.length;i++) if(!isNaN(daten[i][0].y)) plt.scale(daten[i]);
    plt.frame(50,35,"x","y");
    for(var i=0;i<daten.length;i++) if(!isNaN(daten[i][0].y)) plt.plot(daten[i],cols[i]);
    // ... und Ausgabe in versteckter Tabelle für Screenreader
    var tabelle = "";
    for(var j=0;j<daten.length;j++) {
      tabelle += "<table>";
      tabelle += "<caption>Wertetabelle für Funktion "+(j+1)+"</caption>";
      tabelle += "<thead><tr><th colspan='2'>"+funktionen[j]+"</th></tr>";
      tabelle += "<tr><th>x</th><th>y"+(j+1)+"</th></tr></thead>";
      tabelle += "<tbody>";
      for(var i=0;i<daten[j].length;i+=npt/20 ) tabelle += "<tr><td>"+daten[j][i].x.toFixed(3)+"</td><td>"+daten[j][i].y.toFixed(3)+"</td></tr>";
      tabelle += "</tbody>"
      tabelle += "</table>";
    }
    e_wertetabelle.innerHTML = tabelle;
  } // fkt_plotter

  var i,j,e_plotarea,e_wertetabelle,e_fkt=[],e_xmin,e_xmax,plt,e_jsfkt,e_vdeffkt;
  var npt = 1000;
  var current = 0;
  var cols = ["#ff0000","#008000","#0000ff"];
  var vdef_fkt = { 
    AM: "(1-0.3*sin(x/4))*sin(3*x)",
    PM: "sin(3*x-2*sin(x/3))",
    "sin(x)/x": "sin(x)/x",
    sinh: "(exp(x)-exp(-x))/2",
    cosh: "(exp(x)+exp(-x))/2",
    tanh: "(exp(x)-exp(-x))/(exp(x)+exp(-x))",
    Puls: "(function(){var y=0;for(var ii=10;ii<30;ii++) y+=sin(ii*x);return y})(x)"
  };
  var js_fkt = {
    abs: "abs(x)",
    acos: "acos(x)",
    asin: "asin(x)",
    atan: "atan(x)",
    cos: "cos(x)",
    exp: "exp(x)",
    log: "log(x)",
    pow: "pow(x,2)",
    sin: "sin(x)",
    sqrt: "sqrt(x)",
    tan: "tan(x)",
  };

  // Referenzen
  e_plotarea = document.getElementById("plotarea");
  e_wertetabelle = document.getElementById("wertetabelle");
  e_xmin = document.getElementById("idxmin");
  e_xmax = document.getElementById("idxmax");
  e_jsfkt = document.querySelectorAll("#jsfkt button"); 
  e_vdeffkt = document.querySelectorAll("#vdeffkt button"); 
  for(i=0;i<3;i++) {
    e_fkt[i] = document.getElementById("fkt"+(i+1));
    document.getElementById("f"+(i+1)).style.color = cols[i];
  }
  // Die Eventhandler
  document.getElementById("plotbutton").addEventListener("click",fkt_plotter);
  document.getElementById("fkt1").addEventListener("click",function(){ current = 0 });
  document.getElementById("fkt2").addEventListener("click",function(){ current = 1 });
  document.getElementById("fkt3").addEventListener("click",function(){ current = 2 });
  for(i=0;i<e_vdeffkt.length;i++) e_vdeffkt[i].addEventListener("click",function() { 
    e_fkt[current].value = vdef_fkt[this.innerHTML] });
  for(i=0;i<e_jsfkt.length;i++) e_jsfkt[i].addEventListener("click",function() { 
    e_fkt[current].value += "+"+ js_fkt[this.innerHTML] });
  // Plottbereich anlegen und Startwerte plotten
  plt = new SW.plot(e_plotarea);
  fkt_plotter();
  // SVG kann sich an Größenänderungen anpassen, bei Canvas muss der Plot neu erstellt werden
  if(plt.method=="canvas")
    window.addEventListener("resize",function() {
      plt = new SW.plot(e_plotarea);
      fkt_plotter();
    });
});

Das folgende Beispiel zeigt den Funktionsplotter.

Beispiel ansehen …

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plottet Funktionen">
<title>Beispiel: Funktionsplot auf Canvas-Basis</title>

<style>
  #plotarea { background-color:#ffffff; margin:0; height:calc(100vh - 19em); min-height:300px; }
  #plotter { margin-bottom: 1em; border: none }
  #plotter div { display:inline-block; vertical-align:top }
  #plotter div:nth-child(1) label { display:block; }
  #plotter div:nth-child(2) button { display:block; margin: 1em 0 0 5em;}	
  #idxmin, #idxmax { text-align:right; width:10em; }
  #fkt1, #fkt2, #fkt3 { width:30em; }
</style>

<script src="grafik_canvas.js"></script>
<script src="plot.js"></script>
<script src="fkt_plotter.js"></script>

</head>

<body>
  <h1>Beispiel: Funktionsplot auf Canvas-Basis</h1>
  <p>Stellt mathematische Funktionen grafisch dar.</p>
  <figure id="plotarea"></figure>
  <div hidden id="wertetabelle" aria-live="polite"></div>

  <fieldset id="plotter">
  <div aria-live="polite">
    <label id="f1">f<sub>1</sub>(x) = <input type="text" id="fkt1" value="sin(x)/x"></label>
    <label id="f2">f<sub>2</sub>(x) = <input type="text" id="fkt2" value="sin(x)"></label>
    <label id="f3">f<sub>3</sub>(x) = <input type="text" id="fkt3" value="cos(x)"></label>
  </div>
  <div>
    <label>xmin = <input lang="en" type="number" step="any" id="idxmin" value="-20"></label>
    <label>xmax = <input lang="en" type="number" step="any" id="idxmax" value="20"></label>
    <button id="plotbutton">Plotten</button>
  </div>
  </fieldset>

  <p id="vdeffkt">Vordefinierte Funktionen:
    <button>AM</button>,
    <button>PM</button>,
    <button>sin(x)/x</button>,
    <button>sinh</button>,
    <button>cosh</button>,
    <button>tanh</button> und
    <button>Puls</button>.
  </p>	

  <p id="jsfkt">Javascript unterstützt folgende Funktionen:
    <button>abs</button>,
    <button>acos</button>,
    <button>asin</button>,
    <button>atan</button>,
    <button>cos</button>,
    <button>exp</button>,
    <button>log</button>,
    <button>pow</button>,
    <button>sin</button>,
    <button>sqrt</button> und
    <button>tan</button>.
  Bitte den Definitionsbereich der Funktionen beachten.</p>
</body>
</html>