I have looked at all the other questions regarding this and I cant seem to find an answer that fits to my problem.
I have a database filled with measurements and respective datetime for the measurement. I currently use ajax in a asp.net web application to get data from my database(sql server) and make a chart out of that data. The problem is that I have to reload the page in order to see new values that entered the database, meaning that only database values that were present when the page loaded is visible on the web application. I want to poll for new database values every second or so but I cant figure out how to do it in this case.
UPDATED NOW: I have tried to use $.Ajax without any success. I am now trying to return a array 'y' (y values) from a web method and get this from ajax call. See updated code. The problem still lies withing the $.Ajax method in .aspx.
LAST UPDATE: I figured it out after following Josh Mein's step. I had to read documentation and so forth but I learned a lot. If anyone ever encounter a similar problem I will put a comparison below:
.aspx(before):
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Scripts/jQuery-1.6.4.min.js"></script>
<script>
setInterval(FillGraph, 1000);
function FillGraph() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/getArray",
data: '{ }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: OnError
});
function OnSuccess(response) {
//Fill the graph here i guess(?)
//I tried alert(response.d) and it didnt return anything.
}
</script>
.aspx (After):
function makeChart() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/TestDouble",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
for (var i = 0; i < Object.keys(msg.d).length; i++) {
yVals[i] = msg.d[i];
}
}
});
$.ajax({
type: "POST",
url: "WebForm1.aspx/TestDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
for (var i = 0; i < Object.keys(msg.d).length; i++) {
xVals[i] = msg.d[i];
}
}
});
var trace1 = {
x: xVals,
y: yVals,
fill: 'tozeroy',
type: 'scatter'
};
var data = [trace1];
Plotly.newPlot('myDiv', data);
}
aspx.cs (Before):
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static double[] getArray()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(@"Data Source =localhost\SQLEXPRESS; Initial Catalog = HIDDEN; Integrated Security=True"))
{
con.Open();
SqlCommand cmd = new SqlCommand("HIDDEN", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
con.Close();
}
string[] x = new string[dt.Rows.Count];
double[] y = new double[dt.Rows.Count];
for (int i = 0; i < dt.Rows.Count; i++)
{
y[i] = Convert.ToDouble(dt.Rows[i][0]);
x[i] = dt.Rows[i][1].ToString();
}
return y;
}
}
aspx.cx (After):
[WebMethod]
public static string[] TestDate()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(@"Data Source =localhost\SQLEXPRESS; Initial Catalog = WeatherSystem; Integrated Security=True"))
{
con.Open();
SqlCommand cmd = new SqlCommand("HIDDEN", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
con.Close();
}
string[] xArray = new string[dt.Rows.Count];
for (int i = 0; i < dt.Rows.Count; i++)
{
xArray[i] = dt.Rows[i][0].ToString();
}
return xArray;
}
[WebMethod]
public static double[] TestDouble()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(@"Data Source =localhost\SQLEXPRESS; Initial Catalog = HIDDEN; Integrated Security=True"))
{
con.Open();
SqlCommand cmd = new SqlCommand("HIDDEN", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
con.Close();
}
double[] yArray = new double[dt.Rows.Count];
//string[] xArray = new string[dt.Rows.Count];
for (int i = 0; i < dt.Rows.Count; i++)
{
//xArray[i] = dt.Rows[i][0].ToString();
yArray[i] = Convert.ToDouble(dt.Rows[i][0]);
}
return yArray;
}
TestDouble() returns an array of double values. TestDate() returns respective DateTimes to those double values (measurements). GetChart() executes 2 ajax calls, one for Date values and one for Double values. The chart is then filled with these values.
$.ajax,$.get, or$.post. When the call returns, use the data to recreate your graph. As it stands right now, your code doesnt even show an attempt at solving the problem.$.ajax? jQuerys documentation is really good.