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

HorizontalStackedBarSeriesDefinition how to display data

6 Answers 129 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Luka
Top achievements
Rank 1
Luka asked on 11 Mar 2013, 08:23 AM
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>

6 Answers, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 14 Mar 2013, 08:06 AM
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.

0
Luka
Top achievements
Rank 1
answered on 15 Mar 2013, 06:48 AM
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

0
Petar Marchev
Telerik team
answered on 19 Mar 2013, 07:35 AM
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.

0
Luka
Top achievements
Rank 1
answered on 26 Mar 2013, 09:01 AM
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
0
Petar Marchev
Telerik team
answered on 28 Mar 2013, 11:55 AM
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.

0
Luka
Top achievements
Rank 1
answered on 11 Apr 2013, 07:05 AM
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
Tags
Chart
Asked by
Luka
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Luka
Top achievements
Rank 1
Share this question
or