php - グラフに時間をプロットする PHP と MySQL

Question

以下のMySQL出力がテーブルの形式で表示されます。

私がやりたいことは、以下のような水平タイムラインに各ジオフェンス時間をプロットすることです:

理論は、時間軸を表の行として作成するというものです。開始点と終了点は時間 (15 分間隔)、開始点は Early Time、終了点は Late Time です。

2行目では、で生成された動的な「ボックス」が必要ですimagefilledrectangle。各「ボックス」の開始座標と終了座標は、テーブルの InSeconds と OutSeconds になります。次に、明らかに、ジオフェンスへの各訪問を表すために、行ごとに複数の「ボックス」が必要です。

に関するいくつかの記事を読みましたimagefilledrectangleが、どこから始めて、複数のボックスを入手する方法がわかりません。明らかに、ボックスは最初のテーブル行の時間に関連付ける必要があります。

現在、データ テーブルを生成するためのクエリは次のとおりです: (すみません、mysql_query後の段階で PDO に変換されます):

$result = mysql_query("

      select * from (select
      PreQuery.callingname as vehicle,
      PreQuery.geofence,
      PreQuery.GroupSeq,
      MIN( PreQuery.`updatetime` ) as InTime,
      UNIX_TIMESTAMP(MIN( PreQuery.`updatetime`))as InSeconds,
      MAX( PreQuery.`updatetime` ) as OutTime,
      UNIX_TIMESTAMP(MAX( PreQuery.`updatetime`))as OutSeconds,
            TIME_FORMAT(SEC_TO_TIME((MAX( PreQuery.`updatetime` )-MIN( PreQuery.`updatetime` ))),'%H:%i') as Duration,
      round((MAX( PreQuery.`updatetime` )-MIN( PreQuery.`updatetime` )),0) as DurationSeconds

   from
     ( select
              v_starting.callingname,
              v_starting.geofence,
              v_starting.`updatetime`,
              @lastGroup := @lastGroup + if( @lastAddress = v_starting.geofence 
                                         AND @lastVehicle = v_starting.callingname, 0, 1 ) as GroupSeq,
              @lastVehicle := v_starting.callingname as justVarVehicleChange,
              @lastAddress := v_starting.geofence as justVarAddressChange
           from
              v_starting,
              ( select @lastVehicle := '',
                       @lastAddress := '',
                       @lastGroup := 0 ) SQLVars
           order by
              v_starting.`updatetime` ) PreQuery
   Group By
      PreQuery.callingname,
      PreQuery.geofence,
      PreQuery.GroupSeq) parent

      where geofence <>'' and InTime>  DATE_SUB(NOW(), INTERVAL 72 HOUR) and vehicle='TT08' and Duration>0 order by InTime asc


");

テーブルを生成するための私の構文は単純です:

<table border=1>
    <tr>
        <th>Vehicle</th>
        <th>Geofence</th>
        <th>InTime</th>
        <th>InSeconds</th>
        <th>OutTime</th>
        <th>OutSeconds</th>
        <th>Duration</th>
        <th>DurationSeconds</th>
    </tr>

    <?php
    while($row = mysql_fetch_array($result)){
    ?>
    <tr>
    <td><?php echo $row['vehicle'] ?></td>
    <td><?php echo $row['geofence'] ?></td>
    <td><?php echo $row['InTime'] ?></td>
    <td><?php echo $row['InSeconds'] ?></td>
    <td><?php echo $row['OutTime'] ?></td>
    <td><?php echo $row['OutSeconds'] ?></td>
    <td><?php echo $row['Duration'] ?></td>
    <td><?php echo $row['DurationSeconds'] ?></td>
    </tr>
    <?php } ?>
    </table>

だから私は少し生意気ですが、誰かが私に始める方法についてアドバイスをくれるなら、それは素晴らしいことです. または、参照として読んだり使用したりできる良い記事。

画像で塗りつぶされた長方形は正しいルートですか? 使用できる JavaScript ソリューションまたはプラグインはありますか?