How to integrate Gantt Chart Jquery?

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.

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;

 

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.

Read More

Jquery form validation using library

Jquery form validation: The first thing is when we create the form for retrieving some data from the user then the user will enter the data in data fields that we created and so for we need to retrieve the correct data from our user. For that purpose, we use the form validation. Different types of form validation occur like using jquery form_validatiaon.js library, PHP form validation, CodeIgniter form validation. So we discuss the form validation using jquery-validation-1.14.0 that is the simple and easy to use and accurate and most of the professionals use this type of validation.

Example:
Two steps
step 1) Create the form and in the form, tag writes the tag novalidate="novalidate"
step 2) the jquery form validation functions.

--------------------------------------------------------------------------------------

  <form method="post" action="http://192.168.1.200/projects/NomanJ/dbcontroller/add" id="formSubmit" novalidate="novalidate">
    <div class="form-group">
      <label for="firstname">First Name</label>
      <input type="text" name="firstname" class="form-control" id="firstname" placeholder="firstname">
    </div>
    <div class="form-group">
      <label for="lastname">Last Name</label>
      <input type="text" name="lastname" class="form-control" id="lastname" placeholder="lastname">
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" name="email" class="form-control" id="email" placeholder="example@gmail.com">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

--------------------------------------------------------------------------------------

<script>
// manual method
/*
$("#formSubmit").submit(function(e){
  if($("#firstname").val('') && $("#lastname").val('') && $("#email").val('') ){
});
*/
// js form validation
  $("#formSubmit").validate({
    // Specify the validation rules
    rules:{
      firstname: "required",
 
      email:{
        required: true,
        email: true
      },
    },
    messages:{
      firstname: "Please enter your first name",
      lastname: "Please enter your last name",
      email: "Please enter the valid email",
    }
  });
</script>

--------------------------------------------------------------------------------------

Here is the jquery validation library used for the validation purpose so that the people enter the write content / context that is acceptable by the developer system/software system. There are many methods for the validation of the forms data like PHP validation that is also called server-side validation and HTML 5 validation that is the browser side validation but the HTML 5 validation only work in the new web browsers/ internet browsers. So the developers and testers prefer to implement the jquery validation and PHP server side validation both at a time. You can also see out PHP server side validation on our site.
Codeigniter form validation ....!

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

Read More