Caption for Horizontal Bar Chart

[Deepak]

Hi,

I need help in implementing telerik bar chart (Horizontal). 

Chart Details : 

1. I have horizontal bar charts with bars on both the sides +Ve X Axis and -Ve X Axis. Bars are overlapping in center. i.e. I am graphically representing the negative as well as positive values.

2. Only X axis values are concerned for plottinfg the chart.

3. Bar length is nothing but the -X position in left side and +X position in right side.

4. I dont want any caption\interval on Y Axis.

5. Instead of captions\Intervals I want name of the bars e.g. Sunday, Monday.....aligned properly

Following are the Code\ Markup I am using for generating the Bar Chart. Also I have attached the screen shot of my bar chart with explanation of desired look.

1. Markup :

<telerik:RadChart Skin="Hay" ID="barChart1" runat="server" SeriesOrientation="Horizontal"  Width="600px" Height="2000px" AutoLayout="true">                                                                

                                        <PlotArea >

                                            <YAxis >                                                

                                                <Items></Items>

                                                <AxisLabel>

                                                    

                                                </AxisLabel>

                                                <ScaleBreaks></ScaleBreaks>

                                                <Appearance></Appearance>

                                                

                                            </YAxis>

                                            <XAxis ></XAxis>

                                        </PlotArea>

                                        </telerik:RadChart>                                                                                                                    

2. C# Code :

A. I am creating three Arrays

a. Array containing name of each horizontal bars

b. Array containg the yValues for the Left hand Side of the Bars (-VE X Axis)

c. Array containg the yValues for the Right hand Side of the Bars (+VE X Axis)

B. I have written a method which returns RadChartSeries and takes Name of the Seies, yValues (Array), Caption for Bars (Array), Color

    private ChartSeries GetChartSeries(string titleText, string[] blockName, double[] yValues, Color color,bool displayCaption)

    {

        ChartSeries chartSeries = new ChartSeries();

        chartSeries.Appearance.FillStyle.MainColor = color;        

        chartSeries.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;                                

        chartSeries.Name = titleText;       

        chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

        chartSeries.Appearance.ShowLabels = true;

        chartSeries.Appearance.LabelAppearance.Visible = true;

        chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName ;

        chartSeries.Appearance.LabelAppearance.LabelLocation = Telerik.Charting.Styles.StyleSeriesItemLabel.ItemLabelLocation.Auto;

        int items = blockName.Length;

        ChartSeriesItem[] chartSeriesItems = new ChartSeriesItem[items];

        for (int i = 0; i < items; i++)

        {      

            chartSeriesItems[i] = new ChartSeriesItem();            

            chartSeriesItems[i].Name = blockName[i];

            

            if(displayCaption)

                chartSeriesItems[i].Label.TextBlock.Text = blockName[i] + "(" + yValues[i].ToString() + " % )";

            //chartSeriesItems[i].Label.TextBlock.Text = yValues[i].ToString() + " %";               

            chartSeriesItems[i].YValue = yValues[i];

          

            chartSeries.Items.Add(chartSeriesItems[i]);

        }        

        return chartSeries;        

    }

C. Now the ChartSeries obtained from above method I am adding to my Rad Chart

        barChart1.Appearance.FillStyle.MainColor = Color.White;

        barChart1.Appearance.ImageQuality = Telerik.Charting.Styles.ImageQuality.None;

        barChart1.ChartTitle.TextBlock.Text = "Original TCO = " + Math.Round(tcoBaseValue, 2).ToString();

        barChart1.Appearance.BarOverlapPercent = 100;

        barChart1.AddChartSeries(GetChartSeries("-5% Change", blockCaption, yValuesL, Color.Yellow, true));

        barChart1.AddChartSeries(GetChartSeries("+5% Change", blockCaption, yValuesR, Color.Blue, false));

D. I am getting the bar chart (Attached). I want the captions to be moved into Left most side where Graph Scale\ Intervals used to be displayed.

Thanks and Regards...
Ashish Tripathi..

[Ves]

Hello Ashish,

By default RadChart will put values 1,2,3, etc. to X axis items (the vertical axis in this case). You can set barChart1.PlotArea.XAxis.AutoScale property to false. Now, you can manually add items to X axis and provide the text for them. Here is one possible approach:

barChart1.PlotArea.XAxis.AutoScale = false;
 int items = blockName.Length;
        for (int i = 0; i < items; i++)
        {
      barChart1.PlotArea.XAxis.AddItem(blockName[i] + "(" + yValues[i].ToString() + " % )");
        }

Hope this helps.




Kind regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.