Hi dharmendr sir,
I have a gantt chart populated with database.
I used simple query like (select * from table name.)
But my query is little bit complex.
I want to plot data according to search base like when user enter flightnumber flightdate and type and click on search button then this chart should be shown.
And my database table contain FK to get taskname. Like my database table is like this.
int [ActionID]
FK int [UserID]
FK int [flightid]
FK int [AssignID]
varchar [starttime]
varchar [endtime]
I don't know how to plot data in this condition please help.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebApplication3.WebForm5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['gantt'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "Webform5.aspx/GetChartData",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (response) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
for (var i = 0; i < response.d.length; i++) {
var taskId = "Task_" + response.d[i][0].toString();
var taskName = response.d[i][1].toString();
var resource = response.d[i][1].toString();
var startDate = new Date(response.d[i][2].toString());
var enddate = new Date(response.d[i][3].toString());
var duration = parseInt("0");
var percentageComplete = parseInt("0");
var dependencies = "";
data.addRows([[taskId, taskName, resource, startDate, enddate, duration, percentageComplete, dependencies]]);
}
var options = {
height: 400, width: 500, gantt: { trackHeight: 30 }
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}, error: function (response) {
alert(response.responseText);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>Flight Search</h2>
<div class="form-group">
<label for="flightNo">Flight No:</label>
<asp:TextBox ID="flightNo" runat="server" CssClass="form-control" required></asp:TextBox>
</div>
<div class="form-group">
<label for="flightDate">Flight Date:</label>
<asp:TextBox ID="flightDate" runat="server" CssClass="form-control" type="date" required></asp:TextBox>
</div>
<div class="form-group">
<label for="flightType">Type:</label>
<asp:DropDownList ID="flightType" runat="server" CssClass="form-control" required>
<asp:ListItem Text="Economy" Value="economy" />
<asp:ListItem Text="Business" Value="business" />
<asp:ListItem Text="First Class" Value="firstClass" />
</asp:DropDownList>
</div>
<div class="form-group">
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn" />
</div>
</div>
<div id="chart_div"></div>
</form>
</body>
</html>
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Configuration;
using System.Web.Services;
namespace WebApplication3
{
public partial class WebForm5 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<object> GetChartData()
{
string conString = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
string query = "SELECT * FROM gantt";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query);
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
List<object> chartData = new List<object>();
for (int i = 0; i < dt.Rows.Count; i++)
{
chartData.Add(new object[] {
dt.Rows[i]["Testid"],
dt.Rows[i]["taskname"],
Convert.ToDateTime(dt.Rows[i]["Starttime"].ToString().Replace('.',':')).ToString(),
Convert.ToDateTime(dt.Rows[i]["endtime"].ToString().Replace('.', ':')).ToString() });
}
return chartData;
}
}
}
}
}
}
