Changing the Size of the Points -- and Removing the Colored Area beneath the Line

[Greg]

Hi,

I'm new to Telerik RAD tools, and I have a couple newbie questions:

1) I'm trying to figure out how to decrease the size of the points on a line chart.  I'd like them to go away completely, or make them so small the line masks where they are.  Is there a way to turn them off?

2) I'd like to know where it is you can change what kind of chart you're working with.  Right now, I have a LineArea chart, and I'd like to change it to just a Line chart.  For me, the default is line area, and I need the fill area beneath the line to be clear.

3) I'd also like to know how you set the speed of the animation of the line. Right now I have the animation disabled, but it would be nice to have it animate EXTREMELY fast.  Right now we have 600 points on a line graph, and I'd like to animate those points (3 major peaks) in about 3 seconds... and then perhaps repeat.  (We're simulating a heart beat EKG)

Any advice or help would be much appreciated.  Thanks so much! 

Greg

[Velin]

Hi Greg,

Here is what you should do to achieve this appearance:

1. You can change the chart type by simply changing the series definition of your DataSeries collection to LineSeriesDefinition.
2. You can hide the point marks of the series by setting the ShowPointMarks property of the series definition to false.
3. You can adjust the animation of the series by creating an AnimationSettings  object with suitable values and setting it to the AnimationSettings property of your DataSeries. You can find this in our online examples: Chart -> Customization ->Custom Animation Settings.

Following is a sample code demonstrating how to do this:

            double totalAnimationDirationInSeconds = 1d;

            DataSeries lineSeries = new DataSeries();

            lineSeries.FillWithSampleData();

            LineSeriesDefinition definition = new LineSeriesDefinition();
            definition.ShowPointMarks = false;

            AnimationSettings settings = new AnimationSettings();

            settings.TotalSeriesAnimationDuration = TimeSpan.FromSeconds(totalAnimationDirationInSeconds);
            settings.ItemAnimationDuration = TimeSpan.FromSeconds(totalAnimationDirationInSeconds / lineSeries.Count);

            definition.AnimationSettings = settings;
            lineSeries.Definition = definition;

Hope this helps.

Regards,
Velin
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Roxana C]

Hello!
Showing or hiding pointmarks on a LineSeriesDefinition in an easy task, but I cannot make this points smaller or bigger in any way, and the Telerik tutorial won't work either. This thing is critical for my chart becauze I may have more than 100 points in a serie and I might want to see them all there.

Thx!
RoxanaC

[Velin]

Hi Roxana C,

 You can use this code to change the size of the point marks:

<!--XAML-->
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
 <Style x:Name="CustomPointMarkStyle" TargetType="telerikCharting:PointMark">
                <Setter Property="Size" Value="4" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerikCharting:PointMark">
                            <Canvas>
                                <Path x:Name="PART_PointMarkPath"
                              Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                              Canvas.Top="{TemplateBinding PointMarkCanvasTop}"
                              Style="{TemplateBinding ShapeStyle}"
                              Width="{TemplateBinding Size}"
                              Height="{TemplateBinding Size}"
                              Stretch="Fill" >
                                    <Path.Data>
                                        <PathGeometry x:Name="PART_PointMarkPathGeometry" />
                                    </Path.Data>
                                </Path>
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

//Code Behind
            ISeriesDefinition def = new LineSeriesDefinition();
            def.PointMarkItemStyle = this.CustomPointMarkStyle;

Hope this will help.

Sincerely yours,
Velin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Roxana C]

Apparently using >> x:Name="CustomPointMarkStyle;"  <<  in xaml code and
>> this.CustomPointMarkStyle;  << in .xaml.cs doesn't compile

but if I use x:Key="CustomPointMarkStyle;"
&  (Style)FindResource( "CustomPointMarkStyle" ); behind the scene -  everything goes smoothly  :)

Thank you very much!
Roxana