RadChart customization

[Jitendra Mandalia]

Dear Friends,

I would like to achieve below functionality in my chart. I want to know whether below things are possible with telerik silverlight chart controls or not. I am using Q2 release for evaluation and planning to buy Q3 release.

1. Is it possible to change color for each line of the line chart based on XValue in code behind? If so then what are the ways to achieve the same?
2. How to use text values for X-Axis values? It only allows double value and data time values. I am using XCategory for now, is it the only way to achieve this?
3. How to change location of legend? I want to get it displayed at the bottom of the chart and want to have chart expanded horizontally to the full size of chart
4. When I plot the line chart, by default it cuts the first and the last point, looks like ends abruptly. How can I draw chart and also have space before and after first and last data point respectively?

Kindly let me know the same.

Appreciate your time.

Thanks

[Dwight]

Hello Jitendra,

1. There is a way to change the color of each line, depending on X value. Here is an example, which does something similar.
2. XCategory is used when the data is not sequential, i.e. values on the X have no meaning, for examle when the chart presents information for different companies (whose names are placed on the X axis) or other entities. In case X value is present in the data, and something else should be placed on the X axis, you need to go through the RadChart.DefaultView.ChartArea.AxisX.TickPoints collection and set Label for each TickPoint.
3. The First Look example demonstrates a custom RadChart layout using multiple ChartArea and ChartLegends.
4. Can you, please, provide a sample application, that exposes the described behavior so that we can analyze it?
   

Best,
Evtim
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.

[Jitendra Mandalia]

Hi EVtim,

Thanks for your reply.

I would like to ask you few more points about the RadChart.

1. Is it possible to change color for each line of the line chart based on YValue in code behind? If so then what are the ways to achieve the same? Is it MVVM only which would solve this? As I want to display Red line whe the line in the chart is crossing certain values.

2. We planned to use FusionCharts in past before exploring the Telerik charts. FusionCharts are in Flash and that is why we decided to go with Telerik. I saw there that, changing the chart type is very easy for the client from UI. All the processing happens at client side only and user can change from Line chart to bar chart to any other 2D or 3D charts.  How such a thing be possible in RadCharts?

3. Also I would like to know about the animation customization. The animation shown when Line charts or other charts are displayed in RadChart is good. But we also liked the one in FusionCharts too. Is it possible to completely modify how the animation happens when charts drawn?

4. In case of #4 below where I mentioned that when we load the line chart by default it starts from the Y-Axis (see Nov 08 X-Axix value) and at the start and at the end, the chart YValue point marker (circle at every YValue) get displayed half cut and gives feeling that chart ended abruptly. What we want is to have space before both the start and after the end of the line chart (have one more tick point before start and after the end to show some space at both the side). We are using XCategory for the line chart as we have string values as X-Axis values and so we can not use any property which can start a chart with 0 as start point.

I am just loading RadChart in Grid layout and bindig the data to it and not changing any other property of the chart.

Please see the attached image of the chart for the same.

Please bear my questions if I am repeating something as I just started learning silverlight and I might ask you which might be easy to implement in Silverlight.
 
Thanks,
Jitendra

[Dwight]

Hi Jitendra,

Straight to the answers:

1. Currently, the only way to change the colors of RadChart elements is through the MVVM pattern. It is currently only possible to customize the line color by segment.
2. To change the appearance of a series, you need to change DataSeries.Definition. The change is reflected in the RadChart immediately.
3. Animations customization is possible through RadChart.AnimationSettings and DataSeries.Definition.AnimationSettings. Further customizations require re-templating the respective data series.
4. Please, test this scenario with the Q3 release (which is already available for download) and let me know if the problem persist.

Kind regards,
Evtim
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.

[Simon Chan]

I am working on a spline line chart with the same requirement to change the line color based on YValue. I tried and managed to build a bar chart of which the bar color was changed by data binding according to the demo sample code. However, I tried but failed to get the the template of spline line chart with Microsoft Expression Blend 3.

Would you please post a sample code or the custom template of a spline line chart?

Thanks,
Simon

[Dwight]

Hello Simon,

The Bar chart consists of separate bars and thus there is an item for each bar. The Spline is a single element and coloring it requires a different approach. Here is a sample example:
XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Style x:Key="SplineStyle" TargetType="charting:SelfDrawingSeries">
            <Setter Property="BorderLineStyle">
                <Setter.Value>
                    <Style TargetType="Shape" >
                        <Setter Property="StrokeThickness" Value="5.0" />
                        <Setter Property="Stroke">
                            <Setter.Value>
                                <LinearGradientBrush MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="0,1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0" Color="Red" />
                                        <GradientStop Offset="0.5" Color="Yellow" />
                                        <GradientStop Offset="1" Color="Green" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <t:RadChart x:Name="radChart1" />
</Grid>

Code-behind:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        this.radChart1.DefaultView.ChartArea.SeriesStyles.SplineSeriesStyle = this.LayoutRoot.Resources["SplineStyle"] as Style;
    }
}

(see the attached screenshot)

Regards,
Evtim
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.

[Simon Chan]

The sample code only change the style of a Spline line in static way. My objective is to change the stroke color with data binding. In other words,the stroke color of the first n points is red and the remaining is green. n is not a constant and is driven by data.

I'm using MVVM approach and the data is bind to a view model with two fields, YValue and StrokeColor.

Would you please re-work your sample based on my requirement?

Thanks,
Simon

[Dwight]

Hello Simon,

Currently, such scenario is not possible to achieve with line chart.

All the best,
Evtim
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.

[Kiran Ghanwat]

The same problem I am facing (like point 4 in Jitendra's post).
The last point of X-axis goes out side of the chart area and when I export it to PNG it gets cutted.
Even though I m using 2010.1.309.1030 Version.

Please find images attached.

[Dwight]

Hello Kiran,

Please, find the answer to your question in the thread posted by Kiran Ghanwat.

Greetings,
Joshua
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.

[Thirusenthil]

Hi,

Is it possible to see some code sample on how the data is bind to chart (in Silverlight -> Chart).
Or Could you give me some link where i could see this?

[Missing User]

Hello Thirusenthil,

Please check out data binding support overview in RadChart's help section. From there, you can choose a help topic that will better fit your specific scenario.

Regards,
Ivan N.
the Telerik team