locked
Ajax Dynamic Chart From Database - Rotate Series With Javascript RRS feed

  • Question

  • User2029907261 posted

    Hi,

    I'm trying to rotate the series on multiple Ajax Bar charts, which are dynamically created on page load, I have manged to find a Java script but I cant think of a way of  grabbing  the dynamic ID of each chart, as each chart is nested inside a listview.

    If I manually add the name of the chart it works (as below), I have tried  searching for a hidden field populated with the chart name, but I don't seem to be able to find it using Hiddenfield var x = document.getElementById("Test_Hidden").name; I think this is because it is also dynamically created so the name is not "Test_Hidden" but something like "MainContent_ListView1_ctrl0_Test_Hidden" ?

    Any help would be really appreciated ?

    						
         	<ajaxToolkit:BarChart ID="BarChart1" ChartType="Column"  ChartTitleColor="#0E426C" Visible = "false"
    BaseLineColor="#A156AB"  runat="server"  ValueAxisLines="2" ChartHeight="500"  Height="500" BorderStyle="None" BorderWidth="0" CssClass="span24" ></ajaxToolkit:BarChart>
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                              
    <script type="text/javascript">
    	window.onload = function () {
    	 
    	
    		
    		var $svg = $("#MainContent_ListView1_ctrl0_web50repchartsoftpublisher_1").find("svg");
    		var $series = $svg.find("text[id=SeriesAxis]");
    		$series.each(function (index, element) {
    			var $element = $(element);
    			var x = $element.attr("x");
    			var y = +$element.attr("y") + 10;
    			$element.removeAttr("x");
    			$element.removeAttr("y");
    			$element.attr("transform", "translate(" + x + ", " + y + ") rotate(-270)");
    		});
    	};
    </script>                         


     

    Monday, April 13, 2020 3:18 PM

Answers

  • User-1330468790 posted

    Hi andysismey,

     

    I understand that you want to find the id of the bar chart control using javascript code, right?

    It is not easy to fetch the dynamic ID of each chart especially for the ListView control since you could not find the clientID for it.

     

    Here is a workaround that you could use CSS class to find the target bar chart and do whatever you want to do.

    Note here I find the layout template of the ListView control first and get the bar chart then.

     

    More details, you could refer to below code (note: focus on contents in yellow background).

    .aspx page:

    <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:ListView ID="ListView1" runat="server" >
                    <LayoutTemplate>
                        <table runat="server" id="tableTemplate">
                            <tr runat="server" id="itemPlaceholder" />
                        </table>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <tr runat="server">
                            <td>
                                <asp:Label ID="IDLabel" runat="server" Text='<%#Eval("Id") %>' />
                            </td>
                            <td>
                                <asp:Label ID="NameLabel" runat="server" Text='<%#Eval("Name") %>' />
                            </td>
                            <td>
                                <ajaxtoolkit:barchart CssClass="barchart" id="BarChart1" runat="server"
                                    chartheight="300" chartwidth="450" charttype="Column"
                                    charttitle="United States versus European Widget Production"
                                    categoriesaxis="2007,2008,2009,2010,2011,2012"
                                    charttitlecolor="#0E426C" categoryaxislinecolor="#D08AD9"
                                    valueaxislinecolor="#D08AD9" baselinecolor="#A156AB">
                                <Series>
                                 <ajaxToolkit:BarChartSeries Name="United States" BarColor="#6C1E83" 
                                    Data="110, 189, 255, 95, 107, 140" />
                                 <ajaxToolkit:BarChartSeries Name="Europe" BarColor="#D08AD9" 
                                    Data="49, 77, 95, 68, 70, 79" />
                                </Series>
                                </ajaxtoolkit:barchart>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>
            </div>


    JS Script:

    <script type="text/javascript">
            $(function () {
                $('#<%=ListView1.FindControl("tableTemplate").ClientID%> tr').each(function () {
                    console.log(this);
                    $(this).find('.barchart').click(function () {
                        alert(this.id);
                    })
                });
            })
    
        </script>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 14, 2020 2:17 AM

All replies

  • User-1330468790 posted

    Hi andysismey,

     

    I understand that you want to find the id of the bar chart control using javascript code, right?

    It is not easy to fetch the dynamic ID of each chart especially for the ListView control since you could not find the clientID for it.

     

    Here is a workaround that you could use CSS class to find the target bar chart and do whatever you want to do.

    Note here I find the layout template of the ListView control first and get the bar chart then.

     

    More details, you could refer to below code (note: focus on contents in yellow background).

    .aspx page:

    <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:ListView ID="ListView1" runat="server" >
                    <LayoutTemplate>
                        <table runat="server" id="tableTemplate">
                            <tr runat="server" id="itemPlaceholder" />
                        </table>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <tr runat="server">
                            <td>
                                <asp:Label ID="IDLabel" runat="server" Text='<%#Eval("Id") %>' />
                            </td>
                            <td>
                                <asp:Label ID="NameLabel" runat="server" Text='<%#Eval("Name") %>' />
                            </td>
                            <td>
                                <ajaxtoolkit:barchart CssClass="barchart" id="BarChart1" runat="server"
                                    chartheight="300" chartwidth="450" charttype="Column"
                                    charttitle="United States versus European Widget Production"
                                    categoriesaxis="2007,2008,2009,2010,2011,2012"
                                    charttitlecolor="#0E426C" categoryaxislinecolor="#D08AD9"
                                    valueaxislinecolor="#D08AD9" baselinecolor="#A156AB">
                                <Series>
                                 <ajaxToolkit:BarChartSeries Name="United States" BarColor="#6C1E83" 
                                    Data="110, 189, 255, 95, 107, 140" />
                                 <ajaxToolkit:BarChartSeries Name="Europe" BarColor="#D08AD9" 
                                    Data="49, 77, 95, 68, 70, 79" />
                                </Series>
                                </ajaxtoolkit:barchart>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>
            </div>


    JS Script:

    <script type="text/javascript">
            $(function () {
                $('#<%=ListView1.FindControl("tableTemplate").ClientID%> tr').each(function () {
                    console.log(this);
                    $(this).find('.barchart').click(function () {
                        alert(this.id);
                    })
                });
            })
    
        </script>

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 14, 2020 2:17 AM
  • User2029907261 posted

    Hi Sean,

    That works perfectly, thank you so much for you assistance, this is my working Listview, a bit messy but it Works ! :

         <asp:ListView ID="ListView1" runat="server" GroupItemCount="3"  GroupPlaceholderID="groupPlaceHolder1"
                    ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="DataBound" DataKeyNames="Reporttitle,ReportQuery,ChartCheck,IconImage,GridCheck,Overide">
                    <LayoutTemplate>
                        <div>
                              <table runat="server" id="tableTemplate">
                            <tr runat="server" id="groupPlaceHolder1" />
                        </table>
                              
                        </div>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <tr >
    						
                            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1" ></asp:PlaceHolder>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
    					
                        <td runat="server" id="ReportSpan" style="padding:15px;" >
                            <div class="box" >
                                <div class="box-header" >
                                    <asp:Literal ID="BoxIcon" runat="server"></asp:Literal>
                              
                                    <h5><%# Eval("Reporttitle") %></h5>
                                </div>
                          
    
                        
                            <div runat="server" id="Window_Box" >
                  
               
                             <div runat="server" id="Boxscroller" > 
                                <asp:GridView visible="false" OnSorting="GridFilter_Sorting" EnableViewState="true" AllowSorting="true" OnRowDataBound="itemsGridView_RowDataBound" class="table table-striped table-bordered  table-condensed" AllowPaging="true" PageSize="10" OnPageIndexChanging="gvDetails_PageIndexChanging"  RowStyle-Wrap="true" ID="gvDetails" runat="server" AutoGenerateColumns="true" datakey="ReportQuery" >
                                    
                                </asp:GridView>
    
     <br />
    			
         	<ajaxToolkit:BarChart ID="BarChart1" ChartType="Column"  ChartTitleColor="#0E426C" Visible = "false"
    BaseLineColor="#A156AB"  runat="server"  ValueAxisLines="2" ChartHeight="500"  Height="500" BorderStyle="None" BorderWidth="0" CssClass="barchart" ></ajaxToolkit:BarChart>
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                             
    <script type="text/javascript">
    	window.onload = function () {
    	 
    	
    		var $GetChart=$('#<%=ListView1.FindControl("tableTemplate").ClientID%> tr')
    		var $svg = $($GetChart).find("svg");
    		var $series = $svg.find("text[id=SeriesAxis]");
    		$series.each(function (index, element) {
    			var $element = $(element);
    			var x = $element.attr("x");
    			var y = +$element.attr("y") + 10;
    			$element.removeAttr("x");
    			$element.removeAttr("y");
    			$element.attr("transform", "translate(" + x + ", " + y + ") rotate(-270)");
    		});
    	};
    </script>                         
                              </div></div></div>
                            
                            <div class="box-footer">
                            </div>
    
                        </td>
                    </ItemTemplate>
                </asp:ListView>

    Tuesday, April 14, 2020 9:30 AM