Using Chart Areas but can not view the charts after 1st run

[Kemal]

Hi...
I'm defining the chart areas and all other properties on run time.
Chart areas and their titles are defined as two different arrays.
Mappings are connected with the chart areas over ChartAreaName.
When you press the report button for the first time: all charts in the chart areas appear perfectly but when you press the report button for the second or third times then titles appear but the charts in the chart areas don't.
I checked the Data Table that I'm binding; there is no problem with it.

Can you help me?




 

[Nikolay]

Hello Kemal,

Would it be possible to isolate the issue in a sample application and send it to us, so that our developers could reprodue and debug it in order to find the root cause for this unexpected behavior.

Kind regards,
Nikolay
the Telerik team

[Kemal]

CodeBehind
------------------------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Reflection;

using DT;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;
using Telerik.Windows.Controls.Common;
using Reports.Common;            


.
.
.


        private void DrawChart(DataTable dt, Enums.ChartDefinition cd)
            {
                #region Degiskenler
                    Telerik.Windows.Controls.Charting.ChartTitle[] chartTitle = new Telerik.Windows.Controls.Charting.ChartTitle[dt.Columns.Count - 1];
                    Telerik.Windows.Controls.Charting.ChartArea[] chartArea = new Telerik.Windows.Controls.Charting.ChartArea[dt.Columns.Count - 1];
                    Grid chartLayout = new Grid();
                    ColumnDefinition cDefinition = new ColumnDefinition();
                    ChartLegend chLegend = new ChartLegend();
                #endregion

                #region Temel Yapılandırmalar

                radChart.Width = 700;
                radChart.HorizontalAlignment = HorizontalAlignment.Center;
                radChart.Margin =new Thickness(0,0,0,0);
                radChart.UseDefaultLayout = false;
                radChart.ItemsSource = null;
                radChart.SeriesMappings.Clear();
                grdChart.Visibility = Visibility.Visible;

                #endregion

                radChart.Content = null;
                radChart.Content = chartLayout;

                chartLayout.ColumnDefinitions.Add(new ColumnDefinition());
                chartLayout.ColumnDefinitions.Add(new ColumnDefinition());
                chartLayout.ColumnDefinitions.Add(new ColumnDefinition());
                
                chartLayout.ColumnDefinitions[0].Width = new GridLength(300, GridUnitType.Pixel);
                chartLayout.ColumnDefinitions[1].Width = new GridLength(300, GridUnitType.Pixel);
                chartLayout.ColumnDefinitions[2].Width = new GridLength(100, GridUnitType.Auto);

                #region Creating Rows For Titles and Charts

                radChart.Height = 235 * Convert.ToInt32(Math.Ceiling(((dt.Columns.Count - 1) / 2.0)));

                for (int i = 0; i < Convert.ToInt32(Math.Ceiling(((dt.Columns.Count - 1) / 2.0))); i++)
                {
                    chartLayout.RowDefinitions.Add(new RowDefinition());//Title
                    chartLayout.RowDefinitions[chartLayout.RowDefinitions.Count-1].Height =new GridLength(35, GridUnitType.Pixel);
                    chartLayout.RowDefinitions.Add(new RowDefinition());//Chart
                    chartLayout.RowDefinitions[chartLayout.RowDefinitions.Count-1].Height =new GridLength(200, GridUnitType.Pixel);
                }

                #endregion

                #region Chart Titles / Chart Areas
                   
                    chLegend.Visibility = Visibility.Visible;
                    chLegend.HorizontalAlignment = HorizontalAlignment.Stretch;
                    chLegend.VerticalAlignment = VerticalAlignment.Stretch;
                    chLegend.UseAutoGeneratedItems = true;

                    chLegend.Name = "chLegend";
                    chLegend.Header = "";

                    chartArea = null;
                    chartArea = new Telerik.Windows.Controls.Charting.ChartArea[dt.Columns.Count - 1];

                    for (int i = 0; i < dt.Columns.Count - 1; i++)
                    {
                        chartTitle[i] = new ChartTitle();

                        chartTitle[i].Content = dt.Columns[i + 1].ColumnName;
                        chartTitle[i].Height = 35;
                        chartTitle[i].HorizontalAlignment = HorizontalAlignment.Center;
                        chartTitle[i].VerticalAlignment = VerticalAlignment.Top;
                        chartTitle[i].VerticalContentAlignment = VerticalAlignment.Top;
                        chartLayout.Children.Add(chartTitle[i]);
                        Grid.SetColumn(chartTitle[i], i % 2);
                        Grid.SetRow(chartTitle[i], Convert.ToInt32(Math.Floor(i / 2)) * 2);

                        chartArea[i] = new Telerik.Windows.Controls.Charting.ChartArea();
                        chartArea[i].Name = dt.Columns[i + 1].ColumnName;
                        chartArea[i].Width = 300;
                        chartArea[i].Height = 200;
                        
                        if(i == 0)
                            chartArea[i].Legend = chLegend;

                        

                        chartArea[i].HorizontalContentAlignment = HorizontalAlignment.Center;
                        chartArea[i].HorizontalAlignment = HorizontalAlignment.Center;
                        
                        chartLayout.Children.Add(chartArea[i]);                        
                        Grid.SetColumn(chartArea[i], i % 2);
                        Grid.SetRow(chartArea[i], Convert.ToInt32(Math.Floor(i / 2.0)) * 2 + 1);

                    }

                    legendWindow(chLegend);//window da
                #endregion

                radChart.SeriesMappings=null;
                radChart.SeriesMappings=new SeriesMappingCollection();

                for (int i = 1; i < dt.Columns.Count(); i++)
                {
                    radChart.SeriesMappings.Add(Mapping(dt.Columns[i].ColumnName, cd, dt.Columns[i].ColumnName, "Name","%{P}"));
                }
                radChart.ItemsSource = dt;
            }


            private SeriesMapping Mapping(string chartAreaName, Enums.ChartDefinition chartType, string yValue, string xCategory/*"Name"*/, string itemLabelFormatString)
            {
                SeriesMapping seriesMapping = new SeriesMapping();
                seriesMapping.ChartAreaName = chartAreaName;

                seriesMapping.SeriesDefinition = ChartType(chartType);
                seriesMapping.ItemMappings.Add(new ItemMapping(yValue, DataPointMember.YValue));
                seriesMapping.ItemMappings.Add(new ItemMapping(xCategory, DataPointMember.XCategory));
                seriesMapping.SeriesDefinition.ItemLabelFormat = "#" + itemLabelFormatString;
                seriesMapping.ItemMappings.Add(new ItemMapping(xCategory,DataPointMember.LegendLabel));
                
                return seriesMapping;
            }

            private SeriesDefinition ChartType(Enums.ChartDefinition cd)
            {
                switch (cd)
                {
                    case Enums.ChartDefinition.Area:
                        return new AreaSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.Bar:
                        return new BarSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.Bubble:
                        return new BubbleSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.CandleStick:
                        return new CandleStickSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.Line:
                        return new LineSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.Pie:
                        return new PieSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.Spline:
                        return new SplineSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.SplineArea:
                        return new SplineAreaSeriesDefinition();
                        break;
                    case Enums.ChartDefinition.Doughnut:
                        return new DoughnutSeriesDefinition();
                        break;
                }
                return new LineSeriesDefinition();
            }

        private void legendWindow(ChartLegend chLegend)
        {
            if (window == null)
            {
                window = new RadWindow();
                window.Header = "Cihaz Listesi";
                window.Content = chLegend;
                window.SetValue(RadWindow.WidthProperty, 200d);
                window.SetValue(RadWindow.HeightProperty, 300d);
                window.WindowStartupLocation = WindowStartupLocation.CenterScreen;
                window.Show();
            }
            else
            {
                window.Show();
            }
        }
.
.
.
xaml
------------------------------------------

<UserControl xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"  
            xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  
            xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
            xmlns:my="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"  
            xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"  
            xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"     
            x:Class="Reports.CihazEnerji"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Width="720" Height="1040">
.
.
.
                <StackPanel Margin="0,268,0,0" HorizontalAlignment="Center" >
                    
                        <StackPanel Margin="0,10,0,0" HorizontalAlignment="Center" Height="300" VerticalAlignment="Top">
                            <Grid Height="300" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
                                <ScrollViewer VerticalScrollBarVisibility="Visible">
                                    <telerikChart:RadChart Name="radChart" Width="700" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0">

                                    </telerikChart:RadChart>
                                </ScrollViewer>
                            </Grid>
                        </StackPanel>                        

                </StackPanel>
.
.
.

[Kemal]

I hope the code I sent is enough for you...

[Nikolay]

Hi Kemal,

Unfortunately we haven't been able to reproduce the problematic behavior using the information you have provided. Could you, please, isolate the issue in a small runnable sample project and send it to us, so that we could reproduce it and provide further assistance.

Greetings,
Nikolay
the Telerik team

[Kemal]

Can you give me an email address to send you the isolated project.

[Kemal]

--------Code Behind-------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows.Data;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.Reflection;

using DT;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Charting;
using Telerik.Windows.Controls.Common;

namespace ChartAreasError
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private Random rand = new Random(DateTime.Now.Millisecond);

        private DataTable SetData ()
        {

            DataTable dt = new DataTable (null);
            dt.Columns.Add(new DataColumn() { ColumnName = "ItemName", DataType = typeof(string) });
            dt.Columns.Add(new DataColumn() { ColumnName = "Val1", DataType = typeof(int) });
            dt.Columns.Add(new DataColumn() { ColumnName = "Val2", DataType = typeof(int) });
            dt.Columns.Add(new DataColumn() { ColumnName = "Val3", DataType = typeof(int) });
            dt.Columns.Add(new DataColumn() { ColumnName = "Val4", DataType = typeof(int) });
            dt.Columns.Add(new DataColumn() { ColumnName = "Val5", DataType = typeof(int) });

            for (int i = 0; i < 20; i++)
            {
                dt.Rows.Add(new DataRow());
                dt.Rows[i]["ItemName"] = "Item " + i;
                dt.Rows[i]["Val1"] = rand.Next();
                dt.Rows[i]["Val2"] = rand.Next();
                dt.Rows[i]["Val3"] = rand.Next();
                dt.Rows[i]["Val4"] = rand.Next();
                dt.Rows[i]["Val5"] = rand.Next();
            }
            return dt;
        }


        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            var asd = Application.Current.Host.Source.AbsoluteUri;
            DrawChart(SetData(),Enums.ChartDefinition.Doughnut);
        }

        #region Chart
        private void DrawChart(DataTable dt, Enums.ChartDefinition cd)
        {
            #region Degiskenler
            Telerik.Windows.Controls.Charting.ChartTitle[] chartTitle = new Telerik.Windows.Controls.Charting.ChartTitle[dt.Columns.Count - 1];
            Telerik.Windows.Controls.Charting.ChartArea[] chartArea = new Telerik.Windows.Controls.Charting.ChartArea[dt.Columns.Count - 1];
            Grid chartLayout = new Grid();
            ColumnDefinition cDefinition = new ColumnDefinition();
            ChartLegend chLegend = new ChartLegend();
            #endregion

            #region Temel Yapılandırmalar

            radChart.Width = 700;
            radChart.HorizontalAlignment = HorizontalAlignment.Center;
            radChart.Margin = new Thickness(0, 0, 0, 0);
            radChart.UseDefaultLayout = false;
            radChart.ItemsSource = null;
            radChart.SeriesMappings.Clear();
            //grdChart.Visibility = Visibility.Visible;

            #endregion

            radChart.Content = null;
            radChart.Content = chartLayout;

            chartLayout.ColumnDefinitions.Add(new ColumnDefinition());
            chartLayout.ColumnDefinitions.Add(new ColumnDefinition());
            chartLayout.ColumnDefinitions.Add(new ColumnDefinition());

            chartLayout.ColumnDefinitions[0].Width = new GridLength(300, GridUnitType.Pixel);
            chartLayout.ColumnDefinitions[1].Width = new GridLength(300, GridUnitType.Pixel);
            chartLayout.ColumnDefinitions[2].Width = new GridLength(100, GridUnitType.Auto);

            #region Creating Rows For Titles and Charts

            radChart.Height = 235 * Convert.ToInt32(Math.Ceiling(((dt.Columns.Count - 1) / 2.0)));

            for (int i = 0; i < Convert.ToInt32(Math.Ceiling(((dt.Columns.Count - 1) / 2.0))); i++)
            {
                chartLayout.RowDefinitions.Add(new RowDefinition());//Title
                chartLayout.RowDefinitions[chartLayout.RowDefinitions.Count - 1].Height = new GridLength(35, GridUnitType.Pixel);
                chartLayout.RowDefinitions.Add(new RowDefinition());//Chart
                chartLayout.RowDefinitions[chartLayout.RowDefinitions.Count - 1].Height = new GridLength(200, GridUnitType.Pixel);
            }

            #endregion

            #region Chart Titles / Chart Areas

            Grid.SetColumn(chLegend, 2);
            Grid.SetRow(chLegend, 0);
            Grid.SetRowSpan(chLegend, chartLayout.RowDefinitions.Count);

            chLegend.Visibility = Visibility.Visible;
            chLegend.HorizontalAlignment = HorizontalAlignment.Stretch;
            chLegend.VerticalAlignment = VerticalAlignment.Stretch;
            chLegend.UseAutoGeneratedItems = true;

            chLegend.Name = "chLegend";
            chLegend.Header = "";
            chartLayout.Children.Add(chLegend);
            chartArea = null;
            chartArea = new Telerik.Windows.Controls.Charting.ChartArea[dt.Columns.Count - 1];

            for (int i = 0; i < dt.Columns.Count - 1; i++)
            {
                chartTitle[i] = new ChartTitle();

                chartTitle[i].Content = dt.Columns[i + 1].ColumnName;
                chartTitle[i].Height = 35;
                chartTitle[i].HorizontalAlignment = HorizontalAlignment.Center;
                chartTitle[i].VerticalAlignment = VerticalAlignment.Top;
                chartTitle[i].VerticalContentAlignment = VerticalAlignment.Top;
                chartLayout.Children.Add(chartTitle[i]);
                Grid.SetColumn(chartTitle[i], i % 2);
                Grid.SetRow(chartTitle[i], Convert.ToInt32(Math.Floor(i / 2)) * 2);

                chartArea[i] = new Telerik.Windows.Controls.Charting.ChartArea();
                chartArea[i].Name = dt.Columns[i + 1].ColumnName;
                chartArea[i].Width = 300;
                chartArea[i].Height = 200;

                if (i == 0)
                    chartArea[i].Legend = chLegend;



                chartArea[i].HorizontalContentAlignment = HorizontalAlignment.Center;
                chartArea[i].HorizontalAlignment = HorizontalAlignment.Center;

                chartLayout.Children.Add(chartArea[i]);
                Grid.SetColumn(chartArea[i], i % 2);
                Grid.SetRow(chartArea[i], Convert.ToInt32(Math.Floor(i / 2.0)) * 2 + 1);

            }
            #endregion

            radChart.SeriesMappings = null;
            radChart.SeriesMappings = new SeriesMappingCollection();

            for (int i = 1; i < dt.Columns.Count(); i++)
            {
                radChart.SeriesMappings.Add(Mapping(dt.Columns[i].ColumnName, cd, dt.Columns[i].ColumnName, "ItemName", "%{P}"));
            }
            radChart.ItemsSource = dt;
            radGrid.ItemsSource = dt;
        }

        private SeriesMapping Mapping(string chartAreaName, Enums.ChartDefinition chartType, string yValue, string xCategory/*"Name"*/, string itemLabelFormatString)
        {
            SeriesMapping seriesMapping = new SeriesMapping();
            seriesMapping.ChartAreaName = chartAreaName;

            seriesMapping.SeriesDefinition = ChartType(chartType);
            seriesMapping.ItemMappings.Add(new ItemMapping(yValue, DataPointMember.YValue));
            seriesMapping.ItemMappings.Add(new ItemMapping(xCategory, DataPointMember.XCategory));
            seriesMapping.SeriesDefinition.ItemLabelFormat = "#" + itemLabelFormatString;
            seriesMapping.ItemMappings.Add(new ItemMapping(xCategory, DataPointMember.LegendLabel));

            return seriesMapping;
        }

        private SeriesDefinition ChartType(Enums.ChartDefinition cd)
        {
            switch (cd)
            {
                case Enums.ChartDefinition.Area:
                    return new AreaSeriesDefinition();
                    break;
                case Enums.ChartDefinition.Bar:
                    return new BarSeriesDefinition();
                    break;
                case Enums.ChartDefinition.Bubble:
                    return new BubbleSeriesDefinition();
                    break;
                case Enums.ChartDefinition.CandleStick:
                    return new CandleStickSeriesDefinition();
                    break;
                case Enums.ChartDefinition.Line:
                    return new LineSeriesDefinition();
                    break;
                case Enums.ChartDefinition.Pie:
                    return new PieSeriesDefinition();
                    break;
                case Enums.ChartDefinition.Spline:
                    return new SplineSeriesDefinition();
                    break;
                case Enums.ChartDefinition.SplineArea:
                    return new SplineAreaSeriesDefinition();
                    break;
                case Enums.ChartDefinition.Doughnut:
                    return new DoughnutSeriesDefinition();
                    break;
            }
            return new LineSeriesDefinition();
        }

        #endregion
    }

    public class Enums
    {
        public enum ChartDefinition : int
        {
            Line = 1,
            Bar = 2,
            Pie = 3,
            Doughnut = 4,
            Area = 5,
            Bezier = 6,
            Bubble = 7,
            CandleStick = 8,
            Dotted = 9,
            Spline = 10,
            SplineArea = 11
        }
    }
}


------xaml--------

<UserControl x:Class="ChartAreasError.MainPage"
             
    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:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"  
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"  
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="700">
    
            <Canvas Width="720" Height="700" Name="MainCanvas" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0">
                <Grid Width="710" Height="Auto" Margin="0,0,0,0" HorizontalAlignment="Center">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>


                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>


                <StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left">
                    <HyperlinkButton Name="btnStart" FontWeight="Bold" Content="Start" Foreground="Black" Click="btnStart_Click" Margin="0,5,0,0" Visibility="Visible"></HyperlinkButton>
                </StackPanel>

                <StackPanel Margin="0,0,0,0" HorizontalAlignment="Center"  Grid.Row="1">
                        <StackPanel Margin="0,0,0,0" HorizontalAlignment="Center" Height="Auto" VerticalAlignment="Top">
                            <StackPanel>
                                <telerikChart:RadChart Name="radChart" Width="700" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0" Visibility="Visible">
                                    
                                </telerikChart:RadChart>
                            </StackPanel>
                            <StackPanel>
                                <telerikGridView:RadGridView Name="radGrid">
                                    
                                </telerikGridView:RadGridView>
                            </StackPanel>
                        </StackPanel>
                </StackPanel>
            </Grid>
        </Canvas>
   
</UserControl>
----------------------------------------------------------------------------------------------------------------------------------------------------------------
Data is Generating but but the charts not.....
Related Picture is attached.

I couldn't find the problem...

Thanks for your attention.

[Nikolay]

Hello Kemal,

Please open a support ticket from your account and attach the application, which reproduces the unexpected behavior so that we could review it. You would be able to attach .zip files in a support ticket. Thanks in advance.

Sincerely yours,
Nikolay
the Telerik team

[Kemal]

I opened a support ticket, numbered as 359803, but I found the problem and solved it.
The problem was the layout.
When you define a layout for the first time there is no problem but if you call it for the second or more the child s that you added to the layout became the source of the problem.
First you must clear the layout from the added child s to add new ones.


Thanks for your time...