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

Charts / Graphs

7 Answers 225 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bryan Doan
Top achievements
Rank 1
Bryan Doan asked on 18 Aug 2010, 08:01 PM

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!

7 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 20 Aug 2010, 01:24 PM
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
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
0
Chetan
Top achievements
Rank 1
answered on 20 Aug 2010, 02:24 PM
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
0
Steve
Telerik team
answered on 25 Aug 2010, 02:09 PM
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
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
0
Chetan
Top achievements
Rank 1
answered on 25 Aug 2010, 04:24 PM
whr is code or any documents to make it possible?
0
Peter
Telerik team
answered on 30 Aug 2010, 05:10 PM
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
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
0
Chetan
Top achievements
Rank 1
answered on 08 Oct 2010, 12:23 PM
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
0
Ves
Telerik team
answered on 13 Oct 2010, 11:55 AM
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
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
Tags
General Discussions
Asked by
Bryan Doan
Top achievements
Rank 1
Answers by
Peter
Telerik team
Chetan
Top achievements
Rank 1
Steve
Telerik team
Ves
Telerik team
Share this question
or