Charts / Graphs

[Bryan Doan]

Hello Telerik Admin,

 

I am brand new to telerik and have been reading/researching but still not sure what I'm doing is the right way... 

 

Basically I need to create a series of charts/graphs.  Is there an easy way to do this by using telerik report wizard?  Can I use the Chart icon from the Toolbox under Telerik Reporting Q2 2010 menu?

I am trying to drag and drop the Chart icon from the Telerik Reporting Q2 2010 menu to the designer but don't know how to bind the datasource to the graphs...

Would you please help?  Is there a tutorial/documentations on how to create charts/graphs by using the report wizard? 

Thanks!

[Peter]

Hello Bryan Doan,

The Chart Wizard is leftover from the RadChart and it can be used to bind the chart as the report data items follow different flow. However it is in our TO DO list to update the Chart item to provide some UI to help in binding. In the meantime our suggestion is to connect the Chart Item to a Data Source Component through the Chart's DataSource property. To invoke the DataSource Wizard click on the Chart's DataSource property once the datasource is set up the chart will generate all the necessary Chart Items and Series for you.

Sincerely yours,
Peter
the Telerik team

[Chetan]

hello Peter ,

could u pls send me the code to create stacked bar chart?

I m lokng for design page code only not codebehind code.

pls try to solve it

Thanks
CSN

[Steve]

Hello Chetan,

The explanation from my colleague's post describes how to add series and items through the property grid of the chart i.e. in the report designer. You do not have to write any code manually with this approach - have you given it a try and what is giving you hard time?

Sincerely yours,
Steve
the Telerik team

[Chetan]

whr is code or any documents to make it possible?

[Peter]

Hello Chetan,

I have attached a sample report with a Stacked Bar Chart. To create the Stacked Bar Chart I have added two Chart Series of Type StackedBar and used the Cars class for a datasource.

Sincerely yours,
Peter
the Telerik team

[Chetan]

Hello Telerik Admin,

Could you please help me to solve out below problem?

I need to change Chart Bar ( telerik:RadChart.PaletteBrushes) color using ResourceDictionary. Below is the code.

Please reply ASAP.




1. XAML code . ---

                

<

 

UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="LeMonNext.Client.Modules.ProjectCockpit.Views.ReleaseView.ReleaseScheduleEffortChart"

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

 

 

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

 

 

mc:Ignorable="d"

 

 

d:DesignHeight="300" d:DesignWidth="400">

 

 

 

 

<UserControl.Resources>

 

 

 

<ResourceDictionary >

 

 

 

<ResourceDictionary.MergedDictionaries >

 

 

 

<ResourceDictionary Source="/LeMonNext.Client.Modules.ProjectCockpit;component/Style/Resource.xaml"></ResourceDictionary>

 

 

 

</ResourceDictionary.MergedDictionaries>

 

 

 

</ResourceDictionary>

 

 

 

</UserControl.Resources>

 

 

 

<telerik:RadChart x:Name="chartScheduleEffort" Height="100"

 

 

Style="{StaticResource CustomChartStyle}"

 

 

ItemsSource="{Binding ReleaseAssociatedFeatures}" >

 

 

 

<telerik:RadChart.DefaultView>

 

 

 

<telerik:ChartDefaultView>

 

 

 

<telerik:ChartDefaultView.ChartArea>

 

 

 

<telerik:ChartArea >

 

 

 

<telerik:ChartArea.AxisX >

 

 

 

<telerik:AxisX LayoutMode="Inside" TicksDistance="1" >

 

 

 

</telerik:AxisX>

 

 

 

</telerik:ChartArea.AxisX>

 

 

 

<telerik:ChartArea.AxisY >

 

 

 

<telerik:AxisY Title="Scheduled Effort(Hours)"

 

 

AutoRange="False"

 

 

Step="{Binding Step}"

 

 

MinorTicksVisibility="Collapsed"

 

 

MinorGridLinesVisibility="Collapsed"

 

 

DefaultLabelFormat="#VAL{}"

 

 

StripLinesVisibility="Collapsed"

 

 

MaxValue="{Binding YMaxValue}"

 

 

>

 

 

 

</telerik:AxisY>

 

 

 

</telerik:ChartArea.AxisY>

 

 

 

</telerik:ChartArea>

 

 

 

</telerik:ChartDefaultView.ChartArea>

 

 

 

<telerik:ChartDefaultView.ChartLegend>

 

 

 

<telerik:ChartLegend Visibility="Collapsed" />

 

 

 

</telerik:ChartDefaultView.ChartLegend>

 

 

 

</telerik:ChartDefaultView>

 

 

 

</telerik:RadChart.DefaultView>

 

 

 

<telerik:RadChart.SeriesMappings>

 

 

 

<telerik:SeriesMapping>

 

 

 

<telerik:SeriesMapping.SeriesDefinition >

 

 

 

<telerik:HorizontalBarSeriesDefinition

 

 

ShowItemLabels="false"

 

 

ShowItemToolTips="True"

 

 

ItemToolTipFormat="Scheduled Effort : #DATAITEM.TotalScheduledEffort Hours">

 

 

 

</telerik:HorizontalBarSeriesDefinition>

 

 

 

</telerik:SeriesMapping.SeriesDefinition>

 

 

 

<telerik:ItemMapping DataPointMember="XCategory" FieldName="ReleaseDescription" />

 

 

 

<telerik:ItemMapping DataPointMember="YValue" FieldName="TotalScheduledEffort" />

 

 

 

</telerik:SeriesMapping>

 

 

 

</telerik:RadChart.SeriesMappings>

 

 

 

 

<telerik:RadChart.PaletteBrushes>

 

 

 

<SolidColorBrush Color="Orange" />

 

 

 

</telerik:RadChart.PaletteBrushes>

 

 

 

 

</telerik:RadChart>

 

 

</

 

UserControl>

 

----------

2. Resource.XAML Code

<

 

ResourceDictionary

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

 

 

 

 

<LinearGradientBrush x:Key="ChartBackGroundLinearBrush1">

 

 

 

<GradientStop Color="#FFF8F8F8" Offset="1" /> <!--#FFF8F8F8-->

 

 

 

<GradientStop Color="#FF5883A5" /> <!--#FF5883A5-->

 

 

 

</LinearGradientBrush>

 

 

 

<SolidColorBrush x:Key="ChartBorderSolidBrush" Color="#585ED681"></SolidColorBrush>

 

 

 

<SolidColorBrush x:Key="ChartBackGroundLinearBrush" Color="White"></SolidColorBrush>

 

 

 

<SolidColorBrush x:Key="ChartOpacityMaskSolidBrush" Color="#FFBEDC9C"></SolidColorBrush>

 

 

 

<SolidColorBrush x:Key="ChartPaletteBrushes" Color="DarkGray" >

 

 

 

 

</SolidColorBrush>

 

 

 

 

<Style x:Key="CustomLegendStyle" TargetType="telerik:ChartLegend">

 

 

 

<Setter Property="Padding" Value="4,0,0,0"></Setter>

 

 

 

<Setter Property="HorizontalAlignment" Value="Right"></Setter>

 

 

 

<Setter Property="VerticalAlignment" Value="Bottom"></Setter>

 

 

 

<Setter Property="FontSize" Value="11"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Bold" ></Setter>

 

 

 

<Setter Property="Margin" Value="0,20,0,0"></Setter>

 

 

 

<Setter Property="UseAutoGeneratedItems" Value="True"></Setter>

 

 

 

<Setter Property="MaxHeight" Value="30"></Setter>

 

 

 

<Setter Property="MinHeight" Value="30"></Setter>

 

 

 

<Setter Property="Header" Value=""></Setter>

 

 

 

<Setter Property="Background" Value="White" ></Setter>

 

 

 

<Setter Property="FontStretch" Value="Normal" ></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomChartAreaStyle" TargetType="telerik:ChartArea" >

 

 

 

<Setter Property="FontSize" Value="11"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Bold"></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomChartStyle" TargetType="telerik:RadChart" >

 

 

 

<Setter Property="FontSize" Value="11"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Normal" ></Setter>

 

 

 

<Setter Property="LegendStyle" Value="{StaticResource CustomLegendStyle}" ></Setter>

 

 

 

<Setter Property="Background" Value="White"></Setter>

 

 

 

<Setter Property="OpacityMask" Value="#FFBEDC9C"></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomTileViewStyle" TargetType="telerik:RadTileView" >

 

 

 

<Setter Property="Background" Value="Transparent" ></Setter>

 

 

 

<Setter Property="MaxColumns" Value="2"></Setter>

 

 

 

<Setter Property="Height" Value="700"></Setter>

 

 

 

<Setter Property="VerticalAlignment" Value="Top" ></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomTileViewItemStyle" TargetType="telerik:RadTileViewItem" >

 

 

 

<Setter Property="VerticalAlignment" Value="Top" ></Setter>

 

 

 

<Setter Property="HorizontalAlignment" Value="Left" ></Setter>

 

 

 

<Setter Property="Foreground" Value="DarkBlue" ></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomLabelStyle" TargetType="TextBlock" >

 

 

 

<Setter Property="Foreground" Value="Black" ></Setter>

 

 

 

<Setter Property="FontSize" Value="12"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Bold" ></Setter>

 

 

 

<Setter Property="VerticalAlignment" Value="Center" ></Setter>

 

 

 

<Setter Property="HorizontalAlignment" Value="Left" ></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomLabelTextStyle" TargetType="TextBlock" >

 

 

 

<Setter Property="Foreground" Value="Black" ></Setter>

 

 

 

<Setter Property="FontSize" Value="11"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Normal" ></Setter>

 

 

 

<Setter Property="VerticalAlignment" Value="Center" ></Setter>

 

 

 

<Setter Property="HorizontalAlignment" Value="Left" ></Setter>

 

 

 

<Setter Property="TextWrapping" Value="Wrap"></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomComboBoxStyle" TargetType="telerik:RadComboBox" >

 

 

 

<Setter Property="FontSize" Value="11"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Normal" ></Setter>

 

 

 

<Setter Property="VerticalAlignment" Value="Center" ></Setter>

 

 

 

<Setter Property="HorizontalAlignment" Value="Left" ></Setter>

 

 

 

<Setter Property="Margin" Value="2,0,0,0" ></Setter>

 

 

 

<Setter Property="Width" Value="400" ></Setter>

 

 

 

</Style>

 

 

 

<Style x:Key="CustomHeaderedContentControlStyle" TargetType="telerik:HeaderedContentControl" >

 

 

 

<Setter Property="FontSize" Value="13"></Setter>

 

 

 

<Setter Property="FontFamily" Value="Arial"></Setter>

 

 

 

<Setter Property="FontWeight" Value="Bold" ></Setter>

 

 

 

<Setter Property="Foreground" Value="Black" ></Setter>

 

 

 

<Setter Property="Background" Value="LightGray" ></Setter>

 

 

 

<Setter Property="VerticalAlignment" Value="Center" ></Setter>

 

 

 

<Setter Property="HorizontalAlignment" Value="Left" ></Setter>

 

 

 

<Setter Property="Width" Value="994" ></Setter>

 

 

 

<Setter Property="Height" Value="250" ></Setter>

 

 

 

 

</Style>

 

 

 

</

 

ResourceDictionary>

 

Thanks

Chetan

[Ves]

Hi Chetan,

I have provided an example in my reply to your support ticket regarding the same question. For the sake of completeness, I have attached that example here as well.

Regards,
Ves
the Telerik team