Create gadgets using Telerik charts

[Arun]

Hi,

I am new to telerik controls. Can someone help to achieve this.

I have multiple collections of data with key and value pair. I need to draw a gadget/ DoughnutSeries  series chart to show the actual vs target percentage.

For example, to show number of accidents happened with in and out of the city I need to show two series separately. Can we achieve this using chartseriesprovider? otherwise we need to add each series manually? If we get any reference with example would be great. Kindly find the attached image for reference.

 

Thanks in Advance,

Arun

 

 

[Ivan]

Hello Arun,

In case you start new development we would like to advise you to use the RadChartView control instead of RadChart. RadChartView is the new charting control with a lot of improvements compared to the old one. You can read about the differences between them in this RadChart vs RadChartView article.

It doesn't become very clear what you mean by using two separate series. Please find attached a sample project that demonstrates usage of the PieChart. If you need further assistance please provide us with more detailed information about your data and some picture of how these two series should be visualized.

Regards,
Ivan
Telerik

[Arun]

Thanks for the reply. The reference project is really helpful. Somehow I achieved the expected output by using item template to draw number of charts for a collection.

 

 I need another clarification regarding the radcartesian charts. Please find the below carifications.

 

1. I am using radcartesian line chart and using series provider binding a collection to draw dynamic series of line chart. For line color I am having static resource of ChartPalette where we having list of colors. I need to use the same color for point showing on the each series. For example if a line drawn with blue color the point needs to be in blue color with circle and if a line drawn with yellow then point should be in yellow. So when we draw dynamic series with more lines by mapping to custom palatte colors how we can achieve the point in same color line. Please find the attached image.

 

2. when I compare two series in barchart I need to show a arrow indicator whether the series increased or decreased compared to threashold value. How we can achieve this. Please find the attached image.

 

3. For Line chart I need to show legends as per the line symbol, I hope it can be achieved using legend setting template. References are welcome.

 

4. Can we create popup to show new chart if we click on a chart bar of year - expecting show the new chart of months chart for the year.

 

Sample code which I am using..

 

<Telerik:RadCartesianChart x:Name="CompChart" HoverMode="FadeOtherSeries" Palette="{StaticResource customPalette}" ScrollViewer.HorizontalScrollBarVisibility="Auto" Grid.Row="1"  Foreground="#00ffcc">
                <Telerik:RadCartesianChart.VerticalAxis>
                    <Telerik:LinearAxis Title="عدد المخالفات" LabelTemplate="{StaticResource labol}"/>                   
                </Telerik:RadCartesianChart.VerticalAxis>
                <Telerik:RadCartesianChart.HorizontalAxis>
                    <Telerik:CategoricalAxis LabelTemplate="{StaticResource labol}"  LabelFitMode="MultiLine"/>                  
                   
                </Telerik:RadCartesianChart.HorizontalAxis>

                <Telerik:RadCartesianChart.Behaviors>
                    <Telerik:ChartTooltipBehavior VerticalOffset="7"/>
                </Telerik:RadCartesianChart.Behaviors>

                <Telerik:RadCartesianChart.TooltipTemplate>
                    <DataTemplate>
                        <Grid IsHitTestVisible="False">
                            <Border BorderBrush="DarkGray" BorderThickness="1" CornerRadius="1">
                                <StackPanel Background="WhiteSmoke" >
                                    <TextBlock FontSize="11" Text="{Binding Value}" Padding="2,2,2,0" />
                                </StackPanel>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </Telerik:RadCartesianChart.TooltipTemplate>

                <Telerik:RadCartesianChart.SeriesProvider>
                    <Telerik:ChartSeriesProvider Source="{Binding DataCollection}">
                        <Telerik:ChartSeriesProvider.SeriesDescriptors>
                            <Telerik:CategoricalSeriesDescriptor ItemsSourcePath="Details" ValuePath="Value" CategoryPath="Key">
                                <Telerik:CategoricalSeriesDescriptor.Style>
                                    <Style TargetType="Telerik:BarSeries">
                                        <Setter Property="CombineMode" Value="Cluster"/>

                                        <Setter Property="ShowLabels" Value="False"/>

                                        <Setter Property="LegendSettings">
                                            <Setter.Value>
                                                <Telerik:SeriesLegendSettings Title="{Binding LegendName}" />
                                            </Setter.Value>
                                        </Setter>

                                    </Style>
                                </Telerik:CategoricalSeriesDescriptor.Style>

                            </Telerik:CategoricalSeriesDescriptor>
                        </Telerik:ChartSeriesProvider.SeriesDescriptors>
                    </Telerik:ChartSeriesProvider>
                </Telerik:RadCartesianChart.SeriesProvider>

            </Telerik:RadCartesianChart>

            <Telerik:RadLegend FlowDirection="RightToLeft" Foreground="#00ffcc" ScrollViewer.HorizontalScrollBarVisibility="Auto" Items="{Binding ElementName=AccidentsChart, Path=LegendItems}" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                <Telerik:RadLegend.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </Telerik:RadLegend.ItemsPanel>
            </Telerik:RadLegend>

 

 

[Ivan]

Hi Arun,

In case of asking additional questions we would like to advise you to open new topic instead of continuing the communication in the same one. About these four questions:

1. To bind the color of the point to the color of the series you can use an approach with an IValueConverter:

public class SeriesToPaletteColorConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter,                       System.Globalization.CultureInfo culture)
   {
     var series = (CartesianSeries)value;
     var chart = (RadCartesianChart)series.Chart;
     var seriesIndex = chart.Series.IndexOf(series);

     var entry = chart.Palette.GetEntry(series, seriesIndex);

     if (entry.HasValue)
     {
       return entry.Value.Stroke ?? entry.Value.Fill;
    }

    return null;
  }

  public object ConvertBack(object value, Type targetType, object parameter,                      System.Globalization.CultureInfo culture)
  {
     throw new NotImplementedException();
  }
}

<telerik:CategoricalSeriesDescriptor ItemsSourcePath="LineDetails"
ValuePath="Value"
CategoryPath="Key">
   <telerik:CategoricalSeriesDescriptor.Style>
       <Style TargetType="telerik:LineSeries">
            <Setter Property="CombineMode" Value="Cluster"/>
            <Setter Property="ShowLabels" Value="True"/>
            <Setter Property="PointTemplate">
            <Setter.Value>
                <DataTemplate>
                     <Ellipse Height="5" Width="5"
                                   Fill="{Binding Presenter, Converter={StaticResource seriesToPaletteColorConverter}}" />
                 </DataTemplate>
             </Setter.Value>
           </Setter>
         </Style>
       </telerik:CategoricalSeriesDescriptor.Style>
</telerik:CategoricalSeriesDescriptor>

This is demonstrated in the first attached project.

2. You can add arrow indicators using the chart's Annotations and LabelDefinition. Please take a look also at the SDK Example about AnnotationTypes.

3. As for showing legend items, can you tell us what do you mean by 'as per the line symbol'? If you mean that to each of the line series must correspond a legend item, this can be done in the way you have started in the xaml code you provided us - using SeriesLegendSettings. Please find it in the first attached project. Note that this legend corresponds to the line series in the attached project. You can also check the Marker Geometry help article.

4. We advise you not to do this with popup, but instead position additional chart somewhere around the main one. You can bind it to the selected point of the first chart that will hold the collection with the months data. When a point of the first chart is selected, the second chart will be populated with the collection in the first chart's selected point. This is demonstrated in the second attached project.

I hope this is useful.

Regards,
Ivan
Telerik

[Arun]

Thanks for the response and project. it really useful to me.