Custom Icon On Chart + Remove Background

Thread is closed for posting
6 posts, 0 answers
  1. Rasin Vadim
    Rasin Vadim avatar
    22 posts
    Member since:
    Dec 2006

    Posted 13 Jul 2008 Link to this post

    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.
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 14 Jul 2008 Link to this post

    Hi Rasin Vadim,

    Onto your questions:
    1. RadChart supports custom images backgrounds, but I am afraid a combination of a color and a custom image is not possible.
    2. 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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rasin Vadim
    Rasin Vadim avatar
    22 posts
    Member since:
    Dec 2006

    Posted 15 Jul 2008 Link to this post

    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.
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 16 Jul 2008 Link to this post

    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
  6. Rasin Vadim
    Rasin Vadim avatar
    22 posts
    Member since:
    Dec 2006

    Posted 16 Jul 2008 Link to this post

    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.
  7. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 17 Jul 2008 Link to this post

    Hello Rasin,

    I am sorry to hear that the proposed workaround does not meet your requirements. Indeed, it would be difficult to map the top left corner of a rectangular image to a position in a pie segment.

    Onto your suggestion -- yes, RadChart exposes Save method, which will allow you to save the chart image to a file or a memory stream. Then you can update it according to your requirements, save it to a file and use it to replace RadChart in the page.

    Greetings,
    Ves
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017