Hi, i have a big problem:
How can i "replicate" dynamically, my chart inside a carousel item(like in bold selection, changing the id name...)?
Situation: i have a javascript/jquery carousel plugin. In a static situation( making two distinct divs, i can alternate between 2 divs, because i have the ID name....no problem at all...but imagine that i need make more dynamically divs and alternate between then with carousel plugin.
So, i have to build this "new" divs and put my chart inside of each new one div. How can i do that ???
Take a look my html code for one div, this will be my "model" to be follow:
<asp:UpdatePanel ID="updPaginaMaster" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="PaginaMaster" style="background-color: black;" runat="server">
<div class="row-fluid">
<div class="span12">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" runat="server" id="car">
<div class="item">
<table width="100%" align="center">
<tr>
<td width="100%" colspan="2" style="border: 2px solid; color: white">
<telerik:RadHtmlChart runat="server" ID="graTotalRecinto" CssClass="graficoBarra">
<ClientEvents OnLoad="onChartLoad" />
<PlotArea>
<Series>
<telerik:BarSeries Name="GTVs Processadas" DataFieldY="Vr_Conferido" Stacked="true">
<LabelsAppearance Color="White" Position="Center">
<ClientTemplate>
#if (dataItem.Vr_Conferido > 14.00)
{#
Total GTVs Conferidas - #=dataItem.Qt_Conferido#\n
#=dataItem.Vr_Conferido#%\n
GTVs Processadas - #=dataItem.Qt_TempoLinha#
#}
else if (dataItem.Vr_Conferido < 3.00)
{#
#}
else if (dataItem.Vr_Conferido < 5.00)
{#
#=dataItem.Vr_Conferido#%
#}
else
{#
#=dataItem.Qt_Conferido#\n
#=dataItem.Vr_Conferido#%\n
#=dataItem.Qt_TempoLinha#
#} #
</ClientTemplate>
</LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{0:2}%">
</TooltipsAppearance>
</telerik:BarSeries>
<telerik:BarSeries Name="GTVs Pendentes" DataFieldY="Vr_Pendente">
<LabelsAppearance Color="White" Position="Center">
<ClientTemplate>
#if (dataItem.Vr_Pendente > 14.00)
{#
GTVs Pendentes - #=dataItem.Qt_Pendente#\n
#=dataItem.Vr_Pendente#%\n
Tempo Estimado - #=dataItem.Qt_TempoEstimado#
#}
else if (dataItem.Vr_Pendente < 3.00)
{#
#}
else if (dataItem.Vr_Pendente < 5.00)
{#
#=dataItem.Vr_Pendente#%
#}
else
{#
#=dataItem.Qt_Pendente#\n
#=dataItem.Vr_Pendente#%\n
#=dataItem.Qt_TempoEstimado#
#} #
</ClientTemplate>
</LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{0:2}%">
</TooltipsAppearance>
</telerik:BarSeries>
</Series>
<XAxis>
</XAxis>
</PlotArea>
<ChartTitle Text="">
<Appearance>
</Appearance>
</ChartTitle>
</telerik:RadHtmlChart>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center" class="Numerario">Informação do Numerário Processado
</td>
</tr>
<tr>
<td width="50%" style="border: 2px solid; color: white;">
</td>
<td width="50%" style="border: 2px solid; color: white;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Thanks!
1 Answer, 1 is accepted
Hi,
You can create several server controls via a control like a Repeater. They will get their own unique dynamic IDs so you can have multiple RadHtmlChart instances on the page.
Or, you can move to using the Kendo Chart widget directly (RadHtmlChart is a server wrapper over it). You can create the Kendo Chart dynamically with JavaScript, as it is a jQuery based widget.
Regards,
Telerik by Progress