custom markpoints

Thread is closed for posting
4 posts, 0 answers
  1. Simon Allport
    Simon Allport avatar
    32 posts
    Member since:
    Aug 2009

    Posted 30 Sep 2010 Link to this post

    Hi, I am have a point chart, and i want each point on the graph to be different,
    So for example i have the following table of data

    Name        Value
    Company    1
    Average      4
    Max             5

    I don't want to have a legend showing, so for each point, i need a different symbol and a the name next to each point.
    Is that possible??

    I have included my code below

    Thanks

    Simon

    reports rep = new reports();
    rcTechnicalDesignSpend.DataSource = rep.TestData();
    rcTechnicalDesignSpend.DataGroupColumn = "Name";
    rcTechnicalDesignSpend.PlotArea.XAxis.DataLabelsColumn = "Value";
    rcTechnicalDesignSpend.PlotArea.YAxis.MaxValue = 0;
    rcTechnicalDesignSpend.Legend.Appearance.GroupNameFormat = "#VALUE";
    rcTechnicalDesignSpend.DataBind();
    <telerik:RadChart ID="rcTechnicalDesignSpend" runat="server" DefaultType="Point" 
            BorderWidth="0" SeriesOrientation="Horizontal" Skin="Blue" 
            EnableTheming="False" Height="25px">
            <Series>
            <telerik:ChartSeries Appearance-ShowLabelConnectors="True" /> </Series>
            <Appearance>
                <Border Visible="False" />
            </Appearance>
             
            <Legend Visible="False">
                <Appearance Visible="False">
                    <ItemTextAppearance TextProperties-Color="DimGray">
                    </ItemTextAppearance>
                    <Border Color="DimGray" />
                </Appearance>
                <Marker Visible="False">
                </Marker>
            </Legend>
            <PlotArea>
              
                <XAxis Visible="False">
                    <Appearance>
                        <MajorGridLines Color="DimGray" Width="0" />
                    </Appearance>
                    <AxisLabel>
                        <Appearance RotationAngle="270">
                        </Appearance>
                        <TextBlock>
                            <Appearance TextProperties-Font="Verdana, 9.75pt, style=Bold">
                            </Appearance>
                        </TextBlock>
                    </AxisLabel>
                </XAxis>
                <YAxis Visible="True">
                    <ScaleBreaks Enabled="True">
                        <Segments>
                            <telerik:AxisSegment MaxValue="108" MinValue="20" Name="" Step="8" />
                            <telerik:AxisSegment MaxValue="4" Name="" Step="2" />
                        </Segments>
                    </ScaleBreaks>
                    <Appearance EndCap="Square" MajorTick-Visible="False" MinorTick-Visible="False" 
                        StartCap="Square" Width="3" >
                        <MajorGridLines Color="DimGray" Visible="False" />
                        <MinorGridLines Visible="False" />
                        <LabelAppearance Visible="False">
                        </LabelAppearance>
                    </Appearance>
                    <AxisLabel>
                        <Appearance RotationAngle="0">
                        </Appearance>
                        <TextBlock>
                            <Appearance TextProperties-Font="Verdana, 9.75pt, style=Bold">
                            </Appearance>
                        </TextBlock>
                    </AxisLabel>
                </YAxis>
                <YAxis2>
                    <AxisLabel>
                        <Appearance RotationAngle="0">
                        </Appearance>
                        <TextBlock>
                            <Appearance TextProperties-Font="Verdana, 9.75pt, style=Bold">
                            </Appearance>
                        </TextBlock>
                    </AxisLabel>
                </YAxis2>
                <Appearance Corners="Round, Round, Round, Round, 6">
                    <FillStyle FillType="Solid" MainColor="White">
                    </FillStyle>
                    <Border Color="DimGray" Visible="False" />
                </Appearance>
            </PlotArea>
            <ChartTitle Visible="False">
                <Appearance Visible="False" Corners="Round, Round, Round, Round, 6" 
                    Dimensions-Margins="4%, 10px, 14px, 0%" Position-AlignedPosition="Top">
                    <FillStyle GammaCorrection="False" MainColor="224, 224, 224">
                    </FillStyle>
                    <Border Color="DimGray" />
                </Appearance>
                <TextBlock>
                    <Appearance TextProperties-Font="Verdana, 11.25pt">
                    </Appearance>
                </TextBlock>
            </ChartTitle>
        </telerik:RadChart>
  2. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 06 Oct 2010 Link to this post

    Hello Simon Allport,

    When using DataGroupColumn the chart series are created dynamically and their number depends on the number of distinct values in that column. In this case, with 3 different values you would get 3 ChartSeries with one item each. You can wire the DataBound event to loop through these ChartSeries and customize them:

    void rcTechnicalDesignSpend_DataBound(object sender, EventArgs e)
        {
            Color[] colors = new Color[] { Color.Red, Color.Green, Color.Blue };
            string[] shapes = new string[] { "Rectangle", "Triangle", "Ellipse" };
            for (int i = 0; i < rcTechnicalDesignSpend.Series.Count; i++)
            {
                rcTechnicalDesignSpend.Series[i].Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
                rcTechnicalDesignSpend.Series[i].Appearance.FillStyle.MainColor = colors[i];
                rcTechnicalDesignSpend.Series[i].Appearance.PointShape = shapes[i];
            }
        }


    I have attached a small example, based on your code.

    Best regards,
    Ves
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Simon Allport
    Simon Allport avatar
    32 posts
    Member since:
    Aug 2009

    Posted 22 Oct 2010 Link to this post

    Hi,
    Thanks for that it works brilliantly, also is there a way to the  name next to markspoints as well?

    Thanks

    Simon
  5. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 27 Oct 2010 Link to this post

    Hello Simon,

    You can add this line before databinding the chart:

    rcTechnicalDesignSpend.DataManager.LabelsColumn = "Name";

    where "Name"  is the name of the column, holding the values you need as labels. This will instruct the chart to populate the labels with the values from this column.

    Best regards,
    Ves
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top