Oldphaloskepsis/page-experience.php

<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>
<?php
   function withinDates($jSDate, $jEDate) {
      $endYear = date( "Y" );
      $endDate = $endYear."-12-31";
      $startDate = ($endYear - 2)."-01-01";
      
      $jEDate = (!$jEDate) ? date('Y-m-d') : (($jEDate > $endDate) ? $endDate : $jEDate);
      return (((strtotime($jSDate) < strtotime($endDate)) && (strtotime($jSDate) > strtotime($startDate))) && (strtotime($jEDate) > strtotime($startDate)));
   }
   
	$args= array(
		'post_type' => array( 'job' ),
		'posts_per_page' => -1
	);
	
	$loop = new WP_Query( $args );
	?>
	<div class="post-header-title"><?php the_title( '<h1 id="page-title">', '</h1>' ); ?></div>
	<?php/*$terms = apply_filters( 'taxonomy-images-get-terms', '', array('having_images' => false, 'taxonomy' => 'company'));
	if ( ! empty( $terms ) ) {
    		print '<ul>';
    		foreach ( (array) $terms as $term ) {
        		print '<li><a href="' . esc_url( get_term_link( $term, $term->taxonomy ) ) . '">' . wp_get_attachment_image( $term->image_id, 'detail' ) . '</li>';
    		}
    		print '</ul>';
	}
	*/?>  
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
      $(function() {
         $( "#slider-range" ).slider({
            range: true,
            min: 2008,
            max: 2016,
            values: [ 2014, 2016 ],
            slide: function( event, ui ) {
              drawChart();
            }
         });
        
         $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
         " - $" + $( "#slider-range" ).slider( "values", 1 ) );
      });
   </script>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
	  google.charts.load('current', {'packages':['timeline']});
	  google.charts.setOnLoadCallback(drawChart);
	  function drawChart() {
		var container = document.getElementById('timeline');
		var chart = new google.visualization.Timeline(container);
		var dataTable = new google.visualization.DataTable();

		dataTable.addColumn({ type: 'string', id: 'Type' });
		dataTable.addColumn({ type: 'string', id: 'Job Title' });
		dataTable.addColumn({ type: 'date', id: 'Start' });
		dataTable.addColumn({ type: 'date', id: 'End' });
		dataTable.addRows([
			<?php
				while ( $loop->have_posts() ) : $loop->the_post();
               if (withinDates(get_the_date(), get_post_meta(get_the_ID(), 'end-date', true))) {
                  $company = wp_get_object_terms(get_the_ID(), 'company', array( 'fields' => 'names' ));
                  $title = html_entity_decode(get_the_title());
                  $start = get_the_date();
                  $end = (!get_post_meta(get_the_ID(), 'end-date', true)) ? date('D M d Y H:i:s O') : get_post_meta(get_the_ID(), 'end-date', true); 
                  echo "[ 'All', '$title, {$company[0]}', new Date('$start'), new Date('$end') ],\n";
               }
				endwhile;
			?>
		]);

		chart.draw(dataTable);
	  }
	</script>
   
<div id="slider-range"></div>
<div id="timeline" style="height: 100vh;"></div>

<?php //get_sidebar(); ?>
<?php get_footer(); ?>