[Solved] Chart in Grid View

[Andy Macourek]

I want to have a grid view with a chart in each item.  Each of my objects that I will be binding the grid item to will has the data for each chart (date and a value).  How can I have a chart control defined in the grid so that when I bind to the object, the chart will display for each item?

[Georgi]

Hi Andy,

Thank you for contacting us and for your question.

Since the GridView is an ItemsControl, you may modify the ItemTemplate property and put the Chart into the visual tree of the DataTemplate. More information about the DataTemplate and how it is used may be found here:

DataTemplate class


You may also find similar example code in our Quick Start application - a shortcut to the solution is placed on your Desktop. You may even explore the code within the application itself - more information may be found on this blog post:

Using Quick Start application

I hope this information is useful. Let me know if I can assist you in some other way.

Regards,
Georgi
the Telerik team

[Andy Macourek]

I might not have been clear in my question.  What I want is to be able to have standalone XAML definition of the chart control that has all the data in the definition itself.  I will use this as the template to use in the grid view item definition.

[Georgi]

Hi Andy,

Thanks for getting back to us.

Besides the sample code in our Quick Start application, you may also take a look in our documentation - available as a compiled CHM as well as online:

http://www.telerik.com/help/windows-8-xaml/radchart-overview.html
http://www.telerik.com/help/windows-8-xaml/radchart-axes-datetimeaxes.html
http://www.telerik.com/help/windows-8-xaml/radchart-axes-linearaxis.html

If you still experience problems to get familiar with the component could you please share your feedback on what prevented you from finding the needed information in our help resources - Demo Application, Blog Posts and Online Documentation.

Thanks in advance for your time, I am looking forward to your reply.

Kind regards,
Georgi
the Telerik team

[Andy Macourek]

Here is the XAML of the page

        <GridView HorizontalAlignment="Left" Padding="20,0,20,0" Name="TestGrid"
                  VerticalAlignment="Top"  SelectionMode="None"
            Height="400" Margin="51,134,0,0" Grid.Row="1">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <telerik:RadCartesianChart Width="100" Height="100">
                        <telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:DateTimeContinuousAxis/>
                        </telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:RadCartesianChart.VerticalAxis>
                            <telerik:LinearAxis/>
                        </telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LineSeries ItemsSource="{Binding ChartData}">
                        </telerik:LineSeries>
                    </telerik:RadCartesianChart>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

Here is the back end

    public class ChartDataItem
    {
        public DateTime XData { get; set; }
        public double YData { get; set; }
    }

    public class TestObject
    {
        public string ChartTitle { get; set; }
        public List<ChartDataItem> ChartData { get; set; }
    }

....


    List<TestObject> stuff = new List<TestObject>(0);
    TestObject o = new TestObject();
    o.ChartTitle = "Test Title";
    o.ChartData = new List<ChartDataItem>(0);

    ChartDataItem i;
    i = new ChartDataItem();
    i.XData = DateTime.Parse("10/26/2012 10:00 AM");
    i.YData = 100;
    o.ChartData.Add(i);

    i = new ChartDataItem();
    i.XData = DateTime.Parse("10/26/2012 11:00 AM");
    i.YData = 300;
    o.ChartData.Add(i);

    i = new ChartDataItem();
    i.XData = DateTime.Parse("10/26/2012 12:00 AM");
    i.YData = 200;
    o.ChartData.Add(i);

    stuff.Add(o);
    TestGrid.ItemsSource = stuff;

It is not working and crashing. Please assist

[Andy Macourek]

Okay, I have my chart rendering based on my data.  I had to manually sort the data by data to get the data to render properly even though the data was added in date order.  Now, the problem I am having is that the date is not formatting on the x-axis.  If I do not apply formatting, the date shows as a full string, but I only want the hour and minute to show.

<DataTemplate>
    <telerik:RadCartesianChart Width="700" Height="200">
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:DateTimeContinuousAxis LabelFitMode="None" LabelFormat="hh:mm" >
            </telerik:DateTimeContinuousAxis>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:LineSeries ItemsSource="{Binding ChartData}">
            <telerik:LineSeries.ValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="YData"></telerik:PropertyNameDataPointBinding>
            </telerik:LineSeries.ValueBinding>
            <telerik:LineSeries.CategoryBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="XData"></telerik:PropertyNameDataPointBinding>
            </telerik:LineSeries.CategoryBinding>
        </telerik:LineSeries>
    </telerik:RadCartesianChart>
</DataTemplate>

The problem is that all the labels are just the string "hh:mm"

[Ivaylo Gergov]

Hi, Andy

Thanks for getting back to us.

In order to format the label to fit your scenario you can use the following formatting logic (coming from the String.Format routine):

LabelFormat="{}{0:hh:mm}"

More information is available in our online documentation:

http://www.telerik.com/help/windows-8-xaml/radchart-axes-axis.html

I hope this helps. Let me know if I can assist you in some other way.

 

All the best,
Ivaylo Gergov
the Telerik team