Membuat Grafik Gerak Lurus Berubah Beraturan dengan PHP dan Highcharts

26 January 2015 | Tags: Fisika, Gerak Lurus Berubah Beraturan, GLBB, Highcharts, PHP HighCharts

Disini kita akan membahas cara membuat grafik Gerak Lurus Berubah Beraturan dengan PHP dan Highcarts. Highcharts adalah sebuah library yang ditulis dalam JavaScript , menyediakan fasilitas dan cara mudah untuk membuat grafik interaktif ke situs web atau aplikasi web.

Sebelumnya kita bahas dulu sekilas tentang pengertian gerak lurus berubah beraturan. Gerak lurus berubah beraturan (GLBB) adalah gerak lurus suatu obyek, di mana kecepatannya berubah terhadap waktu akibat adanya percepatan yang tetap. Akibat adanya percepatan, rumus jarak yang ditempuh tidak lagi linier melainkan kuadratik (Wikipedia). Pada gerak lurus berubah beraturan gerak sebuah benda bisa mengalami percepatan atau perlambatan. Gerak benda yang mengalami percepatan disebut gerak lurus berubah beraturan dipercepat, sedangkan gerak yang mengalami perlambatan disebut gerak lurus berubah beraturan diperlambat.

Rumus Gerak Lurus Berubah Beraturan

Rumus gerak lurus beraturan adalah :

Rumus Grafik Gerak Lurus Berubah Beraturan

Dimana:

V_t = kecepatan akhir atau kecepatan setelah t sekon (m/s)

V₀ = kecepatan awal (m/s)

a = percepatan (m/s²)

t = selang waktu (s)

s = jarak tempuh (m)

Untuk materi lengkap dari gerak lurus berubah beraturan bisa anda cari di internet atau lewat buku fisika.

Hasil Grafik Gerak Lurus Berubah Beraturan

Gerak Lurus Berubah Beraturan Kecepatan vs Waktu

Gerak Lurus Berubah Beraturan Perpindahan vs Waktu

Source Code Gerak Lurus Berubah Beraturan

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerak Lurus Berubah Beraturan</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
</head>
<body>
<div id="container">
<?php
	$batas	=isset($_GET['batas'])?$_GET['batas']*1:0;
	$delta	=isset($_GET['delta'])?$_GET['delta']*1:1;
	$v0		=isset($_GET['v0'])?$_GET['v0']*1:0;
	$a		=isset($_GET['a'])?$_GET['a']*1:0;
	$jg		=isset($_GET['jg'])?$_GET['jg']*1:1;
?>
<form id="form1" name="form1" method="get" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table class="f_isian">
      <tr>
        <td>Waktu</td>
        <td>:</td>
        <td><input type="text" name="batas" id="batas" value="<?php echo $batas;?>" />
        (s)</td>
      </tr>
      <tr>
        <td>Interval</td>
        <td>:</td>
        <td><input type="text" name="delta" id="delta" value="<?php echo $delta;?>" />
        (s)</td>
      </tr>
      <tr>
        <td>Kecepatan Awal (v<sub>0</sub>)</td>
        <td>:</td>
        <td><input type="text" name="v0" id="v0" value="<?php echo $v0;?>" />
        (m/s)</td>
      </tr>
      <tr>
        <td>Percepatan (a)</td>
        <td>:</td>
        <td><input type="text" name="a" id="a" value="<?php echo $a;?>" />
        (m/s<sup>2</sup>)</td>
      </tr>
      <tr>
        <td>Jenis Grafik</td>
        <td>:</td>
        <td><label for="jg"></label>
          <select name="jg" id="jg">
            <option value="1">Kecepatan vs Waktu</option>
            <option value="2" <?php if($jg!=1) { ?> selected="selected" <?php } ?>>Perpindahan vs Waktu</option>
        </select></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><input class="beda" type="submit" name="button" id="button" value="Proses" /></td>
      </tr>
  </table>
  </form>
<?php
		$data_r="";
		$t=0;
		while($t<=$batas)
			{
				$v=$v0+$a*$t;
				$s=$v0*$t+0.5*$a*$t*$t;
				if($jg==1)
					{
						$vp=$v;
						$jdg="Kecepatan vs Waktu";
						$y="Kecepatan (m/s)";
					}
				else
					{
						$vp=$s;
						$jdg="Perpindahan vs Waktu";
						$y="Perpindahan (m)";
					}
				$data_r.="[".$t.",".$vp."]";
				if($t<$batas)
						{
								$data_r.=",";
						}
				$t+=$delta;
			}
    ?>
<script type="text/javascript">
$(function () {
    $('#visual').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Grafik GLBB <?php echo $jdg;?>'
        },
        xAxis: {
            reversed: false,
            title: {
                enabled: true,
                text: 'Waktu (s)'
            },

            maxPadding: 0.05,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: '<?php echo $y;?>'
            },
            min:0,
            lineWidth: 2
        },
        legend: {
            enabled: false
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: 't={point.x} : <?php echo $y;?>={point.y}'
        },
        plotOptions: {
            spline: {
                marker: {
                    enable: false
                }
            }
        },
        series: [{
            name: 'GLBB',
            data: [<?php echo $data_r; ?>]
        }]
    });
});
		</script>
        <div id="visual" style="min-width: 300px; height: 400px; max-width: 100%; margin: 0 auto"></div>
 </div>
</body>
</html>

Source Code Gerak lurus berubah beraturan dapat anda download disini.