We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Refreshing chart data from a connected datasource

Thread ID:

Created:

Updated:

Platform:

Replies:

124145 May 19,2016 10:15 PM May 31,2016 08:57 AM LightSwitch HTML 5
loading
Tags: Chart
Ed Wagner
Asked On May 19, 2016 10:15 PM

I am trying to create a live chart, that would update every 5 minutes from the connected sql express db. there are only two columns, the time and a temperature. I want to see a line graph of the temperature in our green house in a rolling past 2 hour view. The thermometer sends the readings to the db every five minutes. How do I refresh the chart to display the new temps?   Thank you, Ed

Akbar Basha K M [Syncfusion]
Replied On May 24, 2016 06:57 AM

Hi Ed Wagner, 
Thanks for contacting syncfusion support. You can achieve this requirement using binding the data source value to each interval to the chart series. 
Code Snippet:     
 
  $.ajax({ 
        type: "POST", 
        url: "../../web/WebForm1.aspx/LiveData", 
        data: JSON.stringify({ "date": dateVal, "val": rn }), 
        contentType: "application/json; charset=utf-8", 
        dataType: 'json', 
        success: function (data) { 
            console.log('success', data); 
 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
            alert('Exeption:' + errorThrown); 
        } 
    }); 
 
 
WebForm1.aspx.cs 
 
        [WebMethod] 
        public static DateTime LiveData(DateTime date, int val) 
        { 
            SqlConnection con = new SqlConnection(); 
            // Date Source connection 
            con.ConnectionString = "Data Source=SYNCLAPN136;Initial Catalog=Testdata;Integrated Security=True;Connect Timeout=30"; 
            con.Open(); 
 
            string command = "INSERT INTO [Table_1] (xName,yName) VALUES(@x,@y)"; 
            cmd.Parameters.Add("@y", val); 
            cmd.ExecuteNonQuery(); 
            con.Close(); 
 
            return date; 
        } 

 


We have prepared a sample based on your requirement. Please find the sample under the following location, 
Please let us know if you have any concern. 
Regards, 
Akbar Basha KM. 


Ed Wagner
Replied On May 25, 2016 04:51 PM

Hi Akbar,
I see what you are doing there. It is very similar to the other samples I have found. The problem is it's the reverse of what I need to do. In the sample you are generating random data points displaying them and inserting them into the database table via the aspx page. I already have a process that incrementally updates the database and I what to update the chart with those values. How do I requery the table for the new data and refresh the chart with it?
 
Thank you for your support,
Ed

Saravana Kumar Kanagavel [Syncfusion]
Replied On May 27, 2016 05:40 AM

Hi Wagner, 
 
We have analyzed your query and created a sample based on your requirement. Since you already have a database updating every second you can also requery the database to get the collection and store in a list as like in below code snippet. 
 
Please follow the code example below 
[JS] 
function insertData() 
{ 
    var chartobj = $("#chartContainer").ejChart("instance"); 
    var startDate = chartobj.model.series[0].points[chartobj.model.series[0].points.length - 1].x; 
    var addDate = new Date(startDate.setDate(startDate.getDate() + 1)); 
    var random = parseInt(getRandomInt(20, 50)); 
    $.ajax({ 
        type: "POST", 
        url: "../../web/WebForm1.aspx/insertDatas", 
        data: JSON.stringify({ "date": addDate, "val": random }), 
        contentType: "application/json; charset=utf-8", 
        dataType: 'json', 
        success: function (data) { 
            length = data.d.length; 
            datas = data.d; 
            endxValue = new Date(data.d[length - 1].xvalue); 
            for (var i = 0; i < data.d.length; i++) { 
                data.d[i].xvalue = new Date(data.d[i].xvalue); 
            } 
            var chartobj = $("#chartContainer").ejChart("instance"); 
            chartobj.model.series[0].dataSource = datas; 
            chartobj.model.series[0].xName = "xvalue"; 
            chartobj.model.series[0].yName = "yvalue"; 
            chartobj.model.series[0].fill = "#ff33cc"; 
            chartobj.redraw(); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
             
        } 
    }); 
 
} 
 
[ASPX.CS] 
[WebMethod] 
        public static List<data1> insertDatas(DateTime date, int val) 
        { 
            List<data1> list1 = new List<data1>(); 
            string connectionString = null; 
            SqlDataAdapter adapter = new SqlDataAdapter(); 
            DataSet dataset = new DataSet(); 
            connectionString = @"Data Source=SYNCLAPN7425;Initial Catalog=TestData;Integrated Security=True"; 
            SqlConnection con = new SqlConnection(connectionString); 
            con.Open(); 
            string command1 = "INSERT INTO [Table_1] (xName,yName) VALUES(@x,@y)"; 
            cmd.Parameters.Add("@y", val); 
            cmd.ExecuteNonQuery(); 
             
 
            string command2 = "select * from Table_1"; 
            SqlCommand cmd1 = new SqlCommand(command2, con); 
            adapter.SelectCommand = cmd1; 
            adapter.Fill(dataset); 
 
            for (var i = 0; i < dataset.Tables[0].Rows.Count;i++ ) 
            { 
                string x = (string)dataset.Tables[0].Rows[i].ItemArray[0].ToString(); 
                int y = (int)dataset.Tables[0].Rows[i].ItemArray[1]; 
                list1.Add(new data1(x, y)); 
 
            } 
                con.Close(); 
 
                return list1; 
        } 
 
 
Please find the output of the sample below 
 
 
 
 
We have made sample for your reference and attached in the below location.  
 
  

Please let us know if you have any concern.

Regards,
Saravana Kumar K 
 


Ed Wagner
Replied On May 29, 2016 04:48 PM

Hello, Thank you this is exactly what I was looking for. Now the only issue I have is that the solution works great in Visual Studio, and the chart refreshes over time, when it is deployed to IIS on a Windows 2012 server the data no longer populates. I have created a SQL authenticated login for the UpdateData refreshes. What should I be looking, is it in IIS or the client?

Saravana Kumar Kanagavel [Syncfusion]
Replied On May 31, 2016 08:57 AM

Hi Wagner, 
 
Thanks for your update. We have analyzed your query and tried to reproduce the reported issue. But reported issue not reproduced at our end. Please ensure the following things in your side. 
 
·       Ensure whether the exact data is coming from the database when running the application from IIS. 
·       Ensure whether sample is hosted with IIS properly. 
·       Also check whether SQL connection is properly to connect with sample application. 
·       Can you check the web page whether chart svg element has been created? 
·       Can you provide us screenshot of the configuration and the Html elements of the webpage.  
 
Please follow the below link for hosting light switch application in IIS 
 
 
 
And if you still face any problem, please let us know by attaching following details. 
 
·       Please attach the screenshot of the error details.  
·       And let us know whether error is coming while configuring the host or run the sample.  
 
This information will be helpful for us to find and fix the issue sooner . 
Please let us know if you have any concern.

Regards,
Saravana Kumar K 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;