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

custom markpoints

3 Answers 126 Views

Chart (Obsolete)

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

Simon Allport asked on 30 Sep 2010, 05:04 PM

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>

3 Answers, 1 is accepted

answered on 06 Oct 2010, 08:06 AM

difshapes.zip

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

answered on 27 Oct 2010, 10:05 AM

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