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>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
<!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>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>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>