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. Image for the cookie policy date
close icon

Refreshing chart data from a connected datasource

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

5 Replies

AB Akbar Basha K M Syncfusion Team May 24, 2016 10:57 AM UTC

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. 



EW Ed Wagner May 25, 2016 08:51 PM UTC

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


SK Saravana Kumar Kanagavel Syncfusion Team May 27, 2016 09:40 AM UTC

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 
 



EW Ed Wagner May 29, 2016 08:48 PM UTC

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?


SK Saravana Kumar Kanagavel Syncfusion Team May 31, 2016 12:57 PM UTC

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 
 


Loader.
Live Chat Icon For mobile
Up arrow icon