Tuesday 20 September 2016

Home > php > How to integrate Gantt Chart Jquery?

How to integrate Gantt Chart Jquery?

           , ,      1 comment   
How to integrate Gantt Chart Jquery: Gant chart jquery is the plugin that is used to display the data in graphical user interface. Gantt Chart jquery plugin work on the almost every web browser Firefox 4+, Chrome 13+, Safari 5+, Opera 9+, IE 8+ also on some other web browsers the jquery Gantt Chart plugin works fine.

how to integrate gantt chart jquery?

Download Plugin

Click here To Download

Gantt Chart Jquery Plugin HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Site Title</title>
<meta name="keywords" content="<?php echo $meta_keywords ?>" />      
<link href="<?php echo CSS; ?>calendar.css" rel="stylesheet">
<!-- Set the path of files that are needed -->
<script src="<?php echo GANT_MASTER.'js/jquery.min.js' ?>"></script>
<script src="<?php echo GANT_MASTER.'js/dataDaysEnh.js' ?>"></script>
<script src="<?php echo GANT_MASTER.'js/dataHours.js' ?>"></script>
<link href="<?php echo GANT_MASTER.'css/style.css' ?>" rel="stylesheet">
<script src="<?php echo GANT_MASTER.'js/jquery.fn.gantt.js' ?>"></script>
<script src="<?php echo GANT_MASTER.'js/jquery.fn.gantt.min.js' ?>"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
</head>
<body class="overflow-hidden">
<div id="ganttChart"></div>
<br/><br/>
<div id="eventMessage"></div> 
</body> 

 Gantt chart Jquery Plugin Script

<script>
$(function() {
"use strict";
$("#ganttChart").gantt({
source: <?php echo $data; ?>,
// HERE $DATA IS THE JSON ARRAY OF THE SAME FORMAT THAT IS GIVEN BELOW IN SOURCE INDEX.
//    source :[
//            {
//                "desc":"596",
//                "name":"Duplex-2016-4-D-596",
//                "values":[{
//                        "from":"/Date(1464616800)/",
//                        "to":"/Date(1470837600)/",
//                        "desc":"Description",
//                        "label":"Example Value",
//                        "customClass":"ganttRed"
//                    }],
//            }],
// FROM AND TO SHOULD BE OF THE SAME FORMAT IF YOU HAVE DATE THEN //CONVERT INTO THE STRTOTIME.
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "days",
itemsPerPage: 20,
scrollToToday:true,
useCookie: true,
onItemClick: function(data) {
//alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
prettyPrint();
});
</script>

Gantt Chart Jquery Plugin Php

$data = array(
"from" => "/Date(".(strtotime($val['dateOccupied'])*1000).")/",
"to"=> "/Date(".(strtotime($val['dateReleased'])*1000).")/",
"desc" => "Description",
"label" => $val['GuestFirstName']." ".$val['GuestLastName'],
"customClass" => "ganttRed",
);
return $data;
how to integrate gantt chart jquery? 

Gantt Chart Jquery Features


  • Gantt Chart can read the JSON data.
  • Gantt Chart can paging the results.
  • Gantt Chart displays different colours for each task.
  • Gantt Chart displays short description as hints.
  • Gantt Chart marks the holidays in graphical user interface.
Gantt Chart Jquery plugin is one of the famous plugin and mostly using the plugin so I here try to explain each and everything but If you find any difficulty just comment below I will help you in detail and as soon as possible. You can search for reading more material about by just writing the quries gantt chart jquery plugin, gantt chart jquery ui, gantt chart jquery free, html gantt chart jquery, bar chart in jquery, jquery gantt chart example, jquery gantt chart open source, javascript gantt and much more you will get the reading material of good quality. You can further study about php quries.
Quries in php ...!

This Post Was Last Updated On September 30, 2016, By Author: Mahira Khan.

1 comment: