Pie chart with link

Thread is closed for posting
5 posts, 1 answers
  1. Simon
    Simon avatar
    7 posts
    Member since:
    Aug 2008

    Posted 25 Aug 2008 Link to this post

    Hi there,

    I have a client, that wants to lay some links over a pie diagramm. That means, by clicking on a piece, he wants to redirect to a predefined link. Is it possible to do this with telerik?

    Thanks for Help,
    Simon
  2. Answer
    Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 25 Aug 2008 Link to this post

    Hi Simon,

    You can achieve the desired functionality by assigning each pie an active region like this:

    <telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true"
        <Series> 
            <telerik:ChartSeries Type="Pie"
                <Items> 
                    <telerik:ChartSeriesItem YValue="10"
                        <ActiveRegion Url="http://www.telerik.com" Tooltip="Telerik" Attributes="target=_blank" /> 
                    </telerik:ChartSeriesItem> 
                    <telerik:ChartSeriesItem YValue="20"></telerik:ChartSeriesItem> 
                    <telerik:ChartSeriesItem YValue="5"></telerik:ChartSeriesItem> 
                    <telerik:ChartSeriesItem YValue="75"></telerik:ChartSeriesItem> 
                </Items> 
            </telerik:ChartSeries> 
        </Series> 
    </telerik:RadChart> 


    Hope this helps.


    Regards,
    Manuel
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Simon
    Simon avatar
    7 posts
    Member since:
    Aug 2008

    Posted 25 Aug 2008 Link to this post

    Yes this is what I need.
    Thank you.
  5. debett
    debett avatar
    30 posts
    Member since:
    Feb 2007

    Posted 31 Jul 2009 Link to this post

    How cab I do it if I have dynamically databound created items? For instance, when I don't have </telerik:ChartSeries> available at design time?
    <telerik:RadChart ID="chartInquiriesByAcademicYears" runat="server" AutoLayout="True" 
            AutoTextWrap="True" DataGroupColumn="ac_year" DataSourceID="sdsInquiriesByAcademicYears" 
            Skin="LightBlue" Width="1000px">  
            <PlotArea> 
                <XAxis DataLabelsColumn="m">  
                    <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208">  
                        <MajorGridLines Color="153, 187, 208" Width="0" /> 
                        <TextAppearance TextProperties-Color="72, 124, 160">  
                        </TextAppearance> 
                    </Appearance> 
                    <AxisLabel> 
                        <TextBlock> 
                            <Appearance TextProperties-Color="72, 124, 160">  
                            </Appearance> 
                        </TextBlock> 
                    </AxisLabel> 
                </XAxis> 
                <EmptySeriesMessage Visible="True">  
                    <Appearance Visible="True">  
                    </Appearance> 
                </EmptySeriesMessage> 
                <YAxis> 
                    <Appearance Color="153, 187, 208" MajorTick-Color="153, 187, 208" MinorTick-Color="153, 187, 208">  
                        <MajorGridLines Color="153, 187, 208" /> 
                        <MinorGridLines Color="153, 187, 208" /> 
                        <TextAppearance TextProperties-Color="72, 124, 160">  
                        </TextAppearance> 
                    </Appearance> 
                    <AxisLabel> 
                        <TextBlock> 
                            <Appearance TextProperties-Color="72, 124, 160">  
                            </Appearance> 
                        </TextBlock> 
                    </AxisLabel> 
                </YAxis> 
                <Appearance Dimensions-Margins="18%, 23%, 12%, 10%">  
                    <FillStyle MainColor="255, 255, 238" SecondColor="Transparent">  
                    </FillStyle> 
                    <Border Color="153, 187, 208" /> 
                </Appearance> 
            </PlotArea> 
            <Appearance> 
                <FillStyle MainColor="240, 252, 255">  
                </FillStyle> 
                <Border Color="182, 224, 249" /> 
            </Appearance> 
            <ChartTitle> 
                <Appearance> 
                    <FillStyle MainColor="">  
                    </FillStyle> 
                </Appearance> 
                <TextBlock Text="Actions by Months(compared to previous calendar years)">  
                    <Appearance TextProperties-Color="8, 103, 166">  
                    </Appearance> 
                </TextBlock> 
            </ChartTitle> 
            <Legend> 
                <Appearance Corners="Round, Round, Round, Round, 6">  
                    <ItemTextAppearance TextProperties-Color="62, 117, 154">  
                    </ItemTextAppearance> 
                    <Border Color="208, 237, 255" /> 
                </Appearance> 
            </Legend> 
        </telerik:RadChart> 
  6. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 03 Aug 2009 Link to this post

    Hello debett,

    You can achieve the desired functionality by handling the ItemDataBound server-side event like this:

    protected void Page_Load(object sender, EventArgs e) 
        RadChart1.ItemDataBound += new EventHandler<ChartItemDataBoundEventArgs>(RadChart1_ItemDataBound); 
        RadChart1.DataSource = new int[] { 1, 2, 3, 4, 5, 6 }; 
        RadChart1.DataBind(); 
     
    private void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e) 
        e.SeriesItem.ActiveRegion.Url = "http://www.telerik.com"
        e.SeriesItem.ActiveRegion.Tooltip = "Telerik"
        e.SeriesItem.ActiveRegion.Attributes = "target=_blank"



    Sincerely yours,
    Manuel
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017