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

javascript Carousel with RadHtmlChart

1 Answer 29 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Metallica
Top achievements
Rank 1
Metallica asked on 28 Nov 2016, 08:08 PM

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

Sort by
0
Marin Bratanov
Telerik team
answered on 01 Dec 2016, 04:44 PM

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.
Tags
Chart (HTML5)
Asked by
Metallica
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or