custom markpoints

[Simon Allport]

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>

[Ves]

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

[Simon Allport]

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

Thanks

Simon

[Ves]

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