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

Custom Icon On Chart + Remove Background

5 Answers 344 Views

Chart (Obsolete)

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

Rasin Vadim asked on 13 Jul 2008, 02:35 PM

Hi telerik team.

I have 2 questions.

1. I would like to know if i can add an custom image inside the ChartSeriesItem so it will look like this.

2. Please tried to get rid of all the background of my chart with no luck. please see the screen shot.

also here is the code of my page that the chart is in:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Assembly="Telerik.Charting, Version=2.0.2.0, Culture=neutral, PublicKeyToken=d14f3dcc8e3e8763" 
        
                Namespace="Telerik.Charting" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
                <script language="javascript" type="text/javascript">  
        
            // <!CDATA[  
        
            function Button2_onclick() {  
        
            var service = new MyService();  
        
            service.DoWork(MyCallback, null, null);  
        
            }  
        
            function MyCallback(stam)  
        
            {  
        
                var txt1 = document.getElementById('txt1');  
        
                txt1.value = stam.StringValue;  
        
            }  
        
            // ]]> 
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                </div> 
        
                <input id="txt1" type="text" /> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    <Services> 
        
                        <asp:ServiceReference Path="MyService.svc" /> 
        
                    </Services> 
        
                </asp:ScriptManager> 
        
                <input id="Button2" type="button" value="button" onclick="return Button2_onclick()" /> 
        
                <br /> 
        
                <br /> 
        
                <telerik:RadChart ID="RadChart1" runat="server" Skin="Web20" Width="250px" Height="250px" 
        
                    AutoLayout="true" IntelligentLabelsEnabled="true">  
        
                    <Appearance Border-Visible="false" Dimensions-Margins="0">  
        
                        <FillStyle MainColor="blue">  
        
                            <FillSettings> 
        
                            </FillSettings> 
        
                        </FillStyle> 
        
                    </Appearance> 
        
                    <Legend Visible="false"></Legend> 
        
                    <PlotArea Appearance-Border-Visible="false">  
        
                        <XAxis MaxValue="5" MinValue="1" Step="1">  
        
                        </XAxis> 
        
                        <YAxis MaxValue="25" Step="5">  
        
                        </YAxis> 
        
                        <YAxis2 MaxValue="5" MinValue="1" Step="1">  
        
                        </YAxis2> 
        
                    </PlotArea> 
        
                    <ChartTitle Visible="false">  
        
                    </ChartTitle> 
        
                    <Legend Visible="false"></Legend> 
        
                    <Series> 
        
                        <telerik:ChartSeries Name="Series 1" Type="Pie">  
        
                            <Appearance ExplodePercent="5" Border-Width="2" Border-Color="#f8f9fb" ShowLabelConnectors="false" 
        
                                ShowLabels="true" StartAngle="-90">  
        
                            </Appearance> 
        
                            <Items> 
        
                                <telerik:ChartSeriesItem YValue="4" Name="Item 1">  
        
                                    <PointAppearance Visible="true"></PointAppearance> 
        
                                    <Label> 
        
                                        <TextBlock Text="4%">  
        
                                        </TextBlock> 
        
                                    </Label> 
        
                                    <Appearance Exploded="true">  
        
                                        <FillStyle MainColor="#b5e379" SecondColor="#b5e379">  
        
                                            <FillSettings> 
        
                                            </FillSettings> 
        
                                        </FillStyle> 
        
                                    </Appearance> 
        
                                </telerik:ChartSeriesItem> 
        
                                <telerik:ChartSeriesItem YValue="10" Name="Item 1">  
        
                                    <Appearance Exploded="true">  
        
                                        <FillStyle MainColor="#b5e379" SecondColor="#b5e379">  
        
                                            <FillSettings> 
        
                                            </FillSettings> 
        
                                        </FillStyle> 
        
                                    </Appearance> 
        
                                </telerik:ChartSeriesItem> 
        
                                <telerik:ChartSeriesItem YValue="4" Name="Item 1">  
        
                                    <Appearance Exploded="true">  
        
                                        <FillStyle MainColor="#b5e379" SecondColor="#b5e379">  
        
                                            <FillSettings> 
        
                                            </FillSettings> 
        
                                        </FillStyle> 
        
                                    </Appearance> 
        
                                </telerik:ChartSeriesItem> 
        
                                <telerik:ChartSeriesItem YValue="4" Name="Item 1">  
        
                                    <Appearance Exploded="true">  
        
                                        <FillStyle MainColor="#b5e379" SecondColor="#b5e379">  
        
                                            <FillSettings> 
        
                                            </FillSettings> 
        
                                        </FillStyle> 
        
                                    </Appearance> 
        
                                </telerik:ChartSeriesItem> 
        
                                <telerik:ChartSeriesItem YValue="30" Name="Item 2">  
        
                                    <Appearance> 
        
                                        <FillStyle MainColor="#fc6c58" SecondColor="#fc6c58">  
        
                                            <FillSettings GradientMode="BackwardDiagonal">  
        
                                            </FillSettings> 
        
                                        </FillStyle> 
        
                                    </Appearance> 
        
                                </telerik:ChartSeriesItem> 
        
                                <telerik:ChartSeriesItem YValue="48" Name="Item 3">  
        
                                    <Appearance> 
        
                                        <FillStyle MainColor="#e0e8f1" SecondColor="#e0e8f1">  
        
                                            <FillSettings GradientMode="ForwardDiagonal">  
        
                                            </FillSettings> 
        
                                        </FillStyle> 
        
                                    </Appearance> 
        
                                </telerik:ChartSeriesItem> 
        
                            </Items> 
        
                        </telerik:ChartSeries> 
        
                    </Series> 
        
                </telerik:RadChart> 
        
                </form> 
        
            </body> 
        
            </html>

Any help will be greatly appritiated!
Rasin Vadim.

5 Answers, 1 is accepted

answered on 14 Jul 2008, 04:14 PM

Hi Rasin Vadim,

Onto your questions:

RadChart supports custom images backgrounds, but I am afraid a combination of a color and a custom image is not possible.
The blue color seems to be there due to the <Appearance> tag in RadChart. You can modify it like this:

    
            <telerik:RadChart ID="RadChart1" runat="server" Skin="Web20" Width="250px" Height="250px" 
        
                        AutoLayout="true" IntelligentLabelsEnabled="true"> 
        
                        <Appearance Border-Visible="false" Dimensions-Margins="0"> 
        
                            <FillStyle MainColor="White" FillType="Solid"> 
        
                            </FillStyle> 
        
                        </Appearance> 
        
                        <Legend Visible="false"></Legend> 
        
                        <PlotArea> 
        
                            <Appearance Border-Visible="false" > 
        
                                <FillStyle MainColor="White" FillType="Solid"></FillStyle> 
        
                            </Appearance> 
        
                            <XAxis MaxValue="5" MinValue="1" Step="1">

Hope this helps.

Sincerely yours,
Ves
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 15 Jul 2008, 10:51 AM

Hi Ves.

Thank you for your answers however they don't suit my needs.

1. I think that telerik should offer max customization of the chart including the option to add custom icons on the Chart items programmatically like in this example. So please think about adding this feature to the chart control. And also please advice if there is any way (no matter how hard-coded it will be) to implement the example using the chart control.

2. As i mentioned in my question i wanted to get rid of the blue color - not change it. I want that there will be no background so the main width and the height properties that i set in my chart control will not be margin. for example this is my chart control output now and i want it to look like this.

Thanks in advance.
Rasin Vadim.

answered on 16 Jul 2008, 10:43 AM

PieChart.zip

Hello Rasin,

A possible way to add image to a pie slice is to provide your own image with the background you need and set the ChartSeriesItem.Appearance.FillStyle.FillType property to Image. Then modify the FillSettings like this:

<FillSettings ImageAlign="Center" ImageDrawMode="Align" BackgroundImage="~/MyImage.gif">
</FillSettings>

You can find attached sample, showing this. As for the blue color -- I am sorry for the misunderstanding here. You will need to set AutoLayout property to false and modify the PlotArea Margins, just set all of them to 0px. This is also shown in the attached page.

Hope this helps.

Best wishes,
Ves
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 16 Jul 2008, 02:52 PM

Hey Ves.

Thank you very much for the solution and for your efforts, however this solution is not working good. I'll explain:

- If you'll change the yvalue of the image slice the icon will appear in random places.
- My mission was to place the icon in the top left edge of the slice. I've modified the icon you've attached to the solution and made sure he is in the top left corner as shown here. ( i've enlarged the icon image by 200% because i don't want to stretch it for the slice's background. ) the solution above works great if my slice is the first and is less then 50% of the pie. Otherwise its just wont work.

Do you have another idea of how to implement it or at least to make it work dynamically, supporting all sizes and all places?

Anyway i am very grateful for the second answer. its indeed satisfying my need.

Please get back to me with the solution to first issue. i thought of a different approach... Maybe the is a way to get the image buffer from the chart control and to modify it by code? for example opening an Image variable and paint on it objects using the system.drawing objects?

Just an idea...

Thank you very much.
Rasin Vadim.