I used from google chart in my site , when I debug application in VS everything is ok but when I publish the application the chart is blank !
can you please help me in this regards
here is my code :
<script src="Scripts/jquery-1.9.1.js"></script>
<link href="Content/Site.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/googlechart.js"></script>
<%--<script type="text/javascript" src="Scripts/googlechart2.js"></script>--%>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
var chartData; // globar variable for hold chart data
google.load("visualization", "1", { packages: ["corechart"] });
// Here We will fill chartData
$(document).ready(function () {
$.ajax({
url: "Main.aspx/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
// after complete loading data
google.setOnLoadCallback(drawChart);
drawChart();
});
});
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: "Vehicle",
pointSize: 5
};
var lineChart = new google.visualization.LineChart(document.getElementById('chart_div'));
lineChart.draw(data, options);
}
</script>
back code
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetChartData()
{
List<PL_PK> data = new List<PL_PK>();
//Here MyDatabaseEntities is our dbContext
using (PLCPEntities dc = new PLCPEntities())
{
data = dc.PL_PK.ToList();
}
var chartData = new object[data.Count + 1];
chartData[0] = new object[]{
"Time",
"Total",
"Plan",
};
int j = 0;
foreach (var i in data)
{
j++;
chartData[j] = new object[] { i.Time.ToString("MMM" + "dd"), i.Total, i.Plan };
}
return chartData;
}
Related
I want to convert datatable to a format that I can feed in to Google Charts in .Net MVC application.
I retrieve my data from the database and put it in a C# Datatable. Now I want to convert that into a format that google charts can understand. I have included the code for what I have so far. I keep getting error from google charts: "First row is not an array.".:
//Controller
public static string GetData()
{
String sql = "Select * from someTable";
//Run above sql against database and get back a DataTable
DataTable dt = new Utility().ConnectionUtility(sql);
//Convert DataTable to Json Object (I followed this link: https://codepedia.info/convert-datatable-to-json-in-asp-net-c-sharp/)
return JsonConvert.SerializeObject(dt);
}
//View
<div id="barChart" style="width:750px; height: 400px;"></div>
<script>
// Here We will fill chartData
$(document).ready(function () {
$.ajax({
url: "GetData",
dataType: "json",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data;
},
error: function (xhr, status, error) {
alert('Message');
}
}).done(function () {
// after complete loading data
google.setOnLoadCallback(drawChart);
drawChart();
});
});
function drawChart() {
var datapie = google.visualization.arrayToDataTable(chartData);
var options = {
title: "Test Execution",
width: 600,
height: 400,
bar: { groupWidth: "75%" },
};
var Chartpie = new google.visualization.BarChart(document.getElementById('barChart'));
Chartpie.draw(datapie, options);
}
</script>
Maybe it's a little late, but today i have encountered the same situation.
In your controller side, you need to shape your data according to chart type.
Then in your view side, just use google.visualization.arrayToDataTable(Your Data);
here is a sample code...
[HttpPost]
public JsonResult AjaxMethod()
{
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"HEADER1", "HEADER_NUMERIC_AREA"
});
//get data table from sql.
DataTable DT = Direkbaglan.DBListele(" SELECT [StockName] ,[Weight] FROM STOCKS ");
for (int i = 0; i < DT.Rows.Count; i++)
{
chartData.Add(new object[]
{
DT.Rows[i][0], DT.Rows[i][1]
});
}
return Json(DT);
}
view side
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Home/jsongonder",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r);
//Pie
var options = {
title: 'Stock Info (weight)'
};
var chart = new google.visualization.PieChart($("#chart1")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart1" style="width: 500px; height: 400px;">
</div>
</body>
</html>
I have a asp.net application where i have kendo ui treeview in aspx page. on document ready, i am calling a method in the aspx page for the data. The kendo treeview is not loading the data dynamically. It only shows the loading indicator. When we provide the same json data in aspx page itself, it works fine.
Here is the code
[System.Web.Services.WebMethod]
public static string MakeTreeData()
{
return "[{ text: \"Node1\", items: [{text:\"Child1\"},{text:\"Child2\"},{text:\"Child3\"}]}]";
}
script
var $jQuery2_1 = jQuery.noConflict(true);
$jQuery2_1(document).ready(function () {
$jQuery2_1.ajax({ url: "Default.aspx/MakeTreeData",
contentType: "application/json; charset=utf-8",
type: "post",
success: function (result) {
var viewModel = new kendo.data.HierarchicalDataSource({
data: JSON.parse(result.d),
schema: {
model: {
children: "items"
}
}
});
$jQuery2_1("#treeview").kendoTreeView({
dataSource: viewModel,
dataTextField: "text"
});
},
error: function (e) {
console.log(e);
}
});
});
Thanks
Updating the method and script like below solved the issue
MakeTreeData
[System.Web.Services.WebMethod]
public static string MakeTreeData()
{
JavaScriptSerializer js = new JavaScriptSerializer();
var parentNodes = new List<Node>();
var parent = new Node() { Id = "1", Text = "Parent 1", Nodes = new List<Node>() };
var child = new Node() { Id = "2", Text = "Child 1", Nodes = new List<Node>() };
parent.Nodes.Add(child);
parentNodes.Add(parent);
return js.Serialize(parentNodes);
}
Script
<div class="demo-section k-content">
<div id="treeview"></div>
</div>
<script>
$(document).ready(function () {
$.ajax({
url: "Default.aspx/MakeTreeData",
contentType: "application/json; charset=utf-8",
type: "POST",
success: function (result) {
var jsonData = JSON.parse(result.d);
var viewModel = new kendo.data.HierarchicalDataSource({
data: JSON.parse(result.d),
schema: {
model: {
children: "Nodes"
}
}
});
$("#treeview").kendoTreeView({
dataSource: viewModel,
dataTextField: "Text"
});
},
error: function (e) {
console.log(e);
}
});
});
</script>
Hi i have DataTable which is binding to Gridview. But in need to bind that know to jqxgrid or jqxdatatable. After googling so many times i didn't got proper solution for this.
DataTable tb1= qry.GetTicketDetails();
serviceWindow.DataSource = tb;
serviceWindow.DataBind();
This what i'm doing actully now.
IN jquery i can take XML shown in below.
var source =
{
dataType: "json",
dataFields: [
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'calories', type: 'int' },
{ name: 'totalfat', type: 'string' },
{ name: 'protein', type: 'string' }
],
id: 'id',
url: "data/ticket.XML", //how to take datatable from code behind file
};
.aspx code -->>
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestCellSelection.aspx.cs" Inherits="CourierApp.Project.TestCellSelection" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title id='Description'></title>
<link rel="stylesheet" href="../JQWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../JQWidgets/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../JQWidgets/scripts/demos.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../JQWidgets/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript">
$(document).load(function () {
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#button").jqxButton({
theme: 'energyblue',
height: 30
});
$("#button").click(function () {
var cells = $('#jqxgrid').jqxGrid('getselectedcells');
var cellInfo = "";
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cellInfo += "\nRow: " + cell.rowindex + ", " + cell.datafield;
}
alert(cellInfo);
});
//GetData
var data = {};
var dataFelds = {};
var dataCols = {};
GetDatas();
GetCol_Datafeilds();
GetCol_Columns();
function GetDatas() {
$.ajax({
url: '<%=ResolveUrl("~/Project/Service.aspx/GridValues")%>',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
success: function (dataa) {
var response = dataa.d;
if (response != "Error") {
data = response;
console.log(data);
}
else {
alert("Retrive Error !!");
}
},
failure: function (data) {
alert(response.d);
},
error: function (error) {
console.log("Error : " + error.responseText);
}
});
}
function GetCol_Datafeilds() {
$.ajax({
url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Datafeilds")%>',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
success: function (dataa) {
var response = dataa.d;
if (response != "Error") {
dataFelds = $.parseJSON(response);
console.log(dataFelds);
}
else {
alert("Retrive Error !!");
}
},
failure: function (data) {
alert(response.d);
},
error: function (error) {
console.log("Error : " + error.responseText);
}
});
}
function GetCol_Columns() {
$.ajax({
url: '<%=ResolveUrl("~/Project/Service.aspx/Col_Columns")%>',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
success: function (dataa) {
var response = dataa.d;
if (response != "Error") {
dataCols = $.parseJSON(response);
console.log(dataCols);
}
else {
alert("Retrive Error !!");
}
},
failure: function (data) {
alert(response.d);
},
error: function (error) {
console.log("Error : " + error.responseText);
}
});
}
// prepare the data
var source =
{
datatype: "json",
datafields: dataFelds,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server - send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
},
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 1000,
source: dataAdapter,
editable: true,
selectionmode: 'multiplecellsadvanced',
columnsresize: true,
columns: dataCols
});
// $('#jqxgrid').jqxGrid('pincolumn', 'From_KG');
//$("#jqxgrid").jqxGrid('enablehover', event.args.checked);
});
<%--$("#<%=btn_SelectCells.ClientID%>").click(function () {
var cells = $('#jqxgrid').jqxGrid('getselectedcells');
var cellInfo = "";
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cellInfo += "\nRow: " + cell.rowindex + ", " + cell.datafield;
}
alert(cellInfo);
});--%>
</script>
</head>
<body class='default'>
<form id="form1" runat="server">
<div>
<div id='jqxWidget'>
<div id="jqxgrid">
</div>
</div>
<div style="margin-top: 10px;">
<input id="button" type="button" value="Get the selected cells" />
<%--<asp:Button ID="btn_SelectCells" runat="server" Text="Get the selected cells" UseSubmitBehavior="False" />--%>
</div>
</div>
</form>
</body>
</html>
.aspx.cs or Web Service Code ----->>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Collections;
using System.Web.Script.Serialization;
using System.Web.Helpers;
using BL;
using DAL;
using Newtonsoft.Json;
public partial class Project_Service : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region Testing
[WebMethod]
public static String GridValues()
{
String Qry = "SELECT [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9 FROM Tnt_Rate";
DataTable dt = DbAccess.FetchDatatable(Qry);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
String Val = serializer.Serialize(rows);
if (Val != "")
{
return (Val);
}
else
{
return "Error";
}
}
[WebMethod]
public static String Col_Datafeilds()
{
String Qry = "SELECT [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9 FROM Tnt_Rate";
DataTable dt = DbAccess.FetchDatatable(Qry);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row = new Dictionary<string, object>();
String Col = "";
int counter = 0;
foreach (DataColumn col in dt.Columns)
{
if (counter < 2)
{
row = new Dictionary<string, object>();
row.Add("name", col.ColumnName);
row.Add("type", "string");
rows.Add(row);
}
else if (counter >= 2)
{
row = new Dictionary<string, object>();
row.Add("name", col.ColumnName);
row.Add("type", "number");
rows.Add(row);
}
counter += 1;
}
Col = serializer.Serialize(rows);
//Col = JsonConvert.SerializeObject(rows);
if (Col != "")
{
return (Col);
}
else
{
return "Error";
}
}
[WebMethod]
public static String Col_Columns()
{
String Qry = "SELECT [From Kgs] as From_Kg,[To kgs] as To_Kg,[1] as Zone1,[2] as Zone2,[3] as Zone3,[4] as Zone4,[5] as Zone5,[6] as Zone6,[7] as Zone7,[8] as Zone8,[9] as Zone9 FROM Tnt_Rate";
DataTable dt = DbAccess.FetchDatatable(Qry);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
String Col = "";
int counter = 0;
foreach (DataColumn col in dt.Columns)
{
if (counter < 2)
{
row = new Dictionary<string, object>();
row.Add("text", col.ColumnName.ToUpper());
row.Add("datafield", col.ColumnName);
row.Add("columntype", "textbox");
row.Add("width", "100");
row.Add("cellsalign", "left");
//row.Add("pinned", "true");
rows.Add(row);
}
else if (counter >= 2)
{
row = new Dictionary<string, object>();
row.Add("text", col.ColumnName.ToUpper());
row.Add("datafield", col.ColumnName);
row.Add("columntype", "textbox");
row.Add("width", "25");
row.Add("cellsalign", "right");
rows.Add(row);
}
}
Col = serializer.Serialize(rows);
// Col = JsonConvert.SerializeObject(rows);
if (Col != "")
{
return (Col);
}
else
{
return "Error";
}
}
#endregion
}
Paste it ......
Replace the Query by your Query.....
Donot Supply Datafeild and Column Def. in the .aspx page
It's Fully Dynamic Solution !!!
I have asp.net Gridview that have at least 15 rows with textbox by default example
aspx
<asp:GridView ID="gv_Others" runat="server" AutoGenerateColumns="false" CssClass="gvothers">
<Columns>
<asp:TemplateField >
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemTemplate >
<asp:TextBox ID="txtEmp" runat="server" Width=100% Height=22px CssClass="txtE"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
aspx.cs (here how I am generating 15 rows of a GridView)
private void SetInitialRowsofOthers()
{
var list = new List<string>();
for (int i = 0; i < 16; i++)
{
list.Add(string.Empty);
}
gv_Others.DataSource = list;
gv_Others.DataBind();
gv_Others.HeaderRow.Visible = false;
}
WevService.axms
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetotherServices(string txt1)
{
// your code to query the database goes here
List<string> result = new List<string>();
string QueryString = System.Configuration.ConfigurationManager.ConnectionStrings["autoDBConn"].ToString();
using (SqlConnection obj_SqlConnection = new SqlConnection(QueryString))
{
using (SqlCommand obj_Sqlcommand = new SqlCommand("Select DISTINCT OtherService as txt1 from easy_tblOtherServiceMaster where OtherService like #SearchText + '%' ", obj_SqlConnection))
{
obj_SqlConnection.Open();
obj_Sqlcommand.Parameters.AddWithValue("#SearchText", txt1);
SqlDataReader obj_result1 = obj_Sqlcommand.ExecuteReader();
while (obj_result1.Read())
{
result.Add(obj_result1["txt1"].ToString().TrimEnd());
}
}
}
return result;
}
I want to fill each textbox by jQuery autocomplete.. for this I created a webservice and getting a value from jQuery.
How I am trying to achieve this task:
<script src="js/jquery-1.8.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
SearchText();
function SearchText() {
var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');
$($arrT).autocomplete({
source: function(request, response) {
$.ajax({
url: "WebService.asmx/GetotherServices",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'txt1' : '" + $($arrT).val() + "'}",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item,
value: item
}
}))
//debugger;
},
error: function(result) {
alert("Error");
}
});
},
minLength: 1,
delay: 1000
});
}
});
</script>
<script type="text/javascript">
$(document).ready(function() {
SearchText();
function SearchText() {
$("#<%=Txt_RegNo.ClientID %>").autocomplete({
source: function(request, response) {
$.ajax({
url: "WebService.asmx/GetAutoCompleteData",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'txt' : '" + $("#<%=Txt_RegNo.ClientID %>").val() + "'}",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item,
value: item
}
}))
//debugger;
},
error: function(result) {
alert("Error");
}
});
},
minLength: 1,
delay: 1000
});
}
});
</script>
<script type="text/javascript">
$(function() {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function(e) {
//var key = (e.keyCode ? e.keyCode : e.charCode);
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
<script type="text/javascript">
function Load_OtherService() {
var hv = $('input[id$=hdnOthers]');
var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');
var hv1 = "" + hv.val();
var va = hv1.split(',');
for (var j = 0; j < va.length; j++) {
var $txt = $arrT[j];
$($txt).val(va[j]);
}
}
</script>
Now for example when I type "Engine Work" in TEXTBOX 1 and select the value which populated by jQuery autocomplete("Engine Work") then second time when I type in other text box (TEXT BOX 2). It's only give me the "Engine Work" option to select.. which means after selecting any value (populated by jQuery autocomplete) I can't select any other value in other text boxes....
Example:- (See Image Below)
as you see i type Genral Work but still it`s populating the Previous value "Engine Work" in jquery AutoComplete which i dont want
How to find the TextBox by CSS Class using jQuery????
Something like this (its only find TextBox id by using jQuery inside GridView but I need to find textbox by Css Class)
var $arrT = $('#<%=gv_Others.ClientID %>').find('input:text[id$="txtEmp"]');
Change your script block to this:
$(document).ready(function() {
// This selects all inputs inside the table with the txtE class and applies
// the autocomplete function to them
$('table[id$="gv_Others"] input.txtE').autocomplete({
source: function(request, response) {
$.ajax({
url: "WebService.asmx/GetAutoCompleteData",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{ 'txt1' : '" + request.term + "'}",
dataFilter: function(data) { return data; },
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item,
value: item
}
}))
//debugger;
},
error: function(result) {
alert("Error");
}
});
},
minLength: 1,
delay: 1000
});
});
Look at the data: in the ajax post - it's using request.term and I changed the selector.
The issue with your jquery is this line:
data: "{ 'txt1' : '" + $($arrT).val() + "'}",
That will always return the first value of the array (the first textbox) so it's always submitting the first value to your webservice as the search text.
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Collections.Generic;
using System.Web.Script.Serialization;
namespace PlatForm_RollUp
{
/// <summary>
/// Summary description for SearchDPN
/// </summary>
public class SearchDPN : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string prefixText = context.Request.QueryString["term"];
if (string.IsNullOrEmpty(prefixText)) { prefixText = "NA"; }
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["PPN_ConnectionString"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select DPN_Key, DPN, Item_Desc from Customer.DIM.PPN WHERE " +
"DPN like #SearchText+'%'";
cmd.Parameters.AddWithValue("#SearchText", prefixText);
cmd.Connection = conn;
//StringBuilder sb = new StringBuilder();
List<string> _dpn = new List<string>();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
//sb.Append(string.Format("{0} - {1}", sdr["DPN"], sdr["Item_Desc"], Environment.NewLine));
_dpn.Add(sdr["DPN"].ToString() +" - " +sdr["Item_Desc"].ToString());
}
}
conn.Close();
context.Response.Write(new JavaScriptSerializer().Serialize(_dpn));
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
***************************
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
initializer();
});
var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
prmInstance.add_endRequest(function () {
//you need to re-bind your jquery events here
initializer();
});
function initializer() {
$("[id*=txtDPN]").autocomplete({ source:
"/Handlers/SearchDPN.ashx" });
}
</script>
Script codes:
<script type="text/javascript">
function drawVisualization01(dataValues) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Class Average ');
data.addColumn('number', 'Score ');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value1, dataValues[i].Value2]);
}
var options = {
title: 'Topics Performance',
hAxis: { title: 'Topics', titleTextStyle: { color: 'red', fontSize: 15 }, textStyle: { fontSize: 12} },
vAxis: { format: '###.##%', textStyle: { fontSize: 12 }, maxValue: 1, minValue: 0 }
};
var formatter = new google.visualization.NumberFormat({ pattern: '###.##%' });
formatter.format(data, 1);
formatter.format(data, 2);
var chart_div01 = document.getElementById('visualization1');
var chart = new google.visualization.ColumnChart(chart_div01);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div01.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div01.innerHTML);
var result = Foo(document.getElementById('<%=Textbox1.ClientID%>').value);
document.getElementById('<%=Textbox2.ClientID%>').value = chart.getImageURI();
});
chart.draw(data, options);
}
</script>
**JSON function**
<script >
function Foo(user_id) {
// Grab the information
var values = user_id;
var theIds = JSON.stringify(values);
// Make the ajax call
$.ajax({
type: "POST",
url: "ProgressReportNew.aspx/Done", // the method we are calling
contentType: "application/json; charset=utf-8",
data: {ids: theIds },
dataType: "json",
success: function (result) {
alert('Yay! It worked!');
},
error: function (result) {
alert('Oh no :(');
}
});
}
</script>
[WebMethod]
public static void done(string ids)
{
String a = ids;
HttpContext context = HttpContext.Current;
context.Session["a"] = a;
}
C# code:
int t1 = Textbox1.Text.Trim().Length;
string as1 = (string)(Session["a"]);
Its brief code, I want convert the google chart to image in one click. Its my code ;from server side I want to pass the image base64 string, but unfortunately I am not getting into the text box; I tried using Ajax still it is not happening.
Can anyone help me to resolve this problem, before I used 2 button first to convert image and pdf it worked, but one button its not working.