javascript Carousel with RadHtmlChart

2 posts, 0 answers
  1. Metallica
    Metallica avatar
    3 posts
    Member since:
    Feb 2015

    Posted 28 Nov 2016 Link to this post

    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!

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3859 posts

    Posted 01 Dec 2016 Link to this post

    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,

    Marin Bratanov
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top