PHP Classes

PHP Historic Timeline Generator: Render image with a timeline of historic dates

Recommend this page to a friend!
  Info   View files Example   Demos   Screenshots Screenshots   View files View files (3)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 60%Total: 215 This week: 1All time: 8,313 This week: 560Up
Version License PHP version Categories
historic-line 0.1BSD License4.0Time and Date, Graphics
Description 

Author

This class can render image with a timeline of historic dates.

It takes two arrays with the dates and names of historic dates and renders an image displaying the specified dates in a timeline.

The class returns the generated image in the PNG format as a string.

Innovation Award
PHP Programming Innovation award nominee
October 2014
Number 8
Timelines are useful to help understanding sequences of historical events.

This class provides a nice solution to visualize timelines by rendering them as images.

Manuel Lemos
Picture of Ihor Khomyn
Name: Ihor Khomyn is available for providing paid consulting. Contact Ihor Khomyn .
Classes: 3 packages by
Country: Ukraine Ukraine
Age: 51
All time rank: 99917 in Ukraine Ukraine
Week rank: 411 Up8 in Ukraine Ukraine Up
Innovation award
Innovation award
Nominee: 2x

Example

<?php

require('historicline.php');

$data = array(
 
0 => array(
   
'name' => 'Geology Epochs',
   
'dates' => array(0 => array('d' => '-14500000000000', 'name' => 'Early Cretaceous'),
                    
1 => array('d' => '-10050000000000', 'name' => 'Late Cretaceous'),
                    
2 => array('d' => '-2303000000000', 'name' => 'Miocene'),
                    
3 => array('d' => '-533300000000', 'name' => 'Pliocene'),
                    
4 => array('d' => '-258000000000', 'name' => 'Pleistocene'),
                    
5 => array('d' => '-1100000000', 'name' => 'Holocene'))),
 
1 => array(
   
'name' => 'Vedic Time Travel',
   
'dates' => array(0 => array('d' => '-15500000000000000000', 'name' => 'Brahma'),
                    
1 => array('d' => '-230000000000000', 'name' => 'Shvetavaraha Kalpa'),
                    
2 => array('d' => '-12096000000000', 'name' => 'Vaivasvata 7 Manu'),
                    
3 => array('d' => '-389110200000', 'name' => 'Satya-Yuga'),
                    
4 => array('d' => '-310211140', 'name' => 'Kali-Yuga'))),
 
2 => array(
   
'name' => 'Human evolution',
   
'dates' => array(0 => array('d' => '-700000000000', 'name' => 'Sahelanthropus Tchadensis'),
                    
1 => array('d' => '-360000000000', 'name' => 'Australopithecus'),
                    
2 => array('d' => '-100000000000', 'name' => 'Pithecanthropus'),
                    
3 => array('d' => '-20000000000', 'name' => 'Neanderthal'))),
 
3 => array(
   
'name' => 'Historic science',
   
'dates' => array(0 => array('d' => '-340000000000', 'name' => 'Stone Age'),
                    
1 => array('d' => '-150000000000', 'name' => 'Fire Use'),
                    
2 => array('d' => '-600000000', 'name' => 'Wheel'),
                    
3 => array('d' => '-400000000', 'name' => 'Horse Domestication'))),
 
4 => array(
   
'name' => 'Phisics',
   
'dates' => array(0 => array('d' => '-1470000000000000', 'name' => 'Big Bang'),
                    
1 => array('d' => '-460000000000000', 'name' => 'Solar System'),
                    
2 => array('d' => '-20000000000', 'name' => 'Homo Sapiens'))),
 
5 => array(
   
'name' => 'Scale',
   
'dates' => array(0 => array('d' => '-100000000000000000000', 'name' => '1000 trln yrs ago'),
                    
1 => array('d' => '-10000000000000000000', 'name' => '100 trln yrs ago'),
                    
2 => array('d' => '-1000000000000000000', 'name' => '10 trln yrs ago'),
                    
3 => array('d' => '-100000000000000000', 'name' => '1 trln yrs ago'),
                    
4 => array('d' => '-10000000000000000', 'name' => '100 bln yrs ago'),
                    
5 => array('d' => '-1000000000000000', 'name' => '10 bln yrs ago'),
                    
6 => array('d' => '-100000000000000', 'name' => '1 bln yrs ago'),
                    
7 => array('d' => '-10000000000000', 'name' => '100 mln yrs ago'),
                    
8 => array('d' => '-1000000000000', 'name' => '10 mln yrs ago'),
                    
9 => array('d' => '-100000000000', 'name' => '1 mln yrs ago'),
                    
10 => array('d' => '-10000000000', 'name' => '100 milennia yrs ago'),
                    
11 => array('d' => '-1000000000', 'name' => '10 milennia yrs ago'),
                    
12 => array('d' => '-100000000', 'name' => '1 milennia ago')))
                    
 );

    if (isset(
$_GET['action']) && ($_GET['action'] == 'setup')) {
      if (!isset(
$_GET['axisboth'])) { $_SESSION['axisboth'] = 0; }
      if (!isset(
$_GET['rangeboth'])) { $_SESSION['rangeboth'] = 0; }
      if (!isset(
$_GET['userangeb'])) { $_SESSION['userangeb'] = 0; }
      if (!isset(
$_GET['userangee'])) { $_SESSION['userangee'] = 0; }
    }
    if (isset(
$_GET['axistop'])) { $_SESSION['axistop'] = $_GET['axistop']; }
    if (isset(
$_GET['axisbot'])) { $_SESSION['axisbot'] = $_GET['axisbot']; }
    if (isset(
$_GET['axisboth'])) { $_SESSION['axisboth'] = $_GET['axisboth']; }
    if (isset(
$_GET['rangeboth'])) { $_SESSION['rangeboth'] = $_GET['rangeboth']; }
    if (isset(
$_GET['rangeb'])) { $_SESSION['rangeb'] = $_GET['rangeb']; }
    if (isset(
$_GET['rangee'])) { $_SESSION['rangee'] = $_GET['rangee']; }
    if (isset(
$_GET['userangeb'])) { $_SESSION['userangeb'] = $_GET['userangeb']; }
    if (isset(
$_GET['userangee'])) { $_SESSION['userangee'] = $_GET['userangee']; }
     
   
$_SESSION['idtop'] = (isset($_GET['idtop']) ? $_GET['idtop'] : 0);
   
$_SESSION['idbot'] = (isset($_GET['idbot']) ? $_GET['idbot'] : 1);
    if (!isset(
$_SESSION['rangeboth'])) { $_SESSION['rangeboth'] = 1; }
    if (!isset(
$_SESSION['axistop'])) { $_SESSION['axistop'] = 8; }
    if (!isset(
$_SESSION['axisboth'])) { $_SESSION['axisboth'] = 1; }
    if (!isset(
$_SESSION['axisbot'])) { $_SESSION['axisbot'] = 1; }
    if (
$_SESSION['axisboth']) { $_SESSION['axisbot'] = $_SESSION['axistop']; }
    if (!isset(
$_SESSION['rangeb'])) { $_SESSION['rangeb'] = '-100000000000000'; }
    if (!isset(
$_SESSION['rangee'])) { $_SESSION['rangee'] = '201400000'; }
    if (!isset(
$_SESSION['userangeb'])) { $_SESSION['userangeb'] = 1; }
    if (!isset(
$_SESSION['userangee'])) { $_SESSION['userangee'] = 0; }

   
$idtop = $_SESSION['idtop'];
   
$idbot = $_SESSION['idbot'];

  if (
$_SESSION['userangeb']) {
    while (list(
$key, $val) = each($data[$idtop]['dates'])) {
      if (
$data[$idtop]['dates'][$key]['d'] < $_SESSION['rangeb']) {
       
array_splice($data[$idtop]['dates'], $key, 1);
      }
    }
   
$data[$idtop]['dates'] = array_values($data[$idtop]['dates']);
    while (list(
$key, $val) = each($data[$idbot]['dates'])) {
      if (
$data[$idbot]['dates'][$key]['d'] < $_SESSION['rangeb']) {
       
array_splice($data[$idbot]['dates'], $key, 1);
      }
    }
   
$data[$idbot]['dates'] = array_values($data[$idbot]['dates']);
  }
  if (
$_SESSION['userangee']) {
    while (list(
$key, $val) = each($data[$idtop]['dates'])) {
      if (
$data[$idtop]['dates'][$key]['d'] > $_SESSION['rangee']) {
       
array_splice($data[$idtop]['dates'], $key, 1);
      }
    }
    while (list(
$key, $val) = each($data[$idbot]['dates'])) {
      if (
$data[$idbot]['dates'][$key]['d'] > $_SESSION['rangee']) {
       
array_splice($data[$idbot]['dates'], $key, 1);
      }
    }
   
$data[$idbot]['dates'] = array_values($data[$idbot]['dates']);
  }

 
$mpnames = array(); reset($data);
  while (list(
$key, $val) = each($data)) {
   
$mpnames[$key] = $val['name'];
  }

  if (isset(
$_GET['action']) && ($_GET['action'] == 'graph')) {
   
header ('Content-Type: image/png');
   
$t = new HistoricLine();
    print
$t->Graph($data[$idtop], $data[$idbot]);
    exit;
  }

?>

<html>
<head>
<title>Historic Line v.0.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="expires" content="0">
<meta name="description" content="Historic Line component by Ihor Khomyn (c) 2014">
<meta name="keywords" content="historic, date">
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="historicdate.js"></script>
</head>
<body>

<table align=center width=800>
<tr><td>
<?php

print '<img src="?action=graph&idtop='.$_SESSION['idtop'].'&axistop='.$_SESSION['axistop'].'&axisboth='.$_SESSION['axisboth'].
     
'&idbot='.$_SESSION['idbot'].'&axisbot='.$_SESSION['axisbot'].'&rangeboth='.$_SESSION['rangeboth'].
     
'&userangeb='.$_SESSION['userangeb'].'&rangeb='.$_SESSION['rangeb'].'&userangee='.$_SESSION['userangee'].'&rangee='.$_SESSION['rangee'].'">';

?>

<table width=100% border=0>
<tr><td valign=top width=50%>

<table width=100% border=0>
<?php
print '<tr bgcolor="#ffffdd"><td colspan=2><strong>'.$data[$idtop]['name'].'</strong></td></tr>';
$h = new HistoricDate();
$n = 0;
foreach (
$data[$idtop]['dates'] as $key => $value) {
  print
'<tr bgcolor="'.(($n % 2 > 0) ? '#ffffdd':'#eeffff').'">
  <td valign=top width=205>'
.$h->Transform($value['d']).'</td>
  <td>'
.$value['name'].'</td>
</tr>'
;
 
$n++;
}
?>
</table>
</td><td valign=top>
<table width=100% border=0>
<?php
print '<tr bgcolor="#ffffdd"><td colspan=2><strong>'.$data[$idbot]['name'].'</strong></td></tr>';
$n = 0;
foreach (
$data[$idbot]['dates'] as $key => $value) {
  print
'<tr bgcolor="'.(($n % 2 > 0) ? '#ffffdd':'#eeffff').'">
  <td valign=top width=205>'
.$h->Transform($value['d']).'</td>
  <td>'
.$value['name'].'</td>
</tr>'
;
 
$n++;
}
?>
</table>
</td></tr></table>

<br>

<table width=100% border=0>
<form>
<input type=hidden name=action value=setup>
<tr><td>
Top Axis:</td><td>
<select name=idtop>
<?php
foreach ($mpnames as $key => $value) {
  print
'<option value="'.$key.'"'.(($idtop == $key) ? ' selected=selected':'').'>'.$value.'</option>';
}
?>
</select></td><td>
Bottom Axis:
</td><td>
<select name=idbot>
<?php
foreach ($mpnames as $key => $value) {
  print
'<option value="'.$key.'"'.(($idbot == $key) ? ' selected=selected':'').'>'.$value.'</option>';
}
?>
</select></td>
</tr>
<tr><td valign=top>Top Axis Scale: </td><td valign=top>
<select name=axistop>
<?php
foreach ($HDoperations as $key => $value) {
  print
'<option value="'.$key.'"'.(($_SESSION['axistop'] == $key) ? ' selected=selected':'').'>'.$value.'</option>';
}
?>
</select>
</td><td valign=top>Bottom Axis Scale: </td><td>
<input type=radio name=axisboth value=1<?php if ($_SESSION['axisboth']) { print ' checked'; } ?>> Same As Top<br>
<input type=radio name=axisboth value=0<?php if (!$_SESSION['axisboth']) { print ' checked'; } ?>><select name=axisbot>
<?php
foreach ($HDoperations as $key => $value) {
  print
'<option value="'.$key.'"'.(($_SESSION['axisbot'] == $key) ? ' selected=selected':'').'>'.$value.'</option>';
}
?>
</select>
</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td valign=top>Range: </td><td>
<input type=radio name=rangeboth value=1<?php if ($_SESSION['rangeboth']) { print ' checked'; } ?>>Min/Max of both lines<br>
<input type=radio name=rangeboth value=0<?php if (!$_SESSION['rangeboth']) { print ' checked'; } ?>>Each line have it's own
</td>
<?php
print '<td><input type=checkbox name=userangeb value=1'.(($_SESSION['userangeb']) ? ' checked' : '').'>
       Minimum Bound:<br>
       <input type=checkbox name=userangee value=1'
.(($_SESSION['userangee']) ? ' checked' : '').'>
       Maximum Bound:</td><td>
       <input type=text name="rangeb" value="'
.$_SESSION['rangeb'].'" rel=historicpopup><br>
       <input type=text name="rangee" value="'
.$_SESSION['rangee'].'" rel=historicpopup></td></tr>';
?>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td><input type=submit value="Update"></td></tr>
</form>
</table>
</td></tr></table>

</body>
</html>


Details

Here are the few instructions to make the demo work. First put historicline.php and historicline_demo.php somwhere to be accessible via web server. The historicdate.php file should be downloaded from http://www.phpclasses.org/package/7634-PHP-Convert-dates-within-the-billions-of-years-range.html The historicdate.js file should be downloaded from http://www.jsclasses.org/package/185-JavaScript-Convert-dates-within-the-billions-of-years-range.html You can use any TTF font, just edit class - for demo I used FreeSansBold.ttf font from this FreeFont package: http://ftp.gnu.org/gnu/freefont/freefont-ttf-20120503.zip Demo can be seen online at http://afisha.te.ua/telesg/HistoricLine/historicline_demo.php Comments are welcome, send me email to hoorkeet@gmail.com Regards, Ihor Khomyn.

  Demo script live pageExternal page  

Open in a separate window

Screenshots  
  • historicline.jpg
  Files folder image Files  
File Role Description
Plain text file historicline.php Class Main class
Accessible without login Plain text file historic_demo.php Example Demo usage of the class
Accessible without login Plain text file readme.txt Doc. A short readme

 Version Control Unique User Downloads Download Rankings  
 0%
Total:215
This week:1
All time:8,313
This week:560Up
User Ratings User Comments (1)
 All time
Utility:75%StarStarStarStar
Consistency:75%StarStarStarStar
Documentation:75%StarStarStarStar
Examples:75%StarStarStarStar
Tests:-
Videos:-
Overall:60%StarStarStarStar
Rank:1215
 
Thats a good and interesting class ;-)
9 years ago (José Filipe Lopes Santos)
80%StarStarStarStarStar