Chart rendering differently in Report Viewer and Design Preview

[Karthikeyan]

Report Constructor code
=======================
           //chart
            DataTable dtStudent = new DataTable();
            //Columns of data table
            dtStudent.Columns.Add("Name", typeof(string));
            dtStudent.Columns.Add("Date", typeof(DateTime));
            dtStudent.Columns.Add("Value", typeof(int));

            //rows in the data table
            //date1
            dtStudent.Rows.Add("Multiplication", "2013-01-12",  25);
            dtStudent.Rows.Add("division", "2013-01-12",  10);
            dtStudent.Rows.Add("Addition", "2013-01-12", 15);
            //date2
            dtStudent.Rows.Add("Multiplication", "2013-01-13",  30);
            dtStudent.Rows.Add("division", "2013-01-13",  11);
            dtStudent.Rows.Add("Addition", "2013-01-13",  14);
            //date3
            dtStudent.Rows.Add("Multiplication", "2013-01-14",  28);
            dtStudent.Rows.Add("division", "2013-01-14",  23);
            dtStudent.Rows.Add("Addition", "2013-01-14",  25);
            //date4
            dtStudent.Rows.Add("Multiplication", "2013-01-15",  40);
            dtStudent.Rows.Add("division", "2013-01-15",  49);
            dtStudent.Rows.Add("Addition", "2013-01-15",  18);

            Telerik.Reporting.Chart defChart = new Telerik.Reporting.Chart();
            defChart.BitmapResolution = 96F;
            defChart.ImageFormat = System.Drawing.Imaging.ImageFormat.Emf;
            defChart.IntelligentLabelsEnabled = false;
            defChart.Location = new Telerik.Reporting.Drawing.PointU(new Telerik.Reporting.Drawing.Unit(0.32, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm))), new Telerik.Reporting.Drawing.Unit(1.8, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm))));
            defChart.PlotArea.EmptySeriesMessage.Appearance.Visible = true;
            defChart.PlotArea.EmptySeriesMessage.Visible = true;
            defChart.PlotArea.XAxis.AxisLabel.Visible = true;
            defChart.PlotArea.YAxis.AxisLabel.Visible = true;
            defChart.Size = new Telerik.Reporting.Drawing.SizeU(new Telerik.Reporting.Drawing.Unit(15, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm))), new Telerik.Reporting.Drawing.Unit(10, ((Telerik.Reporting.Drawing.UnitType)(Telerik.Reporting.Drawing.UnitType.Cm))));


            defChart.ChartTitle.Visible = false;

            var distinctResult = (from row in dtStudent.AsEnumerable()
                                  select row.Field<string>("Name")).Distinct();

            foreach (string name in distinctResult)
            {

                var dataResult = from row in dtStudent.AsEnumerable()
                                 where row.Field<string>("Name") == name
                                 select new
                                 {
                                     Name = row.Field<string>("Name"),
                                     Date = row.Field<DateTime>("Date"),
                                     Value = row.Field<int>("Value")
                                 };


                Telerik.Reporting.Charting.ChartSeries chartSeries = new Telerik.Reporting.Charting.ChartSeries();
                chartSeries.Type = Telerik.Reporting.Charting.ChartSeriesType.Line;
                chartSeries.Name = name;
                chartSeries.Appearance.LabelAppearance.Visible = false;

                defChart.Legend.Visible = false;

                foreach (var record in dataResult)
                {
                    ChartSeriesItem item = new ChartSeriesItem();
                    item.XValue = record.Date.ToOADate();
                    item.YValue = record.Value;
                    chartSeries.AddItem(item);
                }
                defChart.Series.Add(chartSeries);
            }
            defChart.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Reporting.Charting.Styles.ChartValueFormat.ShortDate;
            defChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 315;
            defChart.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Reporting.Charting.Styles.AlignedPositions.TopLeft;
            defChart.PlotArea.XAxis.LayoutMode = Telerik.Reporting.Charting.Styles.ChartAxisLayoutMode.Inside;
            defChart.PlotArea.XAxis.IsZeroBased = false;
            defChart.PlotArea.XAxis.AutoScale = true;
            defChart.PlotArea.XAxis.LabelStep = 1;

            //Margins
            Telerik.Reporting.Charting.Styles.ChartMargins chartMargins2 = new Telerik.Reporting.Charting.Styles.ChartMargins();
            chartMargins2.Bottom = new Telerik.Reporting.Charting.Styles.Unit(40D, Telerik.Reporting.Charting.Styles.UnitType.Percentage);
            chartMargins2.Top = new Telerik.Reporting.Charting.Styles.Unit(5D, Telerik.Reporting.Charting.Styles.UnitType.Percentage);
            chartMargins2.Right = new Telerik.Reporting.Charting.Styles.Unit(20D, Telerik.Reporting.Charting.Styles.UnitType.Percentage);
            chartMargins2.Left = new Telerik.Reporting.Charting.Styles.Unit(5D, Telerik.Reporting.Charting.Styles.UnitType.Percentage);
            defChart.PlotArea.Appearance.Dimensions.Margins = chartMargins2;

            this.detail.Items.AddRange(new Telerik.Reporting.ReportItemBase[] { defChart });


Calling aspx page:
==============
Student.aspx
===============
 <telerik:ReportViewer ID="ReportViewer1" runat="server" Height="580px" Width="1080px"></telerik:ReportViewer>

Code behind
================
 Telerik.Reporting.InstanceReportSource instanceReportSource = new Telerik.Reporting.InstanceReportSource();

            StudentLineReport objRep = new StudentLineReport();

 instanceReportSource.ReportDocument = objRep;
            this.ReportViewer1.ReportSource = instanceReportSource;

I m rendering a line chart from the report viewer as well as design preview. The design preview is showing the complete chart, but while running it in the report viewer, the chart is not displayed completely(see attachments). Also while exporting the chart to the PDF, it is rendered in different size.

Please find the attached snapshots and the code for the scenario.

Please let me know how to show the chart completely in the telerik report viewer. Also the chart should appear of same size in both telerik report viewer and exported pdf file. kindly help me on this one.

[Stef]

Hello Karthikeyan,

In order to see how a report will look when it is exported in Design Preview, you need to switch to print preview from the toolbar. The report print settings can be adjusted through its PageSettings property, containing settings for page orientation, format, size, margins and etc.
The way a report looks in ReportViewer control depends on the media as described in the article Design Considerations for Report Rendering, so to see how it would be exported set the viewer ViewMode to PrintPreview.

I hope this helps.

Kind regards,
Stef
the Telerik team