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

Pie chart with link

4 Answers 78 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 25 Aug 2008, 09:50 AM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Giuseppe
Telerik team
answered on 25 Aug 2008, 10:12 AM
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.
0
Simon
Top achievements
Rank 1
answered on 25 Aug 2008, 11:11 AM
Yes this is what I need.
Thank you.
0
debett
Top achievements
Rank 1
answered on 31 Jul 2009, 08:32 PM
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> 
0
Giuseppe
Telerik team
answered on 03 Aug 2009, 12:13 PM
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.
Tags
Chart (Obsolete)
Asked by
Simon
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Simon
Top achievements
Rank 1
debett
Top achievements
Rank 1
Share this question
or