Real Time SQL Update

5 posts, 0 answers
  1. Kevin J
    Kevin J avatar
    17 posts
    Member since:
    Jun 2008

    Posted 29 Oct 2015 Link to this post

    Hello,

     Does anyone have an example to do the following?

     I have a RadHTMLChart on an ASP.NET form.

    I have this bound to the SQL select.

    It displays the data in the chart perfectly.  No problems.

    What I want to do, is make it so that the RadHTMLChart is updated when the data is changed.

    I have created a JavaScript iteration, and I call the Repaint on the RadHTMLChart, but this does not appear to query the data again.  (I can't tell if that is the problem, or the problem is that the Ajax isn't displaying the results.  Not sure how to figure out which is the problem?)

    I have looked at the Telerik examples extensively, and I've seen the real time examples regarding static data (Not from SQL) and I've seen the SQL examples that are not real-time.  I'm looking for an example that basically puts the two together.  A real time way to update the RadHTMLChart when the data is changed.

     If this isn't clear, let me know and I'll reword it.  Any basic examples that anyone has would be great.  I just need something to work off of, because I can't seem to get the results I need from the examples I've found online.

     

    Thank You

    Kevin J Baird

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 Oct 2015 Link to this post

    Hello Kevin,

    Please examine the following demos that show how to bind the chart client-side/server-side:
        - Client-side binding. The example shows how to dynamically change the data source (you need to repaint the chart after passing the new data).
         - Server-side binding. The example shows how to bind a DataTable to the chart server-side. You should call the DataBind() method of the chart after passing the new data. You may also find useful this example (http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx) that showcases how to change the SqlDataSourceID of the chart dynamically.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin J
    Kevin J avatar
    17 posts
    Member since:
    Jun 2008

    Posted 30 Oct 2015 in reply to Danail Vasilev Link to this post



    Please examine the following demos that show how to bind the chart client-side/server-side:
        - Client-side binding. The example shows how to dynamically change the data source (you need to repaint the chart after passing the new data).
         - Server-side binding. The example shows how to bind a DataTable to the chart server-side. You should call the DataBind() method of the chart after passing the new data. You may also find useful this example (http://demos.telerik.com/aspnet-ajax/htmlchart/examples/drilldownchart/defaultcs.aspx) that showcases how to change the SqlDataSourceID of the chart dynamically.

     

     

    Thanks for the response Danal.

    In the first example you have posted, the "data" is created by hand in the JavaScript.  It is not SQL data.  Is there an example/way to use a new SQL query for the results in the chart?  And not do it via Server?

     It's pretty simple what I am after.  It's a single meter.  Shows the count of total boxes on the shelf.  For instance, it shows 512 boxes in the RadHTMLChart.

    Now... Someone adds a new box to the SQL table.  I'd like the meter to query that same query again, and show 513 boxes without refreshing the entire browser page.

    When I do a repaint, it doesn't "appear" to run the query again.  I am not sure if that is correct.   Does the repaint perform the query again?  So the results could be different if the data has changed?

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 04 Nov 2015 Link to this post

    Hi Kevin,

    If I correctly understand you want to ajaxify a chart, bound to SQL DataSource. You can examine the code below which illustrates such a sample. When the button is clicked the select parameter of the SqlDataSource is changed, so it is with the chart's data.

    C#:
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        SqlDataSource1.SelectParameters[0].DefaultValue = "2";
    }

    ASPX:
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadButton ID="RadButton1" runat="server" Text="Change SQL Query" OnClick="RadButton1_Click" />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                SelectCommand="SELECT [Year], [Value] FROM [Data] WHERE ([Subcategory_Id] = @catID)">
                <SelectParameters>
                    <asp:Parameter Name="catID" DefaultValue="1" />
                </SelectParameters>
            </asp:SqlDataSource>
            <telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1"
                DataSourceID="SqlDataSource1">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="Value" Name="Electricity Consumption">
                            <TooltipsAppearance Color="White" />
                        </telerik:ColumnSeries>
                    </Series>
                    <XAxis DataLabelsField="Year">
                        <LabelsAppearance RotationAngle="75">
                        </LabelsAppearance>
                        <TitleAppearance Text="Year">
                        </TitleAppearance>
                    </XAxis>
                    <YAxis>
                        <TitleAppearance Text="MWh">
                        </TitleAppearance>
                    </YAxis>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <ChartTitle Text="Electricity Consumption">
                </ChartTitle>
            </telerik:RadHtmlChart>
        </telerik:RadAjaxPanel>
    </form>

    You can also use RadAjaxManager or a simple ASP:UpdatePanel for the purpose.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Kevin J
    Kevin J avatar
    17 posts
    Member since:
    Jun 2008

    Posted 04 Nov 2015 in reply to Danail Vasilev Link to this post

    Thanks Danail, this is what I ended up doing.  I couldn't find a way to requery the data completely through the client (With no code behind) but I wasn't able to get the result I needed without a postback.  So ultimately I requery in the postback and just bind the data again.  Which is fine, might as well obfuscate the SQL data anyway.

     

    Thanks for your help!

    Kevin

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017