How to handle the gap between axis bars

10 posts, 0 answers
  1. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 27 Jul 2011 Link to this post

    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

  2. Peshito
    Admin
    Peshito avatar
    585 posts

    Posted 29 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 10 Aug 2011 Link to this post

    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
  4. Jan
    Jan avatar
    13 posts
    Member since:
    Jun 2011

    Posted 10 Aug 2011 Link to this post

    Maybe you have the same problem like me:ItemWidthPercent issue
  5. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 10 Aug 2011 Link to this post

    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


  6. Peshito
    Admin
    Peshito avatar
    585 posts

    Posted 12 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  7. vijay
    vijay avatar
    46 posts
    Member since:
    Jul 2010

    Posted 16 Sep 2011 Link to this post

    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
  8. Peshito
    Admin
    Peshito avatar
    585 posts

    Posted 21 Sep 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  9. Vijetha
    Vijetha avatar
    9 posts
    Member since:
    Jul 2011

    Posted 10 Oct 2011 Link to this post

    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());
                }
            }


  10. Peshito
    Admin
    Peshito avatar
    585 posts

    Posted 12 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top