Telerik Reporting - Charts render badly

[Chris Crowe]

I am trying to create some charts using Telerik Reporting - Q2 2010

I have a data source that returns 2 columns

Date Value
39812 931
39843 796
39871 855
39902 931
39932 752
39963 827
39993 852
40024 732
40055 677
40085 891
40116 723
40146 610
40177 774
40208 984
40236 1281
40267 2322
40297 2734
40328 2726
40358 2570

In the designer I have no data source for the report, but I have the SQLDatasource connected to the chart.

I have a bar series

I set the Series X to Date, and the Series Y to Value

If I preview the report in the designer the bars are all drawn over each other and it looks a complete mess.

See attached image for what it looks like (capture1.png)

Considering there are in the screen shot (and data above) there are 19 data points along the X axis.

But the # of areas defined by the grid is only 7 - this makes reading the labels along the bottom of the X Axis hard since they do not line up.

Have I missed something here?

Capture2.png is what I actually see after configuring some more properties in the chart. As you will see in that image there is 10 grid columns but 19 data columns. The Bars draw over each other.

I do not want to manually configure the width of the bars as the control should do this for me.

Chris

[Peter]

Hello Chris Crowe,

The Chart item is not able to handle the Bar Width automatically when multiple bars are associated with one X Axis item/value. To avoid the overlapping bars you have to decrease the BarWidthPercent property (Chart -> Appearance -> BarWidthPercent). Additionally you may have to change the angle of series labels from Series -> Appearance -> LabelAppearance -> Position -> RotationAngel to 90.

Greetings,
Peter
the Telerik team

[Chris Crowe]

Hi Thanks for the reply.

I do not see why the bar width can not be determined by your code, since you know how many items there are in the collection?

But I am still having problems.

My test data today has values from Jan 1, 2009 and a data row for each month up to today August 1, 2010

So I can determine that there is 20 rows or 20 items across the X Axis

When I render the chart I am using these bits of code.

RadChart1.PlotArea.XAxis.IsZeroBased = false;
RadChart1.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate;
RadChart1.PlotArea.XAxis.Appearance.CustomFormat = "MMM";
RadChart1.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Between;
RadChart1.PlotArea.XAxis.LabelStep = 1;
RadChart1.PlotArea.XAxis.MaxItemsCount = dt.Rows.Count;
RadChart1.Series[0].Appearance.BarWidthPercent = 40;
RadChart1.Series[0].DataXColumn = "Date";
RadChart1.Series[0].DataYColumn = "Value";

RadChart1.DataSource = dt;
RadChart1.DataBind(); // FOR Normal chart not reporting chart

I really do not understand MaxItemCount but I seem to need it set otherwise I only get a few labels. But even having it set I do not get 20 labels, 1 per bar, I only get 13 Labels.

Changing the MaxItemsCount to be MaxItemsCount = dt.Rows.Count + 4 then changes the # of grid cells from 13 to 31. What gives here?

In the screen snap (capture 3) you will see my problem

Also the first label displayed for bar #1 is DEC not JAN

Looking at the 4th bar, it has the label "Mar" but it in in fact the bar for "April"

Counting the bars from the left, check the month names for the each bar, you will see my issue.

Maybe you could send me a simple example of having 20 bars with 20 labels all aligned correctly with the month directly under the bar as any bar chart would have?

I threw a Dundas chart object onto a page. Added a series and use this code

Chart1.ChartAreas[0].AxisX.Interval = 1;
Chart1.ChartAreas[0].AxisX.IntervalType = Dundas.Charting.WebControl.DateTimeIntervalType.Months;
Chart1.ChartAreas[0].AxisX.LabelStyle.Format = "MMM";
Chart1.Series[0].Points.DataBindXY(dt.Rows, "DateTime", dt.Rows, "Tickets");

and I got the image in Capture4.png

As you will see the labels are all nicely aligned, no hard work on my part.

Now I want to use your chart in your reporting solution but it does not make sense to me.

If I cam doing someting wrong please let me know.

chris

[Peter]

Hello Chris Crowe,

Thank you for the throughout explanation. 

The observed behavior of the Chart item is because the X values are interpreted as real DateTime values instead of just month numbers(i.e the day of the month and time are also taken into the positioning). Currently there is no way to specify how the date/time values should be interpreted so the only workaround is to prepare the data the way it should be displayed by the chart. This means that you have to use an additional column which holds the name of the month corresponding to the respective date and set the name of that column to the chart.PlotArea.XAxis.DataLabelsColumn property. As the items will be placed consecutively in the order they come you will not need to set the Series[0].DataXColumn.All the other settings may be left with their default values. We are sorry for the inconvenience.

Sincerely yours,
Peter
the Telerik team

[Chris Crowe]

Thanks for the explanation.

It is working far better now.

Chris