Docking a chart grid.

[Maurice]

Hi there.
Just started evaluating the product but am unable to quickly figure out how to make a chart dockable.  Can someone direct me to the correct implementation please.

Maurice

[Konstantina]

Hello Maurice,

In order to make a control dockable, you need to put it into a RadPane as a Content. For more information about the structure of the Docking control please refer to our online documentation.

Hope this information helps.

Greetings,
Konstantina
the Telerik team

[Maurice]

I have a project but am unable to upload it. Tried to create a bug/feature request in order to be able to upload and unable to do so. Find below the files in question.  At present, the application simply crashes.

Maurice

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;

namespace WpfChartDock
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        //RadChart ChartControl=new Telerik.Windows.Controls.RadChart();
        private void OnLoad(object sender, RoutedEventArgs e)
        {
            RadPane1.Content = new ChartPane();// new Telerik.Windows.Controls.RadChart();
            RadPane2.Content = new ChartType2();
            //eventually woul like to keep adding panes, how to do please, assuming below
            //ideally, would have a list of panes which I keep track of
            radPaneGroup1.AddItem(new RadPane(), Telerik.Windows.Controls.Docking.DockPosition.Left);
        }
    }
}

<Window x:Class="WpfChartDock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <telerik:RadDocking HasDocumentHost="True" Name="radDocking1">
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup Name="radPaneGroup1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <telerik:RadPane Header="Pane 1" Loaded="OnLoad" Name="RadPane1"/>
                <telerik:RadPane Header="Pane 2" Name="RadPane2"/>
                <telerik:RadPane Header="Pane 3" />
                <telerik:RadPane Header="Pane 4" />
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking>
</Window>


namespace WpfChartDock
{
    /// <summary>
    /// Interaction logic for ChartPaneType2.xaml
    /// </summary>
    public partial class ChartType2 : Page
    {
        private RadChart radChart=new RadChart();

        public ChartType2()
        {
            //InitializeComponent();
            AddChart();
        }

        public void AddChart()
        {
            radChart.DefaultView.ChartTitle.Content = "Year 2009";
            radChart.DefaultView.ChartLegend.Header = "Legend";
            radChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;
            //Axis X
            radChart.DefaultView.ChartArea.AxisX.Title = "Month";
            radChart.DefaultView.ChartArea.AxisX.AutoRange = false;
            radChart.DefaultView.ChartArea.AxisX.MinValue = 1;
            radChart.DefaultView.ChartArea.AxisX.MaxValue = 12;
            radChart.DefaultView.ChartArea.AxisX.Step = 1;
//            radChart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Between;

            //Axis Y
            radChart.DefaultView.ChartArea.AxisY.Title = "Quantity";

            DataSeries series = new DataSeries();
            series.Definition = new LineSeriesDefinition();
            series.LegendLabel = "Product Sales";
            series.Add(new DataPoint(1, 154));
            series.Add(new DataPoint(2, 138));
            series.Add(new DataPoint(3, 143));
            series.Add(new DataPoint(4, 120));
            series.Add(new DataPoint(5, 135));
            series.Add(new DataPoint(6, 125));
            series.Add(new DataPoint(7, 179));
            series.Add(new DataPoint(8, 170));
            series.Add(new DataPoint(9, 198));
            series.Add(new DataPoint(10, 187));
            series.Add(new DataPoint(11, 193));
            series.Add(new DataPoint(12, 212));
            radChart.DefaultView.ChartArea.DataSeries.Add(series);
        }
    }
}
<Page x:Class="WpfChartDock.ChartPaneType2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="300"
    Title="ChartPaneType2" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
</Page>

<Page x:Class="WpfChartDock.ChartPane"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="300"
       xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"      
    Title="ChartPane" xmlns:telerikChart="http://schemas.telerik.com/2008/xaml/presentation">

    <Grid>
           <telerikChart:RadChart Name="radChart1">
                <telerikChart:RadChart.DefaultView>
                    <telerikCharting:ChartDefaultView>
                        <telerikCharting:ChartDefaultView.ChartTitle>
                            <telerikCharting:ChartTitle Content="Year 2009" HorizontalAlignment="Center"/>
                        </telerikCharting:ChartDefaultView.ChartTitle>
                        <telerikCharting:ChartDefaultView.ChartLegend>
                            <telerikCharting:ChartLegend x:Name="chartLegend" Header="Legend" UseAutoGeneratedItems="True"/>
                        </telerikCharting:ChartDefaultView.ChartLegend>
                        <telerikCharting:ChartDefaultView.ChartArea>
                            <telerikCharting:ChartArea LegendName="chartLegend">
                                <telerikCharting:ChartArea.AxisX>
                                    <telerikCharting:AxisX AutoRange="False" MinValue="1" MaxValue="12" Step="1" LayoutMode="Between" Title="Month"></telerikCharting:AxisX>
                                </telerikCharting:ChartArea.AxisX>
                                <telerikCharting:ChartArea.AxisY>
                                    <telerikCharting:AxisY Title="Quantity"></telerikCharting:AxisY>
                                </telerikCharting:ChartArea.AxisY>
                                <telerikCharting:ChartArea.DataSeries>
                                    <!-- Line Chart -->
                                    <telerikCharting:DataSeries LegendLabel="Product Sales">
                                        <telerikCharting:DataSeries.Definition>
                                            <telerikCharting:LineSeriesDefinition>
                                            </telerikCharting:LineSeriesDefinition>
                                        </telerikCharting:DataSeries.Definition>
                                        <telerikCharting:DataPoint YValue="154" XValue="1"/>
                                        <telerikCharting:DataPoint YValue="138" XValue="2"/>
                                        <telerikCharting:DataPoint YValue="143" XValue="3"/>
                                        <telerikCharting:DataPoint YValue="120" XValue="4"/>
                                        <telerikCharting:DataPoint YValue="135" XValue="5"/>
                                        <telerikCharting:DataPoint YValue="125" XValue="6"/>
                                        <telerikCharting:DataPoint YValue="179" XValue="7"/>
                                        <telerikCharting:DataPoint YValue="170" XValue="8"/>
                                        <telerikCharting:DataPoint YValue="198" XValue="9"/>
                                        <telerikCharting:DataPoint YValue="187" XValue="10"/>
                                        <telerikCharting:DataPoint YValue="193" XValue="11"/>
                                        <telerikCharting:DataPoint YValue="212" XValue="12"/>
                                    </telerikCharting:DataSeries>
                                </telerikCharting:ChartArea.DataSeries>
                            </telerikCharting:ChartArea>
                        </telerikCharting:ChartDefaultView.ChartArea>
                    </telerikCharting:ChartDefaultView>
                </telerikChart:RadChart.DefaultView>
            </telerikChart:RadChart>
    </Grid>
</Page>
namespace WpfChartDock
{
    /// <summary>
    /// Interaction logic for ChartPane.xaml
    /// </summary>
    public partial class ChartPane : Page
    {
        public ChartPane()
        {
            InitializeComponent();
        }
    }
}

[Konstantina]

Hi Maurice,

The Page cannot have a RadPane as a parent. It only can have Window or Frame as a parent. If you replace the Page with UserControl the project should compile as expected.
Also, in order to attach a project  you need to open a new support ticket. The forums support attaching only images.

Please give it a try and let us know if you still experience issue.

Best wishes,
Konstantina
the Telerik team

[Maurice]

Modified the Page to User control and everything is good.  The only outstanding question is the Chart control is slow plotting when in the dock control.  At present it is only plotting 12 points.  Am looking at the possibility to plot 400k points eventually through some filtering method.  Any way to speed the plot speed?  Seems like some type of animation feature is enabled.  I set the defaultseriesdelay member to 0.  Seems to speed up but still a delay.

Would your control seem to be the right product for my needs.speed is key when plotting lines.
Can you show me how your control handles filtering when large amount of data is involved?
I noticed in the forum other users have the same issue with larger data sets but links to answers are no longer available.

Regards
Maurice

[Konstantina]

Hello Maurice,

In order to imporve the performance of the RadChart control I can suggest you to use sampling. You can find more information how to achieve this in our online documentation. Also, you can review this help article in which you can  find more tips about the optimization of the performance of the RadChart.

All the best,
Konstantina
the Telerik team