Pie chart with link

[Simon]

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

[Giuseppe]

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.

[Simon]

Yes this is what I need.
Thank you.

[debett]

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>

[Giuseppe]

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.