Update google line chart with new data from database

[Jishnu U]

Hi

I'm using Bortosky Google Visualisation Library  http://code.google.com/p/bortosky-google-visualization/  

to plot a line chart on my web page. I need to update the chart when I new data is put into the data base, i tried using update panel. But it doesnt work. Im doing this for the first time, if Im totally wrong.If so

How would I implement it.?

Here is the code im working on: 

 <asp:UpdatePanel ID="UpdatePanel3"   runat="server" UpdateMode="Conditional">
                        <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" />
                        </Triggers> 
                        <contenttemplate>


  <%@ Import Namespace = "WeatherLibrary" %>

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {

     Label1.Text = DateTime.Now.ToLongTimeString();

     Label2.Text = DateTime.Now.ToLongDateString();
     PullData();


         var googleDataTable = new Bortosky.Google.Visualization.GoogleDataTable(getData(0));

         Page.ClientScript.RegisterStartupScript(
             this.GetType(), "vis", string.Format("var fundata = {0};", googleDataTable.GetJson()), true);
 }



   System.Data.DataTable getData(int  i) // a DataTable filled using a custom library
    {
        var dt = new System.Data.DataTable();
        String[] sensorName = new String[] { "umtTemp1", "umtWindSpeed" };
        dt.Columns.Add("Time", typeof(System.String)).Caption = "Time Stamp";
        dt.Columns.Add("Value", typeof(System.Double)).Caption = "Measured Value";
        WeatherData wLib = new WeatherData();
        DateTime baseDate = DateTime.Today;
        var format = "yyyy-MM-dd HH:mm:ss";

        var now = DateTime.Now.ToString(format);
        var frm = baseDate.AddHours(-1).ToString(format);

        var value = wLib.GetWeatherItemData(sensorName[i], frm, now).Value;
        var time = wLib.GetWeatherItemData(sensorName[i], frm,now).TimeStamp;
        var k=0;

     for ( k = 0; k < value.Length; k++)
      {
         dt.Rows.Add(new object[] { time[k], Math.Round(value[k],1) });

      }

        return dt;
    }

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load("visualization", "1", { "packages": ["corechart"] });
    google.setOnLoadCallback(function () {
        var data = new google.visualization.DataTable(fundata, 0.5);
        var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
        chart.draw(data, { title: "Chart1", hAxis: { title: "Time Stamp" }, vAxis: { title: "Measured Value"} });
    });
</script>
  </contenttemplate>
 </asp:UpdatePanel>


<div id="chart_div" style="width:100%; height: 500px;">
</div>

[asgallant]

What does an ASP update panel do?  How is "fundata" getting populated?

[Jishnu U]

Well from what i know Update panel just updates asp panel according to a timer tick.  Then data is populated using the getData() function. As I said before I used Bortosky's Libs for using google chart in asp.net. So these libs convert my ASP type data table to google type data table as seen in Page_Load()

[Jishnu U]

By anyway the update panel is not doing the job. So I am removing that from the code. 

[asgallant]

Generally speaking, the way updates like this are handled is by setting up a data source that outputs the data as a JSON string, and using a AJAX query to get the updated data from the source.  What you might do is create an APS page that outputs the value returned by getData(), and then use something like jQuery's AJAX function to fetch that page.

[Jishnu U]

Im sorry ..i really dont know any AJAX or jQuery.. can u pls show some way to do it..?

[asgallant]

The jQuery AJAX stuff is easy.  You need to load the jQuery library in your HTML code; if you don't have it locally on your server, you can use the version hosted by google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Then you can load the data with this:

google.load("visualization", "1", { "packages": ["corechart"] });
google.setOnLoadCallback(function () {

    var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
    
    function getData () {
        $.ajax({
            url: 'path/to/data/source',
            type: 'POST',
            data: {
                // this is where you would put any query parameters
            },
            success: function (response) {
                var data = new google.visualization.DataTable(response);

                chart.draw(data, {
                    title: "Chart1",
                    hAxis: {
                        title: "Time Stamp"
                    }, 
                    vAxis: {
                        title: "Measured Value"
                    }
                });
            }
        });
    }
    

    google.visualization.events.addListener(chart, 'ready', function () {
        // set up a timer to reload the data
        setTimeout(getData, /* time between reloads, in ms */);
    });
    
    // load the data into the charts for the initial state
    getData();
});

Getting the data source up and running should be some variant of outputting the results from the ASP getData function into it's own page.

[asgallant]

That depends on how your data source is set up.  If your data source accepts a time stamp like that and only sends back new data, then you can add the new data to your DataTable (or update the old data, depending on whether this is an addition or replacement of data).  How you go about that depends on the way the data is set back from the server.

Long story short, yes it could be as easy as calling the DataTable's #addRows method.  The DataTable and chart would not have to be in global scope (I generally recommend against having anything in global scope if you can avoid it), but they probably should be in scope for your data updating function, though you could code it such that they don't have to be.

On Wednesday, November 14, 2012 3:42:18 PM UTC-5, Justin Novack wrote:

This REPLACES the current DataTable, is there a recommended way to UPDATE or ADD to the existing DataTable?

I believe the original poster wants to keep all the current data, but just update from his last retrieval.  How does one keep track of the last data sent and request data from last successful request?

I assume having a global last_timestamp variable and sending that at the end of 'path/to/data/source?last_timestamp=123456". But if the url passes back the last minutes' worth of data, is it as simple as iterating through the data and using chart.addRows()? Would you have to globalize chart?