HorizontalStackedBarSeriesDefinition how to display data

7 posts, 0 answers
  1. Luka
    Luka avatar
    7 posts
    Member since:
    Mar 2013

    Posted 11 Mar 2013 Link to this post

    Hi!
    I have a simple task to be done! I have to display a chart using <RadChart> (like one in attachment). It is a simple horizontal bar (I guess with two series STOPPED, ACTIVE). 

    The chart should display time o X axis and tho series of graph (red for STOPPED, green for ACTIVE). Assumig I can use the DLYChartPoint structure. Or not?!

    I have problems displaying the data, so a little help would be appreciate.

    Thanks in advice!

    My code:
    C#:
    public class DLYChartPoint : LPDEntityStatus
    	{
    		#region Private
    		string label;
    		double value;
    	        long uniqueId;
     
    		#endregion
    
    	// other class structures
    }

    ------------------------------------------------------------------------------------------
    public ObservableCollection<DLYChartPoint> TimeLineChart
    


    WPF:
    <telerik:RadChart x:Name="timeLineChart" ItemsSource="{Binding TimeLineChart, Mode=TwoWay}">
        <telerik:RadChart.DefaultView>
            <telerik:ChartDefaultView>
                <telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartLegend Visibility="Collapsed" />
                </telerik:ChartDefaultView.ChartLegend>
            </telerik:ChartDefaultView>
        </telerik:RadChart.DefaultView>
        <telerik:RadChart.SeriesMappings>
    		<telerik:SeriesMapping>
    			<telerik:SeriesMapping.SeriesDefinition>
                    <telerik:HorizontalStackedBarSeriesDefinition ></telerik:HorizontalStackedBarSeriesDefinition>
    			</telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="Label" FieldName="Value"></telerik:ItemMapping>
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Value"></telerik:ItemMapping>
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Label"/>
                </telerik:SeriesMapping.ItemMappings>
    		</telerik:SeriesMapping>
    	</telerik:RadChart.SeriesMappings>
    </telerik:RadChart>
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 14 Mar 2013 Link to this post

    Hi Luka,

    When using RadChart you need to create a series mapping for each series you need. In your case you only have one series mapping, when you mentioned that you need two series. I do not fully understand your scenario from this single attachment but perhaps you need three series for this (active1, stopped, active2). I have attached a simple project using both the old RadChart and the new RadChartView. If you have not yet integrated the RadChart into your app, I suggest that you choose the new ChartView set of controls as it has a much greater performance and is generally more flexible.

    I would also like to point you to our RadTimeline control. The reason for this is that you are using time data and it might be more appropriate to use the timeline control for this purpose. In the attached project you may find a basic set up which presents active/stopped/active data. You can also check out the RadTimeline online demos here.

    Let us know if you need further assistance.

    Regards,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Luka
    Luka avatar
    7 posts
    Member since:
    Mar 2013

    Posted 15 Mar 2013 Link to this post

    Ok let me explain the details:

    I have this class:
    public class TimelineChartPoint {
        bool stopped;
     
        public bool Stopped
        {
            get { return stopped; }
            set { stopped = value; }
        }
    
        int duration; //seconds
     
        public int Duration
        {
            get { return duration; }
            set { duration = value; }
        }
    }

    Than I have this list (which I want to display as a chart):
    List<TimelineChartPoint> timelineStoppage = new List<TimelineChartPoint>();
    

    Assuming I have this table of mock data:

    Stopped | Duration
    -----------+------------
         1       |       2
         0       |       3
         1       |       1
         0       |       4
         1       |       1

    So I have no idea how to set up the <radchart> series to obtain a chart like the one sketched in the attached pic in this post.

    An example on this scenario would be excellent!

    Thanks, Luka

  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 19 Mar 2013 Link to this post

    Hello Luka,

    One way to go here is to use a BarSeries with a Stacked CombineMode. You may also use a DataTemplate to color the bars as needed. See attached project.

    All the best,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Luka
    Luka avatar
    7 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    Seem like what I was looking for, but we (company) are using an older version and the Telerik.Windows.Controls.Chart.DLL is not present....

    Is there a similar solution possible with RadChart?

    Regards, Luka
  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 28 Mar 2013 Link to this post

    Hi Luka,

    RadChart has a different engine and lays out the items in a slightly different manner. This is why to achieve the same look some code behind is needed. I have attached a project to demonstrate one way to do this. See the SetupChart2 method.  

    Greetings,
    Petar Marchev
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Luka
    Luka avatar
    7 posts
    Member since:
    Mar 2013

    Posted 11 Apr 2013 Link to this post

    Hi Petar!

    The SetupChart1 is what I was looking for! Thanks a lot!
    And another thing; despite we are using the MVVM model for our app, so I was wondering how to bind data directly in the XAML.

    Suppose you have the ObservableCollection<TimelineChartPoint> TimelineChart already filled and you want to bind it in the XAML!

    <telerik:RadCartesianChart x:Name="timelineChart" Background="White">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis />
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:CategoricalAxis />
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:BarSeries CombineMode="Stack" PointTemplate="{StaticResource BarTemplate}" ItemsSource="{Binding ???}" />
    </telerik:RadCartesianChart>


    Regards Luka
Back to Top
UI for WPF is Visual Studio 2017 Ready