This is a migrated thread and some comments may be shown as answers.

RadHtmlChart in a RadWindow - can't load data

6 Answers 245 Views

Chart (Obsolete)

This is a migrated thread and some comments may be shown as answers.

Tim asked on 06 Sep 2013, 06:59 PM

I've got a RadWindow contentTemplate with a RadGrid and RadHtmlChart in it and I'm having trouble loading the chart data. I need to grab some values from the page before the window loads. If I rebind the grid via ajax I can load the chart via a button on the window, but it won't work using the OnClientShow event of the RadWindow. If I don't load the RadGrid via ajax I can't refresh the chart at all with values from the page. Reading the documentation on the RadHtmlChart method loadData, I'm not sure what "Invokes a light callback to the server to obtain the RadHtmlChart data." means. Is this not a real ajax call.

Here's my code. All help is appreciated.

Thanks.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestChart.ascx.cs"

Inherits="WebTechnologiesLLC.Calculators.Auto.TestChart" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadAjaxManager runat="server" ID="CUCalcsAjaxManager"

OnAjaxRequest="CUCalcsAjaxManager_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CUCalcsAjaxManager">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="AmortizationRadGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="CUCalcsMgrAjaxLoadingPanel" runat="server" Skin="Windows7"/>

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">

<script type="text/javascript">

function LoadAmortWindow() {

BindGrid();

RefreshChart();

}

function BindGrid() {

$find("<%= CUCalcsAjaxManager.ClientID %>").ajaxRequest("RebindAmortGrid");

}

function RefreshChart() {

var chart = $find("<%=AutoAffordRadChart.ClientID %>");

chart.loadData();

}

</script>

</telerik:RadCodeBlock>

<div id="mainBody" class="calcMainBodyDiv" style="float:left; width:675px">

<div id="amortizeDiv" class="calcOutputRow">

<button id="AmortizationButton" type="button">Amortization Schedule</button><br />

</div>

<div class="calcOutputRow">

<asp:TextBox ID="LoanAmtTB" runat="server" Text="10" />

</div>

<telerik:RadWindow ID="AmortizationRadWindow" runat="server" Title="Amortization Schedule"

Behaviors="Close, Move, Resize" OpenerElementID="AmortizationButton" Modal="true"

OnClientShow="LoadAmortWindow" OnClientBeforeShow="RefreshChart"

Width="600px" Height="600px" Skin="Windows7">

<ContentTemplate>

<div id="amortWindowDiv" runat="server" style="padding: 10px">

<div id="amortDiv">

<h1>Amortization Schedule</h1>

<div id="GridDiv">

<telerik:RadGrid ID="AmortizationRadGrid" runat="server"

ClientIDMode="AutoID" Skin="LegalTrak" EnableEmbeddedSkins="false"

AllowPaging="false" CssClass="calcAmortGrid"

OnNeedDataSource="AmortizationRadGrid_NeedDataSource"

AutoGenerateColumns="false" AlternatingItemStyle-BackColor="#E7EEF3" >

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="350px" />

</ClientSettings

<MasterTableView CommandItemDisplay="None"

HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Right"

AlternatingItemStyle-HorizontalAlign="Right"

FooterStyle-HorizontalAlign="Right"

FooterStyle-Font-Bold="true">

<NoRecordsTemplate>

<p style="text-align:center; font-weight:bold;">Enter your information and click "Calculate" to generate amortization schedule.</p>

</NoRecordsTemplate>

<Columns>

<telerik:GridBoundColumn HeaderText="Mth"

DataField="Month" />

<telerik:GridBoundColumn HeaderText="Payment"

DataField="Payment" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Balance"

DataField="Balance" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Interest"

DataField="MonthlyInterest" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Cummulative Interest"

DataField="CummulativeInterest" DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Principal"

DataField="MonthlyPrincipal " DataFormatString="{0:C2}" />

<telerik:GridBoundColumn HeaderText="Cummulative Principal"

DataField="CummulativePrincipal" DataFormatString="{0:C2}" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<div id="chartDiv">

<div id="amortizeDiv2" class="calcOutputRow">

<button id="ChartButton2" type="button" onclick="RefreshChart()">Chart Refresh</button>

</div>

<div style="display:inline-block;">

<telerik:RadHtmlChart runat="server" ID="AutoAffordRadChart" Width="450px"

InvokeLoadData="FromCode"

Transitions="true" Skin="Forest">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle Text="Auto Loan Costs" />

<PlotArea>

<Series>

<telerik:BarSeries DataFieldY="cost" Name="Costs">

<Appearance>

<FillStyle BackgroundColor="#f1ac4a" />

</Appearance>

<TooltipsAppearance DataFormatString="{0:C}" />

<LabelsAppearance DataFormatString="{0:C}" Position="Center" />

</telerik:BarSeries>

</Series>

<XAxis DataLabelsField="costName">

<MinorGridLines Visible="false"></MinorGridLines>

<MajorGridLines Visible="false"></MajorGridLines>

</XAxis>

<YAxis>

<TitleAppearance Text="Costs"></TitleAppearance>

<MinorGridLines Visible="false"></MinorGridLines>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

</div>

</ContentTemplate>

</telerik:RadWindow>

</div>

Code Behind:

using System;

using System.Linq;

using Telerik.Web.UI;

using System.Data;

using WebTechnologiesLLC.Modules.Calculators;

namespace WebTechnologiesLLC.Calculators.Auto

{

public partial class TestChart : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

AutoAffordRadChart.DataSource = GetChartData();

}

protected void AmortizationRadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

double rate = 4.5;

int term = 36;

double balance = 0;

double.TryParse(LoanAmtTB.Text, out balance);

AmortPayment amortSchedule = new AmortPayment();

AmortizationRadGrid.DataSource = amortSchedule.GetAmortizationSchedule(rate, balance, term);

}

public DataTable GetChartData()

{

double dpayment = 550;

double trade = 1000;

double title = 450;

double payment = 400;

double interest = 877.50;

double.TryParse(LoanAmtTB.Text, out dpayment);

DataTable costs = new DataTable("Cost");

costs.Columns.Add("costName");

costs.Columns.Add("cost");

costs.Rows.Add("Down Payment", dpayment);

costs.Rows.Add("Net Trade-In", trade);

costs.Rows.Add("Title", title);

costs.Rows.Add("Payment", payment);

costs.Rows.Add("Total Interest", interest);

DataSet ds = new DataSet("Costs");

ds.Tables.Add(costs);

return ds.Tables["Cost"];

}

protected void CUCalcsAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "RebindAmortGrid")

{

AmortizationRadGrid.Rebind();

}

6 Answers, 1 is accepted

answered on 11 Sep 2013, 03:03 PM

RadHtmlChart-loadData.zip

Hello Tim,

Could you please try to set some timeout when you invoke the chart's loadData() method? For example:

function RefreshChart() {

var chart = $find("<%=AutoAffordRadChart.ClientID %>");

setTimeout(function () {

chart.loadData();

}, 100);

}

You can also find a modified version of your sample in the attached archive.

Regards,
Danail Vasilev
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 18 Sep 2013, 02:10 PM

Hi Danail, I'm trying load a second chart in the same RadWindow and I can't seem to get two charts to load when the window opens. It only loads the last loadData() request. I can refresh the charts once the RadWindow is open with buttons, but the load functions called from OnClientShow don't work.

Any Ideas?

Thanks,
Tim

<%@ Control Language="C#" AutoEventWireup="true"

CodeBehind="TestTwoCharts.ascx.cs" Inherits="WebTechnologiesLLC.Calculators.Auto.TestTwoCharts" %>

<telerik:RadAjaxManager runat="server" ID="CUCalcsAjaxManager">

<AjaxSettings>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="CUCalcsMgrAjaxLoadingPanel" runat="server" Skin="Windows7" />

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">

<script type="text/javascript">

function LoadAmortWindow() {

var chart = $find("<%=RadChart1.ClientID %>");

var chart2 = $find("<%=RadChart2.ClientID %>");

setTimeout(function () {

chart.loadData();

chart2.loadData();

}, 500);

}

function RefreshChart1() {

var chart = $find("<%=RadChart1.ClientID %>");

chart.loadData();

}

function RefreshChart2() {

var chart2 = $find("<%=RadChart2.ClientID %>");

chart2.loadData();

}

</script>

</telerik:RadCodeBlock>

<div id="mainBody" class="calcMainBodyDiv" style="float: left; width: 675px">

<div id="amortizeDiv" class="calcOutputRow">

<button id="ChartButton" type="button">Show Charts</button><br />

</div>

<telerik:RadWindow ID="AmortizationRadWindow" runat="server" Title="Amortization Schedule"

Behaviors="Close, Move, Resize" OpenerElementID="ChartButton" Modal="true"

OnClientShow="LoadAmortWindow"

Width="600px" Height="600px" Skin="Windows7">

<ContentTemplate>

<div id="amortWindowDiv" runat="server" style="padding: 10px">

<div id="chartDiv">

<div id="amortizeDiv2" class="calcOutputRow">

<button id="ChartButton1" type="button" onclick="RefreshChart1()">Chart1 Refresh</button>

<button id="ChartButton2" type="button" onclick="RefreshChart2()">Chart2 Refresh</button>

</div>

<div style="display: inline-block;">

<telerik:RadHtmlChart runat="server" ID="RadChart1" Width="450px"

InvokeLoadData="FromCode"

Transitions="true" Skin="Forest">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle Text="Auto Loan Costs" />

<PlotArea>

<Series>

<telerik:BarSeries DataFieldY="cost" Name="Costs">

<Appearance>

<FillStyle BackgroundColor="#f1ac4a" />

</Appearance>

<TooltipsAppearance DataFormatString="{0:C}" />

<LabelsAppearance DataFormatString="{0:C}" Position="Center" />

</telerik:BarSeries>

</Series>

<XAxis DataLabelsField="costName">

<MinorGridLines Visible="false"></MinorGridLines>

<MajorGridLines Visible="false"></MajorGridLines>

</XAxis>

<YAxis>

<TitleAppearance Text="Costs"></TitleAppearance>

<MinorGridLines Visible="false"></MinorGridLines>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

<telerik:RadHtmlChart runat="server" ID="RadChart2" Width="450px"

InvokeLoadData="FromCode"

Transitions="true" Skin="Forest">

<Appearance>

<FillStyle BackgroundColor="White"></FillStyle>

</Appearance>

<ChartTitle Text="Auto Loan Costs" />

<PlotArea>

<Series>

<telerik:BarSeries DataFieldY="cost" Name="Costs">

<Appearance>

<FillStyle BackgroundColor="#f1ac4a" />

</Appearance>

<TooltipsAppearance DataFormatString="{0:C}" />

<LabelsAppearance DataFormatString="{0:C}" Position="Center" />

</telerik:BarSeries>

</Series>

<XAxis DataLabelsField="costName">

<MinorGridLines Visible="false"></MinorGridLines>

<MajorGridLines Visible="false"></MajorGridLines>

</XAxis>

<YAxis>

<TitleAppearance Text="Costs"></TitleAppearance>

<MinorGridLines Visible="false"></MinorGridLines>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

</div>

</ContentTemplate>

</telerik:RadWindow>

</div>

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Data;

using Telerik.Web.UI;

namespace WebTechnologiesLLC.Calculators.Auto

{

public partial class TestTwoCharts : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

RadChart1.DataSource = GetChartData();

RadChart2.DataSource = GetChartData2();

}

public DataTable GetChartData()

{

double dpayment = 550;

double trade = 1000;

double title = 450;

double payment = 400;

double interest = 877.50;

DataTable costs = new DataTable("Cost");

costs.Columns.Add("costName");

costs.Columns.Add("cost");

costs.Rows.Add("Down Payment", dpayment);

costs.Rows.Add("Net Trade-In", trade);

costs.Rows.Add("Title", title);

costs.Rows.Add("Payment", payment);

costs.Rows.Add("Total Interest", interest);

DataSet ds = new DataSet("Costs");

ds.Tables.Add(costs);

return ds.Tables["Cost"];

}

public DataTable GetChartData2()

{

double dpayment = 999;

double trade = 888;

double title = 444;

double payment = 333;

double interest = 1111;

DataTable costs = new DataTable("Cost");

costs.Columns.Add("costName");

costs.Columns.Add("cost");

costs.Rows.Add("Down Payment", dpayment);

costs.Rows.Add("Net Trade-In", trade);

costs.Rows.Add("Title", title);

costs.Rows.Add("Payment", payment);

costs.Rows.Add("Total Interest", interest);

DataSet ds = new DataSet("Costs");

ds.Tables.Add(costs);

return ds.Tables["Cost"];

}

answered on 23 Sep 2013, 12:35 PM

Hi Tim,

There is a known issue with RadHtmlChart's InvokeLoadData functionality when multiple charts are present on the page. Such an issue is logged as a PITS item here, so that you can monitor, comment or raise its priority by voting on it.

For the time being you can try:

either setting different timeout for loadData() method for both charts. For example:

function LoadAmortWindow() {

var chart = $find("<%=RadChart1.ClientID %>");

var chart2 = $find("<%=RadChart2.ClientID %>");

setTimeout(function () {

chart.loadData();

}, 500);

setTimeout(function () {

chart2.loadData();

}, 510);

}

or create your own callback, in order to obtain the desired data and use set_dataSource method, in order to set new datasource for the chart on the client. Such an example is illustrated in this help article and in this online demo.

You may also find useful Different ways to make a request to the server in ASP.NET blog post from Marin Bratanov.

Regards,
Danail Vasilev
Telerik