Charts / Graphs

8 posts, 0 answers
  1. Bryan Doan
    Bryan Doan avatar
    14 posts
    Member since:
    May 2010

    Posted 18 Aug 2010 Link to this post

    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!

  2. Peter
    Admin
    Peter avatar
    1611 posts

    Posted 20 Aug 2010 Link to this post

    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
  3. DevCraft banner
  4. Chetan
    Chetan avatar
    11 posts
    Member since:
    Aug 2010

    Posted 20 Aug 2010 Link to this post

    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
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 25 Aug 2010 Link to this post

    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
  6. Chetan
    Chetan avatar
    11 posts
    Member since:
    Aug 2010

    Posted 25 Aug 2010 Link to this post

    whr is code or any documents to make it possible?
  7. Peter
    Admin
    Peter avatar
    1611 posts

    Posted 30 Aug 2010 Link to this post

    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
  8. Chetan
    Chetan avatar
    11 posts
    Member since:
    Aug 2010

    Posted 08 Oct 2010 Link to this post

    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
  9. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 13 Oct 2010 Link to this post

    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
Back to Top
DevCraft banner