Timeline Graph

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

		    <div class="skt-timeline-wrap" style="position:relative;width:100%;">
		    	<div>
		    		<div class="skt-timeline-heading" style="color:#333333">Project Timeline</div>
		        	<div id="timeline_1" style="width:100%;"></div>
		        </div>
		    </div>

		    <script>
		    (function(){

		        window.sktTimelineCharts = window.sktTimelineCharts || [];

		        google.charts.load("current", {packages:["timeline"]});

		        google.charts.setOnLoadCallback(function(){

		            var el = document.getElementById("timeline_1");

		            if(!el){
		                return;
		            }

		            var chart = new google.visualization.Timeline(el);

		            var ROWS = [["Planning","",{"year":2026,"month":0,"day":1},{"year":2026,"month":0,"day":15}],["Design","",{"year":2026,"month":0,"day":16},{"year":2026,"month":1,"day":15}],["Development","",{"year":2026,"month":1,"day":16},{"year":2026,"month":3,"day":30}],["Testing","",{"year":2026,"month":4,"day":1},{"year":2026,"month":4,"day":31}]];

		            function draw(){

		                var dataTable = new google.visualization.DataTable();

		                dataTable.addColumn({ type: "string", id: "Term" });
		                dataTable.addColumn({ type: "string", id: "Name" });
		                dataTable.addColumn({ type: "date", id: "Start" });
		                dataTable.addColumn({ type: "date", id: "End" });

		                ROWS.forEach(function(row){

		                    dataTable.addRow([
		                        row[0],
		                        row[1],
		                        new Date(
		                            row[2].year,
		                            row[2].month,
		                            row[2].day
		                        ),
		                        new Date(
		                            row[3].year,
		                            row[3].month,
		                            row[3].day
		                        )
		                    ]);

		                });

		                var w = el.clientWidth || 600;
		                var h = Math.max(200, ROWS.length * 50);

		                chart.draw(dataTable, {
		                    height: h
		                });
		            }

		            draw();

		            window.sktTimelineCharts.push(draw);

		            if(!window.sktTimelineResizeBound){

		                window.sktTimelineResizeBound = true;

		                var timer;

		                window.addEventListener("resize", function(){

		                    clearTimeout(timer);

		                    timer = setTimeout(function(){

		                        window.sktTimelineCharts.forEach(function(fn){
		                            fn();
		                        });

		                    }, 200);

		                });
		            }

		        });

		    })();
		    </script>

[skillwrapper type="skt_timeline" chart_title="Project Timeline" chart_title_color="#333333"]

[skill title="Planning" start="2026-01-01" end="2026-01-15"]

[skill title="Design" start="2026-01-16" end="2026-02-15"]

[skill title="Development" start="2026-02-16" end="2026-04-30"]

[skill title="Testing" start="2026-05-01" end="2026-05-31"]

[/skillwrapper]

Project Timeline