|
please do not repost your question
|
|
|
|
|
Hi,
I would like the javascript to show data from getData method (webMethod), when the page loads but when filter the data (categoryPicker control), using webMethod getData2.
This is currently my c# page.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}','{3}');}});</script>",
jss.Serialize(GetData()),
"Name Example",
"Name",
"Type Example",
"Type Example",
"Type,"));
}
else
{
JavaScriptSerializer jtt = new JavaScriptSerializer();
ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
string.Format("<script type=\"text/javascript\">google.load('visualization','1.0',{{'packages':['corechart','controls']}});google.setOnLoadCallback(function(){{drawVisualization({0},'{1}','{2}','{3}');}});</script>",
jtt.Serialize(GetData2()),
"Name Example",
"Name",
"Type Example",
"Type Example",
"Type,"));
}
}
[WebMethod]
public static List<Data> GetData()
{
SqlConnection conn = new SqlConnection("#####");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
var yesterday = DateTime.Today.AddDays(-1);
string cmdstr = "select top 500 Name, [Decimal price],Cover, UploadDate from [dbo].[database] order by UploadDate desc";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new List<Data>();
string cat = "";
float val = 0;
string typ = "";
DateTime dat = DateTime.Now;
foreach (DataRow dr in dt.Rows)
{
try
{
cat = dr[0].ToString();
val = Convert.ToInt32(dr[1]);
typ = dr[2].ToString();
dat = (DateTime)(dr[3]);
}
catch
{
}
dataList.Add(new Data(cat, val, typ, dat));
}
return dataList;
}
[WebMethod]
public static List<Data> GetData2()
{
SqlConnection conn = new SqlConnection("#####");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
var yesterday = DateTime.Today.AddDays(-1);
string cmdstr = "select Name, [Decimal price],Cover, UploadDate from [dbo].[database] order by UploadDate desc";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new List<Data>();
string cat = "";
float val = 0;
string typ = "";
DateTime dat = DateTime.Now;
foreach (DataRow dr in dt.Rows)
{
try
{
cat = dr[0].ToString();
val = Convert.ToInt32(dr[1]);
typ = dr[2].ToString();
dat = (DateTime)(dr[3]);
}
catch
{
}
dataList.Add(new Data(cat, val, typ, dat));
}
return dataList;
}
I am little unsure, how do I go about updating on the javascript side. Could any one provide some guideline or process in what I need to do, please.
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0], 'name');
data.addColumn('number', columnNames.split(',')[1], 'price');
data.addColumn('string', columnNames.split(',')[2], 'type');
data.addColumn('datetime', columnNames.split(',')[3], 'date');
for (var i = 0; i < dataValues.length; i++) {
var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));
data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
}
var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
var line = new google.visualization.ChartWrapper({
'chartType': 'AreaChart',
'containerId': 'PieChartContainer',
'options': {
'width': 1200,
'height': 500,
'legend': 'none',
'hAxis': {
'format': "dd-MM-yyyy",
'hAxis.maxValue': 'viewWindow.max',
'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
'viewWindow': { 'max': new Date(2014, 05, 30) },
},
'chartArea': { 'left': 150, 'top': 100, 'right': 50, 'bottom': 100 },
'tooltip': { isHtml: true }
},
'view': {
'columns': [{
type: 'string',
label: data.getColumnLabel(3),
calc: function (dt, row) {
var date = dt.getValue(row, 3);
return dateFormatter.formatValue(date);
}
}, 1, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return 'Name: ' + dt.getValue(row, 0) + ', Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);
}
}]
}
});
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'CategoryPickerContainer',
'options': {
'filterColumnLabel': columnNames.split(',')[3],
'filterColumnIndex': '3',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': categoryCaption,
'label': 'Date',
}
}
});
new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line]).draw(data);
table.draw(data, { showRowNumber: true });
}
Any help or guidance would be very much appreciated. Thanks in advance.
|
|
|
|
|
Need more details inorder to understand your requirement. Can you please clarify little bit more in detail.
|
|
|
|
|
Thank you for your response. I would like to be able to call (getData) query when the page loads and show the (getData) query results in a(using 'line method' -- see javascript code) line chart. When I use the data filters in javascript(categoryPicker), I would like to control filters (categoryPicker), to use (getData2) method query to filter the line charts' output.
for example:
when page loads, call query1(select top 100 * from data), then click/mouseover/search on filter(categoryPicker), filter the line chart results using qyery2(select * from data).
I hope the explanation above clarifies my problem.
Any help would be very much appreciated. Thank you for your time and help.
|
|
|
|
|
hi
I want to put the script into a php page, then call it with a "includes", but in order to do that I will need to be able to change the code on this line
which wants the link to the image.
$('#puzzle-image').attr('src', 'content/images/avengers.jpg');
because I would like to keep using the same code, from the same php file, with different images, so I need to call for the image, from each page to go in the code above.
it's from this page
Jigsaws
|
|
|
|
|
|
how to run event of asp contol by javascript code?
|
|
|
|
|
Quote: Hi,
Please try the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="textBoxUserId" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
In the code behind :
protected void Page_Load(object sender, EventArgs e)
{
textBoxUserId.Attributes.Add("onkeyup", "hello();");
}
And put the script as:
<script type="text/javascript">
function hello() {
alert("do something somehting ")
}
</script>
Hope this helps. 
Thanks,
Praneet
|
|
|
|
|
|
How to use modular script for different modules in website?(In General)
|
|
|
|
|
|
<div id="a">
<div id="b">
</div>
</div>
In this scenario, write a common function to handle the click function on the elements without propagating the event.
|
|
|
|
|
Please someone reply soon urgent requirement
|
|
|
|
|
<div id="a" onclick="onClick(event)">
<div id="b">
</div>
</div>
function onClick(event) {
event.stopPropagation();
}
I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)
|
|
|
|
|
Thanks Peter 
|
|
|
|
|
how I can use a variable passed by parameter in a javascript function in a lambda expression?
p.s: name of the variable = xyz
Code:
pendencias.push(@Model.Count(x => (x.FC_VH_OWNER_STATE_NM == "SP" && Convert.ToDateTime(x.FD_REQ_SERVICE_VALIDITY_DT) <= Convert.ToDateTime(System.DateTime.Now).AddDays(xyz))));
ERROR: Variable is not found
|
|
|
|
|
I am having a little issue, with getting dates to show up in desired (dd-mm-yyyy) format, however they are displayed as 'NaN Nan' on the line chart x-axis. I have added in a 'parseInt' date format but I am not sure if this is a correct approach.
Please advice. Many thanks for your help and time.
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0]);
data.addColumn('number', columnNames.split(',')[1]);
data.addColumn('string', columnNames.split(',')[2]);
data.addColumn('datetime', columnNames.split(',')[3]);
for (var i = 0; i < dataValues.length; i++) {
var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));
data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
}
var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
var line = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'PieChartContainer',
'options': {
'width': 950,
'height': 450,
'legend': 'right',
'hAxis': {
'format': "dd-MM-yyyy",
'hAxis.maxValue': 'viewWindow.max',
'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
'viewWindow': { 'max': new Date(2014, 05, 30) },
},
'title': chartTitle,
'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },
'tooltip': { isHtml: true }
},
'view': {
'columns': [{
type: 'string',
label: data.getColumnLabel(3),
calc: function (dt, row) {
var date = new Date(parseInt(dt.getValue(row, 3)));
return dateFormatter.formatValue(date);
}
}, 1, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return 'Name: ' + dt.getValue(row, 0) + ', Decimal Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);
}
}]
}
});
new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line]).draw(data);
}
|
|
|
|
|
miss786 wrote: however they are displayed as 'NaN Nan' on the line chart x-axis.
The reason is the value is not a numeric.
miss786 wrote: I have added in a 'parseInt' date format but I am not sure if this is a correct
approach.
I think you're getting NAN because you're getting an empty string or null & parsing directly. Just check the result of parseInt("") or parseInt(null)
So check the value before sending to Date function. Debug there.
|
|
|
|
|
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. --> warning
<script type="text/javascript">
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0]);
data.addColumn('number', columnNames.split(',')[1]);
data.addColumn('string', columnNames.split(',')[2]);
data.addColumn('datetime', columnNames.split(',')[3]);
for (var i = 0; i < dataValues.length; i++) {
var date = new Date(parseInt(dt.getValue(row, 3)));
data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
}
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'CategoryPickerContainer',
'options': {
'filterColumnLabel': columnNames.split(',')[2],
'filterColumnIndex': '2',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': categoryCaption,
'label': 'Price Type',
}
}
});
var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
var line = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'PieChartContainer',
'options': {
'width': 950,
'height': 450,
'legend': 'right',
'hAxis': {
'format': "dd-MM-yyyy",
'hAxis.maxValue': 'viewWindow.max',
'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
'viewWindow': { 'max': new Date(2014, 05, 30) },
},
'title': chartTitle,
'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },
'tooltip': { isHtml: true }
},
'view': {
'columns': [{
type: 'string',
label: data.getColumnLabel(3),
calc: function (dt, row) {
var date = new Date(parseInt(dt.getValue(row, 3)));
return dateFormatter.formatValue(date);
}
}, 1, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return 'Name: ' + dt.getValue(row, 0) + ', Decimal Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);
}
}]
}
});
new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line]).draw(data);
}
Please advice, if possible. Many thanks.
|
|
|
|
|
miss786 wrote: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. --> warning
That's warning, possibly you're using new jQuery version. Try previous(your project's) version.
|
|
|
|
|
|
Hi,
How to disable JqueryDateTime Picker Image button .
But textbox i can disable ,I can't do Image button.
here code i am try it.
function disableDate() {
debugger;
document.getElementById('txtStartDate').disabled = true;
$get('txtStartDate').style.color = "gray";
$get('txtStartDate').disabled = true;
$('txtStartDate').datepicker('disable');
$('txtStartDate').datepicker('setDate', new Date()).datepicker('disable').blur();
$('txtStartDate').disableSelection = true;
}
<input id="txtStartDate" runat="server" class="TextBox DatePicker"
style="width: 125px" />
<style>
.ui-datepicker-trigger
{
position: relative;
top: 4px;
right: -3px;
height: 17px;
}
</style>
<script language="javascript" type="text/javascript">
var Dformat = "";
$(document).ready(function () {
var selectvalStartDate = $("#txtStartDate").val();
var sVal = document.getElementById('hdnPORTALID').value;
Dformat = GetDatePickerFormat(sVal);
$(".DatePicker").attr("placeholder", "Select date").datepicker({
showOn: "both",
buttonImage: "../images/datepicker_enable.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: Dformat
});
});
</script>
thanks,
Karthikeyan,
|
|
|
|
|
Hi,
I am not sure whether this would work, but,
can you try this ?
<input name="date" id="datepicker" disabled="disabled" />
$('#datepicker').datepicker();
For further could you please check this link:-
https://forum.jquery.com/topic/disabled-datepicker[^]
Regards,
Praneet
|
|
|
|
|
$("txtStartDate").datepicker({
disabled:true
});
modified 9-May-14 14:36pm.
|
|
|
|
|
Can anyone provide me design or flow to create application for formula builder or expression builder using java-script. just like a calculator but little advanced. which can read any mathematical expression.
ex:
(a+b)/c
5*LOG(1000)* -2/3
MAX(4, 6%7)
(-2*(4*5)+4)/2 -6
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
