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
4 Answers, 1 is accepted
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
Rank 1
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.
[/quote]
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?
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
Rank 1
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