Comments by Member 10324774 (Top 54 by date)

<div id="donut" class="chart" style="padding: 0px; position: relative;"></div>
</div>
<div class="col-md-6">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>subject</th>
<th>Count</th>

</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>Mark</td>

</tr>
<tr>
<td>2</td>
<td>Jacob</td>

</tr>
<tr>
<td>2</td>
<td>Larry</td>

</tr>
<tr>
<td>3</td>
<td>Sandy</td>

</tr>

</tbody>
</table>

</div>
<div class="col-md-7 col-sm-12">
<div class="dataTables_paginate paging_bootstrap">
<ul class="pagination"><li class="prev disabled">
</li>
<li class="active">1</li><li>2</li>
<li>3</li><li>4</li>
<li>5</li>
<li class="next"></li>

</ul></div>

</div>
</div>
</div>
</div>

<div class="tab-pane" id="portlet_tab4">
<div class="row">
<div class="col-md-6">

Teaching Staff Strength: 850

</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="donut1" class="chart" style="padding: 0px; position: relative;"></div>
</div>
<div class="col-md-6">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>subject</th>
<th>Count</th>

</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>Mark</td>

</tr>
<tr>
<td>2</td>
<td>Jacob</td>

</tr>
<tr>
<td>2</td>
<td>Larry</td>

</tr>
<tr>
<td>3</td>
<td>Sandy</td>

</tr>

</tbody>
</table>

</div>
<div class="col-md-7 col-sm-12">
<div class="dataTables_paginate paging_bootstrap">
&

<div class="row">
<div class="col-md-12">
<!-- BEGIN TAB PORTLET-->
<div class="portlet box green tabbable">
<div class="portlet-title">
<div class="caption">Strength</div>
</div>
<div class="portlet-body">
<div class=" portlet-tabs">
<ul class="nav nav-tabs">
<li>Tab 4</li>
<li >Tab 3</li>
<li>Tab 2</li>
<li class="active">Tab 1</li>
</ul>
<div class="tab-content">
<div class="tab-pane active " id="portlet_tab1">
<div class="row" >
<div class="col-md-6">

Teaching Staff Strength: 850

</div>

</div>
<div class="row">
<div class="col-md-6">

<div id="pie_chart_6" class="chart" style="padding: 0px; position: relative;">
</div>
</div>
<div class="col-md-6">
<table> <tr ><td >Total Strength</td><td>: 3500 </td></tr>
<tr><td >Students</td><td >: 2050 </td></tr>
<tr><td >Teaching Staff</td><td >: 800 </td></tr>
<tr><td >Non - Teaching Staff</td><td>: 650</td></tr>

</table>
</div>
</div>
</div>
<div class="tab-pane" id="portlet_tab2">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th >Username</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td >makr124</td>
<td><span class="label label-sm label-success">Approved</span></td>
</tr>
<tr>
<td>Jacob</td>
<td>Nilson</td>
<td >jac123</td>
<td><span class="label label-sm label-info">Pending</span></td>
</tr>
<tr>
<td>2</td>
<td>Larry</td>
<td>Cooper</td>
<td >lar</td>
<td><span class="label label-sm label-warning">Suspended</span></td>
</tr>
<tr>
<td>3</td>
<td>Sandy</td>
<td>Lim</td>
<td >sanlim</td>
<td><span class="label label-sm label-danger">Blocked</span></td>
</tr>
</tbody>
</table>
</div>

</div>
<div class="tab-pane " id="portlet_tab3">
<div class="row">
<div class="col-md-6">

Teaching Staff Strength: 850

</div>
</div>
<div class="row">
<div class="col-md-6">

Nothing I missed written everything but not getting the chart.

http://www.iabinc.com/iab_templates/metronic1.4/admin/template_content/ui_tabs_accordions.html follow this link

in that tab of a portlet I want to put stack chart which is in visual charts
and also table.

got it using asp button only

Because I am using a theme which dont work only with html controls.

sorry I am using html button with id and runat="server" attribute. May be for that reason it is not working I think.
Suggest me something if that is html bitton how can I do?

var Login = function () {

var handleLogin = function() {

// ajax login function to be called right after the form validation success
var ajaxLogin = function(form) {
form = $(form);
$.ajax({
type: "POST",
url: "index.html",
data: form.serialize(),
dataType: "json",
beforeSend:function(){
$('.alert-danger,.alert-success').hide();
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
$('.alert-danger').show();
$('.alert-danger span').html(errorThrown);
},
success: function(data){
alert('Success!!!');
$('.alert-success').show();
$('.alert-success span').html(data);
}
});
}

$('.login-form').validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
remember: {
required: false
}
},

messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
}
},

invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},

highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function (error, element) {
error.insertAfter(element.closest('.input-icon'));
},

submitHandler: function (form) {
ajaxLogin(form); // form validation success, call ajax form submit
}
});

$('.login-form input').keypress(function (e) {
if (e.which == 13) {
if ($('.login-form').validate().form()) {
ajaxLogin($('.login-form')); //form validation success, call ajax form submit
}
return false;
}
});
}

this is my code snippet...
<form id="Form1" class="login-form" method="post" runat="server">

Login to your account

<div class="alert alert-danger display-hide">
<button id="Button1" class="close" data-close="alert" runat="server"></button>
<span>Enter any username and password.</span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9" id="lblname" runat="server">Username</label>
<div class="input-icon">

<input id="username" runat="server" class="form-control placeholder-no-fix" type="text" maxlength="15" autocomplete="off" placeholder="Username" name="username"/>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9" id="lblpwd" runat="server">Password</label>
<div class="input-icon">

<input id="password" runat="server" class="form-control placeholder-no-fix" minlength="6" type="password" autocomplete="off" placeholder="Password" name="password"/>
</div>
</div>
<div class="form-actions">
<label class="checkbox">
<input type="checkbox" name="remember" value="1" id="chkbx" runat="server"/> Remember me
</label>
<button type="submit" class="btn green pull-right" id="btnsubmit" onclientclick="return handlelogin()" runat="server" önserverclick="btnsubmit_Click" >
Login
</button>
</div>
<div class="forget-password">

Forgot your password ?

<p>
no worries, click here
to reset your password.
</p>
</div>

</form>

and btnsubmitclick:
protected void btnsubmit_Click(object sender, EventArgs e)
{

using (var client = new HttpClient())
{
try
{
loggger.Debug("User authentication begin: ");
AuthUser authUser = new AuthUser();
authUser.UserName = username.ToString();
authUser.Password = password.ToString();
authUser.AuthType = int.Parse(ConfigurationSettings.AppSettings["AuthType"].ToString());
client.BaseAddress = new Uri(ConfigurationSettings.AppSettings["APIServiceUrl"].ToString());
JavaScriptSerializer js = new JavaScriptSerializer();
string json = js.Serialize(authUser);
loggger.Debug("User authentication request: " + json);
var response = client.PostAsJsonAsync<authuser>("api/authentication/Authenticate", authUser).Result;
loggger.Debug("User authentication response: " + response.IsSuccessStatusCode);
if (response.IsSuccessStatusCode)
{
var data = response.Content.ReadAsStringAsync().Result;
if (data != "null" && data.Length > 0)
{
User user = (User)js.Deserialize(data, typeof(User));
loggger.Debug("Authenticated user : " + user.UserName + " RoleID: " + user.RoleID.ToString());
if (user != null)
{
switch (user.RoleID)
{
case 3:
Response.Redirect(ConfigurationSettings.AppSettings["ManagementWebUrl"].ToString(), true);
break;
default:
Response.Redirect(ConfigurationSettings.Ap

Already I am doing like that only but validation is working but it is not calling the btnsubmit function.

nothing just given id same as name attribute then it's working..

got it..

https://github.com/jia58960/metronic/blob/master/login.html

this source I am using.

No error showing it directly displaying that "Not Found" regardless of even you fill the textboxes r not.

give me a sample snippet for validation using html controls on submit button click.

I given Id also but not able to validate the login form.

Even I tried that one also. but not working..

<form class="login-form" action="index.html" method="post" runat="server">

Login to your account

<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>Enter any username and password.</span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<asp:Label CSSclass="control-label visible-ie8 visible-ie9" runat="server">Username
<div class="input-icon">

<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" runat="server"/>
</div>
</div>
<div class="form-group">
<asp:Label CSSclass="control-label visible-ie8 visible-ie9" runat="server">Password
<div class="input-icon">

<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" runat="server"/>
</div>
</div>

<div class="form-actions">
<asp:Label CSSclass="checkbox" runat="server">
<input type="checkbox" name="remember" value="1" runat="server"/> Remember me

<asp:Button runat="server" type="submit" class="btn green pull-right" Text="Login">


</div>

<div class="forget-password">

Forgot your password ?

<p>
no worries, click here
to reset your password.
</p>

</div>
<script>
login.init();</script>

login.js code is:


var Login = function () {
alert("hi");

var handleLogin = function () {

// ajax login function to be called right after the form validation success
var ajaxLogin = function(form) {
form = $(form);
$.ajax({
type: "POST",
url: "index.html",
data: form.serialize(),
dataType: "json",
beforeSend:function(){
$('.alert-danger,.alert-success').hide();
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
$('.alert-danger').show();
$('.alert-danger span').html(errorThrown);
},
success: function(data){
alert('Success!!!');
$('.alert-success').show();
$('.alert-success span').html(data);
}
});
}

$('.login-form').validate({

errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
userid: {
required: true
},
pwd: {
required: true
},
remember: {
required: false
}
},

messages: {
username: {
required: "Username is required1."
},
password: {
required: "Password is required2."
}
},

invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},

highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function (error, element) {

I am using runat server for input controls and it is not validating while I click the login button.

Even by giving like that also Iam not getting the functionality..

did you included "orders.xml" file in the solution?

which one you tried? send me the link...

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_line_series.htm
from this I have written the code....
and marksarr is defined by me..
It is an empty array..
and I pushed my data into that..

If I pass static data I will get the output but I have to pass data dynamically through the service url...then I did like above and my updated code is here...
$(document).ready(function () {
var source = {};
$.ajax({
dataType: "jsonp",
type: "GET",
datafields: [
{ name: 'marks' },
{ name: 'progress' },

],
async: 'false',
url: "http://localhost:30082/restfrchrst.svc/GetChartdetails",
contentType: "application/json",
success: function (data) {
var arrayReturn = data;
var marksarr = [];
for (var i = 0, len = arrayReturn.length; i < len; i++) {
var chart = arrayReturn[i];
marksarr.push([chart.marks,chart.progress]);
}
alert(marksarr);
source = marksarr;
}
});


var settings ={
title: "Monthly scorecard",
description: "Time spent in vigorous exercise by activity",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: source,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'marks',
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 100,

gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto',

},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
showLabels: true,
symbolType: 'circle',
valueAxis:
{
unitInterval: 0.5,
minValue: 0.5,
maxValue: 6.0,
description: 'Score in tests',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'progress', displayText: 'progress of student' }
]
}
]
};

// setup the chart
$('#jqxChart').jqxChart(settings);
});


</script>

hi did u find any solution?

Any one help me please...

No use ..

but not getting..

I also did like this

var source = {};
source.c1 = [];
source.c1.push(["marks:chart.marks"]);
source.c1.push(["progress:chart.progress"]);

value is not available in my case. am passing synamically so I did like this
success: function (data) {
var arrayReturn = data;
var sol = [];
var o = {};
o.chart = [];
for (var i = 0, len = arrayReturn.length; i < len; i++) {

var chart = arrayReturn[i];
//sol.push([chart.marks, chart.progress]);
o.chart.push([chart.marks]);
o.chart.push([chart.progress]);
}
even not getting the output

can I write like this

var o = {
product: [
{ attribute: "value" },
{ attribute: "value" }
]
};

yaa.. then in my case how to do...please don't mind tel me clearly

I am getting data in my array but it is showing that undefined array
Again I have to take an array and pass these values to that , how to do that?

data format is also correct..

data format is incorrect..
actually we want data like this {[434,5.4],[345,5.2]} but I am getting as 434,5.4,345,5.2
To get like that what should I do..?

if we pass ststic data then its working

no change in that
..

no blank page
getting the data in alert window but didn't understand y source property not taking that?

but not getting the chart to be plotted

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_line_series_symbol_type.htm
see this link
I want to do like this
For that I have modified my code
Here is my updated code..
<html lang="en">
<head>
<title id='Description'>jqxChart Line Series Data Points</title>
<link rel="stylesheet" href="scripts/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="scripts/jqxcore.js"></script>
<script type="text/javascript" src="scripts/jqxdata.js"></script>
<script type="text/javascript" src="scripts/jqxchart.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare chart data as an array
//var sampleData = [
// { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
// { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
// { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
// { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
// { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
// { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
// { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
//];
$.ajax({
dataType:"jsonp",
type:"GET",
async:'false',
url:"http://localhost:30082/restfrchrst.svc/GetChartdetails",
contentType:"application/json",
success:function(data){
var arrayReturn=data;
for(var i= 0, len = arrayReturn.length; i < len; i++)
{
var chart=arrayReturn[i];
var marksarr=[];
marksarr.push([chart.Month, chart.Score]);
alert(marksarr);
}

}
//error: function (err) {
// alert(err);
//}
});

// prepare jqxChart settings
var settings = {
title: "Monthly scorecard",
description: "Time spent in vigorous exercise by activity",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: marksarr,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'Month',
showTickMarks: true,
valuesOnTicks: false,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
showLabels: true,
symbolType: 'circle',
valueAxis:
{
unitInterval: 50,
minValue: 200,
maxValue: 600,
description: 'Score in tests',
axisSize: 'auto',
tickMarksColor: '#888888'

It is saying that "uncaught reference:arr is not defined"

hi
I updated my code , wcf rest service data is taken in an array but not able to plot chart...
please check..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: AJAX</title>
<link href="scripts/examples.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery.flot.js"></script>
<script type="text/javascript">



$(document).ready(function () {

var source = {};

$.ajax({
type: 'POST',
//data:'format=json',
dataType: 'jsonp',
async: false,
url: 'http://localhost:30082/restfrchrst.svc/GetChartdetails',
//cache: false,
contentType: 'application/json',
data: "",
success: function (data) {

var arrayReturn = data;
for (var i = 0, len = arrayReturn.length; i < len; i++) {

var chart = arrayReturn[i];
var arr = [];
arr.push([chart.marks, chart.progress]);
//alert(arr);
//alert(chart.progress);
}
//source = $.parseJSON(data);

},
error: function (err) {
alert(err);
}


});

var plot = $.plot("#placeholder", [{ data: arr }], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 200,
max: 600
}

});



$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");

$("#placeholder").bind("plothover", function (event, pos, item) {

if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}

if ($("#enableTooltip:checked").length > 0) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);

$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
}
else {
$("#tooltip").hide();
}
}
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});

// Add the Flot version string to the footer

$("#footer").prepend("Flot " + $.plot.version + " – ");
});
});
</script>
</head>
<body>
<div id="header">

Interactivity

</d

public class restfrchrst : Irestfrchrst
{
SqlConnection con = new SqlConnection("Data Source=10.90.90.100;Initial Catalog=SGT_Test;User ID=sgtuser;Password=sgtuser");
List<chart> c = new List<chart>();
public List<chart> GetChartdetails()
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from charts",con);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
c.Add(new chart { marks = Convert.ToInt32(dr[0]), progress = Convert.ToDecimal(dr[1]) });
}
}
con.Close();
return c;
}

svc.cs

isvc is:
public interface Irestfrchrst
{
[OperationContract]
[WebGet(UriTemplate = "GetChartdetails", ResponseFormat = WebMessageFormat.Json)]

List<chart> GetChartdetails();
}
[DataContract]

public class chart
{
[DataMember]
public int marks { get; set; }
[DataMember]
public decimal progress { get; set; }
}
}

no change..not binding the data..

no error but not plotting the data. I have written alert(data); then it is showing [Object object] [Object object] [Object object] [Object object] [Object object] [Object object] like this but don't know y?

yup.it is a multilevel menu.

how to call a temporary page?

How to link those functions to button in the aspx page.?