How to handle the gap between axis bars

[vijay]

Hi all,

Working with horizontal bar series

Here I have 4 graphs and dynamically I am binding the graphs

I am showing some items in each graph here requirement is one graph should be 2 items, one graph dhould be 5 items and one graph should be 
4 items  but  max number of items are 5 will be binded.

So my requirement is  4 graphs bar width should be same irrespective of items in each chart

To achieve this functionality I am doing something like below

                if (count == 1)

                {

                    chart.DefaultView.ChartArea.ItemWidthPercent = 40;

                    chart.DefaultView.ChartArea.Height = 150;

                    chart.Height = 520;

                }

                else if (count == 2)

                {

                    chart.DefaultView.ChartArea.ItemWidthPercent = 40;

                    chart.DefaultView.ChartArea.Height = 220;

                    chart.Height = 520;

                }

                else if (count == 3)

                {

                    chart.DefaultView.ChartArea.ItemWidthPercent = 40;

                    chart.DefaultView.ChartArea.Height = 300;

                    chart.Height = 520;

 

                }

                else if (count == 4)

                {

                    chart.DefaultView.ChartArea.ItemWidthPercent = 40;

                    chart.DefaultView.ChartArea.Height = 320;

                    chart.Height = 520;

                }

                else if (count == 5)

                {

                    chart.DefaultView.ChartArea.ItemWidthPercent = 40;

                    chart.DefaultView.ChartArea.Height = 420;

                    chart.Height = 520;

                }

  

Now I achieved by managind the height of chart and chart area i am happy till this. 

BUT now problem is

The graph is not looking good and gap between the bars are very high.

Please help me to make the graph good look and feel and achieve my requirement.

 

Thanks in advance
-Vijay Kommalapati

[Peshito]

Hi Vijay,

Changing the ChartArea height automatically recalculates the items width percentage. Try increasing the value of the ItemWidthPercent property for those charts having bigger gap. This way the gap will be smaller.

More information about ItemWidthPercent can be found in our help topic here.

Hope that helps.

Best wishes,
Peshito
the Telerik team

[vijay]

if i increase the value of the ItemWidthPercent property for those charts having bigger gap

gap will be decreasing but the problem is height of the bars were increased .

Finally all the graphs bar Height is not  matching.

my requirement is all the graphs height is same and no gaps between the bars.

so that is not helped ..please suggest me some other way.

Thanks in advance
-VIjay Kommalapati

[Jan]

Maybe you have the same problem like me:ItemWidthPercent issue

[vijay]

Jan,

Thanks for your quick replay but it was not work around for me.

your case is different and my case different.

here i am having 4 graphs but you have only 1 graph.

here i have to manage all the 4 graphs width of bat should be same.


thanks
-VIjay

[Peshito]

Hello Vijay,

Bars' width is calculated dynamically according to other factors such as the axis range, ticks, etc. Setting the BarWidthPercent property will give the bars only a percentage of the space available between two ticks, but still they are calculated dynamically as before. One way of setting their width to fixed is to fix the other properties that the bar width depends on - the range, the step and the tick count. If these are fixed, the bar width will be fixed. For example if you want your bars to be 10% of the RadChart's size you can put these values into the AxisX:

<telerik:RadChart Name="RadChart1">
    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea>
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX AutoRange="False" MinValue="0" MaxValue="10" Step="1" />
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
</telerik:RadChart>

About bar width calculation:
The factors that determine the bars' width are complex. Starting with the space - it depends on the space reserved for the RadChart itself, then the default view takes away some of the space for drawing series to show up some of its elements like the chart legend, title, axis, labels and ticks. After the place for the plotting area is determined the actual width of the bars is calculated. Remember, that if nothing else is specified, the RadChart will try to display all series items on the screen (using sampling with default threshold of 200). The width depends of the axis range, the number of major / minor ticks and the ticks distance. After all these factors are taken into account, the bar width percent reduces the bar size by a percentage of the determined size.

About categorical chart and bars width:
When you are using categorical axis you are using text instead of numbers. So setting the MinValue, MaxValue and Step doesn't make sense when using categories. You can try using the auto range, which will split the available size evenly for your bars. If you are not happy with the auto range you can try the using a numerical values with proper grouping. This approach is demonstrated in this thread in our forum.

Regards,
Peshito
the Telerik team

[vijay]

I was unable to catch you.

can you send me one sample solution to reach my requirement like as screen short

bars height should be same even bars are not equal for 4 graphs.

please send me as soon as possible because this issues i am facing from long time.

Thanks in advance
-VIjay

[Peshito]

Hi Vijay,

Your expected result cannot be achieved unless you set the X-Axis autorange to false and then set equal manual ranges for each of your charts like this:

radChart1.DefaultView.ChartArea.AxisX.AutoRange = false;
radChart1.DefaultView.ChartArea.AxisX.AddRange(1, 4, 1);
radChart1.DefaultView.ChartArea.AxisX.LabelStep = 4;

After doing so, no matter how much items your series have, their high will be the same. You can then control the number of items in your series. However following this approach also require setting equal high for your charts.

I've attached a sample project with two charts, first one having one item and the second one having three bar items. Following this, you'll be able to accomplish similar to your required result.

Best wishes,
Peshito
the Telerik team

[Vijetha]

Hi,

Iam using telerik chart for showing barcharts.

 Telerik.Reporting.Chart chartGeneric;

Please find the attachment,Too much White space is observed please suggest how to reduce it.

The white space should be about the width of one bar.

Below is the code which i have written

 private void generateChart(DataTable dtResults)
        {
            if (reportFiterParameters.GraphType == 4)
            {               
                dtResults = GeneratePieSlicePercentages(dtResults);
            }

            ChartSeriesType CurrentChartType = ChartSeriesType.Bar;
            int totalBarCount = (dtResults.Columns.Count - 1) * dtResults.Rows.Count;
            double reportGenericwidth = (totalBarCount < 8 ? 7 : (totalBarCount * 0.5));
            int rotationAngle = 0;
            int marginBottom = 50;
            int marginLeft = 50;
            AlignedPositions seriesTextAlignment = AlignedPositions.Top;
            ChartSeriesOrientation seriesOrientation = ChartSeriesOrientation.Vertical;

            #region Margin and Rotation Angle
            switch (reportFiterParameters.PrimarySeries)
            {
                case 1:
                case 3:
                case 5:
                    marginBottom = 120;
                    rotationAngle = -90;
                    break;
                case 10:
                    marginBottom = 140;
                    rotationAngle = -90;
                    break;
                default:

                    break;
            }


            #endregion

            #region Width and Height
            switch (reportFiterParameters.GraphType)
            {
                case 1://Column
                    _reportWidth = reportGenericwidth;
                    break;
                case 2: //Bar
                    _reportHeight = reportGenericwidth;
                    seriesTextAlignment = AlignedPositions.Right;
                    seriesOrientation = ChartSeriesOrientation.Horizontal;
                    rotationAngle = 0;
                    break;
                case 3: //Line

                    //_reportWidth = reportGenericwidth / ((dtResults.Rows.Count - 1) == 0 ? 1 : (dtResults.Rows.Count - 1));
                    _reportWidth = reportGenericwidth;
                    CurrentChartType = ChartSeriesType.Line;
                    break;
                case 4:
                    //reportGenericwidth = (totalBarCount < 8 ? 7 : (totalBarCount * 0.1));
                    //_reportHeight = reportGenericwidth;
                    //_reportWidth = reportGenericwidth;
                    seriesTextAlignment = AlignedPositions.Top;
                    CurrentChartType = ChartSeriesType.Pie; break;
                default: break;
            }

            if ((reportFiterParameters.FlipXYAxis) || (reportFiterParameters.GraphType == 3))
            {

                marginLeft = marginBottom;
                marginBottom = 50;

                rotationAngle = -90;
            }

            #endregion

            this.chartGeneric.Skin = "Mac";
            this.chartGeneric.AutoLayout = true;
            this.chartGeneric.BitmapResolution = 90;
            this.chartGeneric.ChartTitle.Visible = false;
            this.chartGeneric.Location = new PointU(new Telerik.Reporting.Drawing.Unit(0), new Telerik.Reporting.Drawing.Unit(10));

            this.chartGeneric.PlotArea.XAxis.LayoutMode = ChartAxisLayoutMode.Inside;
            this.chartGeneric.PlotArea.Appearance.Position.X = 0;
            this.chartGeneric.PlotArea.Appearance.Position.Y = 0;

            this.chartGeneric.PlotArea.EmptySeriesMessage.TextBlock.Text = "There is nothing to display";
            this.chartGeneric.PlotArea.XAxis.AxisLabel.Visible = true;
            this.chartGeneric.PlotArea.YAxis.AxisLabel.Visible = true;
            this.chartGeneric.PlotArea.Appearance.Dimensions.Width = new Telerik.Reporting.Charting.Styles.Unit(90, Telerik.Reporting.Charting.Styles.UnitType.Percentage);
            this.chartGeneric.PlotArea.Appearance.Dimensions.Height = new Telerik.Reporting.Charting.Styles.Unit(90, Telerik.Reporting.Charting.Styles.UnitType.Percentage);
            this.chartGeneric.PlotArea.YAxis.VisibleValues = ChartAxisVisibleValues.All;


            this.chartGeneric.SeriesOrientation = seriesOrientation;
            this.chartGeneric.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = rotationAngle;



            this.chartGeneric.PlotArea.Appearance.Dimensions.Margins = new ChartMargins(10, 10, marginBottom, marginLeft);

            this.chartGeneric.PlotArea.XAxis.Appearance.TextAppearance.AutoTextWrap = AutoTextWrap.False;

            this.chartGeneric.PlotArea.XAxis.AxisLabel.TextBlock.Text = reportFiterParameters.FlipXYAxis ? "" : dtResults.Columns[0].ColumnName;
            this.chartGeneric.PlotArea.YAxis.AxisLabel.TextBlock.Text = "(in Percentage)";

            this.chartGeneric.Legend.Appearance.Position.X = 5;
            this.chartGeneric.Legend.Appearance.Position.Y = 20;
            this.chartGeneric.Legend.Appearance.Overflow = Overflow.Column;

            this.chartGeneric.Width = new Telerik.Reporting.Drawing.Unit(_reportWidth, Telerik.Reporting.Drawing.UnitType.Inch);
            this.chartGeneric.Height = new Telerik.Reporting.Drawing.Unit(_reportHeight, Telerik.Reporting.Drawing.UnitType.Inch);
            this.chartGeneric.DefaultType = CurrentChartType;
            this.chartGeneric.Appearance.BarWidthPercent = totalBarCount > 5 ? 100 : 20;
            chartGeneric.Series.Clear();
            chartGeneric.DataSource = dtResults;

            chartGeneric.PlotArea.XAxis.LayoutMode = ChartAxisLayoutMode.Between;

            chartGeneric.Appearance.BarOverlapPercent = -10;

            List<ChartSeries> chartSeries = new List<ChartSeries>();
            // set text and line for x axis


            if (chartGeneric.DefaultType == ChartSeriesType.Pie)
            {

                
               // chartGeneric.Series[0].DefaultLabelValue = string.Format("{0} #%", dtResults.Columns[1]);
                Telerik.Reporting.Charting.ChartSeries chartSeries1 = new Telerik.Reporting.Charting.ChartSeries();
                chartSeries1.DataYColumn = dtResults.Columns[1].ColumnName.Trim();
                chartSeries1.DataLabelsColumn = dtResults.Columns[0].ColumnName.Trim();
                chartSeries1.Name = dtResults.Columns[0].ColumnName.Trim() + " - " + dtResults.Columns[1].ColumnName.Trim();
                chartSeries1.Type = chartGeneric.DefaultType;
                chartSeries1.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
                chartSeries1.Appearance.ShowLabelConnectors = true;
                chartSeries1.Appearance.LabelAppearance.LabelLocation = Telerik.Reporting.Charting.Styles.StyleSeriesItemLabel.ItemLabelLocation.Auto;
                //chartSeries1.Appearance.LabelAppearance.Position.AlignedPosition =seriesTextAlignment;
                chartSeries1.YAxisType = ChartYAxisType.Primary;
                chartSeries.Add(chartSeries1);

                chartGeneric.SeriesOrientation = ChartSeriesOrientation.Vertical;
                chartGeneric.IntelligentLabelsEnabled = false;
                chartGeneric.Series.AddRange(chartSeries.ToArray());
                
                
                

               //// Telerik.Reporting.Processing.Chart procChart = (Telerik.Reporting.Processing.Chart)sender;

               // chartGeneric.IntelligentLabelsEnabled = false;
               // ChartSeries serie = new ChartSeries();
               // serie.Type = ChartSeriesType.Pie;
               // serie.Clear();
               // serie.Name = dtResults.Columns[0].ColumnName.Trim() + " - " + dtResults.Columns[1].ColumnName.Trim();
               // serie.Appearance.ShowLabelConnectors = true;
               // serie.Appearance.LegendDisplayMode = Telerik.Reporting.Charting.ChartSeriesLegendDisplayMode.ItemLabels;
               // foreach (DataRow dr in dtResults.Rows)
               // {
               //     ChartSeriesItem item = new ChartSeriesItem();
               //     item.YValue = Convert.ToDouble(dr["Total"].ToString());
               //     item.Name = (string)dr["Name"].ToString();
               //     item.Appearance.Exploded = true;
               //     item.Label.TextBlock.Text = (string)dr["Name"].ToString() ;
               //     serie.Items.Add(item);
               // }
               // chartGeneric.Series.Add(serie);

            }
            else
            {
                chartGeneric.PlotArea.XAxis.DataLabelsColumn = dtResults.Columns[0].ColumnName.Trim();
               // chartGeneric.PlotArea.XAxis.AutoScale = true;
                chartGeneric.Appearance.BarWidthPercent = 5;
                
                //chartGeneric.Series[0].Items[0].Appearance.

                for (int counter = 1; counter < dtResults.Columns.Count; counter++)
                {
                    ChartSeries series = new ChartSeries()
                    {
                        DataYColumn = dtResults.Columns[counter].ColumnName,
                        Name = dtResults.Columns[counter].ColumnName,
                        YAxisType = ChartYAxisType.Primary,
                        Type = chartGeneric.DefaultType
                    };
                    series.Appearance.FillStyle.FillType = FillType.Gradient;
                    series.Appearance.LabelAppearance.LabelLocation = Telerik.Reporting.Charting.Styles.StyleSeriesItemLabel.ItemLabelLocation.Inside;
                    series.Appearance.LabelAppearance.Position.AlignedPosition = seriesTextAlignment;

                    chartSeries.Add(series);
                }

                // add the series to the chart, chart to page.
                chartGeneric.Series.AddRange(chartSeries.ToArray());
            }
        }

[Peshito]

Hi Vijetha,

As I can see, the reason why your space is twice the bar's width space is because you are setting a value of 0 to your last series' item. This way the item and the space needed for it to be drawn are already calculated and set. Try setting null value instead of 0. Following this approach will prevent the the chart of drawing this series' item and the empty space width should be as expected.

Hope this helps.

Best wishes,
Peshito
the Telerik team