Kleiner JavaScript Kurs

JavaScript Framework "jqplot.js"

jqPlot ist eine Erweiterung für jQuery, mit der man Diagramme (insbesondere x-y Diagramme) erstellen kann.
Für die Verwendung von jqplot muss man jQuery, jqplot.js und (für die Formatierung) jqplot.css importieren.
Im body benötigt man dann einen Bereich, z.B. einen div - Bereich, in dem dann das Diagramm erstellt wird. Das JavaScript Programm ist dann sehr einfach. Man ruft jqplot auf und übergibt die zu plottenden Werte als Array z.B. [[x1,y1],[x2,y2],....,[xn,yn]]. Die html Seite könnte so aussehen:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />                    
    </head>
                        
    <body>
	<div id="chartdiv" style="height:400px;width:300px; "></div>
        <script> 
          $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
        </script>
    </body>
</html>
So könnte es aussehen: jqplot_1_Test.html

Auch mathematische Funktionen (z.B. sin()) lassen sich ganz einfach plotten. Das Array (unten fPoints) wird in einer for-Schleife mit x/y - Werten gefüllt.
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
     
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />                    
    </head>
                        
    <body>
	<div id="chartdiv" style="height:400px;width:300px; "></div>
    <script>
      var fPoints = [];
  		for (var i=-2*Math.PI; i<2*Math.PI; i+=0.1){ 
    		fPoints.push([i, Math.sin(i)]); 
  		}
      $.jqplot('chartdiv',  [fPoints]);
    </script>
    </body>
</html>
So könnte es aussehen: jqplot_2_sin.html

Hier noch ein Beispiel mit einigen jqplot - Optionen:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />                    
    </head>
                        
    <body>
        <div id="chartdiv" style="height:400px;width:600px; "></div>
        <script>
          var cosPoints = [];
            for (var i=-2*Math.PI; i<2*Math.PI; i+=0.1){ 
                cosPoints.push([i, Math.sin(i)]); 
            }
          $.jqplot('chartdiv',  [cosPoints],
                {title:"Funktionsplotter",
                animate: true,
                series:[{showMarker:false}],
                axes:{
                    xaxis:{
                      label:'x - Achse'
                    },
                    yaxis:{
                      label:'y - Achse'
                    }
                  }
                });   
        </script>
    </body>
</html>
So könnte es aussehen: jqplot_3_Optionen.html

Als letztes noch ein Beispiel aus dem Physikbuch. Es sollen die Temperatur-Messwerte eines Tages (Messungen um 0 Uhr, 2 Uhrh, 4 Uhr, usw.) als Diagramm dargestellt werden:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />                    
    </head>
                        
    <body>
	<div id="chartdiv" style="height:400px;width:600px; "></div>
    <script>
      var temperatur = [[0,9.8],[2,9.1],[4,8.6],[6,8.3],[8,8.6],[10,11.3],[12,12.8],
                        [14,14.2],[16,14],[18,13.4],[20,12.1],[22,9.8],[24,9.5]];
  		
      $.jqplot('chartdiv',  [temperatur],
           {title:"Temperaturverlauf am 04.05.2020",
            animate: true,
            seriesDefaults: { 
                showMarker: true,
                showLine: true,
                lineWidth: 5,
                color: "#FF0000",
                rendererOptions:{smooth: true},
                markerOptions: {style:"filledDiamond", size:20, color:"green"}
                    },
            axes:{
                xaxis:{
                  label:'Zeit',
                  pad: 0
                },
                yaxis:{
                  label:'Temperatur in °C'
                }
              }    
             });  
    </script>
    </body>
</html>
So könnte es aussehen: jqplot_4_Temperatur.html So könnte es aussehen (mit vielen jqplot - Optionen: jqplot_4a_Temperatur_Optionen.html