Difficulty formatting the chart appearance.

Thread is closed for posting
3 posts, 1 answers
  1. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 13 Jun 2011 Link to this post

    I've not used the charting controls before and have been playing with them today as it looks like we'll need to start using them soon.

    All I want to do is display the chart minus any of the titles and legends etc and am having trouble getting the ASP.Net version of the control to sit nicely in the border of the chart, but this seemed fairly easy to do in the WinForms control simply by hiding the legend and the chart title. I tried this in the ASP.Net version but it doesn;t appear to work.

    I've attached a couple of images to show what I mean. I would like my chart to appear like the Winforms image below (note the uniform padding/margin around the chart) in my ASP.Net pages, but as you can see, this uniform spacing is lacking in the ASP.Net control.

    I've also attached my code so you can see how I have generated the ASP.Net charts and hopefully someone will show me how to correctly set the appearance of my ASP.Net chart.

    Thanks.
    <telerik:RadChart ID="TestRadChart" runat="server" Width="465px" Height="200px" 
        Legend-Visible="False" ChartTitle-Visible="False" DefaultType="Line" 
        Skin="Default" >
    </telerik:RadChart>

    protected void Page_Load(object sender, EventArgs e)
    {
        Random random = new Random((int)DateTime.Now.Ticks);
        int testValue;
        ChartSeriesItem seriesItem;
        ChartSeriesItemsCollection series1Items = new ChartSeriesItemsCollection();
        ChartSeriesItemsCollection series2Items = new ChartSeriesItemsCollection();
        for (int i = 0; i < 20; i++)
        {
            testValue = random.Next(0, 10);
            seriesItem = new ChartSeriesItem(testValue, (i+1).ToString());
            series1Items.Add(seriesItem);
        }
        for (int i = 0; i < 20; i++)
        {
            testValue = random.Next(0, 10);
            seriesItem = new ChartSeriesItem(testValue, (i + 1).ToString());
            series2Items.Add(seriesItem);
        }
        ChartSeries chartSeries1 = new ChartSeries();
        chartSeries1.Items.AddRange(series1Items);
        chartSeries1.Appearance.TextAppearance.Visible = false;
        chartSeries1.Type = ChartSeriesType.Line;
        chartSeries1.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.Nothing;
        ChartSeries chartSeries2 = new ChartSeries();
        chartSeries2.Items.AddRange(series2Items);
        chartSeries2.Appearance.TextAppearance.Visible = false;
        chartSeries2.Type = ChartSeriesType.Line;
        chartSeries2.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.Nothing;
        TestRadChart.Series.Add(chartSeries1);
        TestRadChart.Series.Add(chartSeries2);
        TestRadChart.Legend.Visible = false;
          
    }
  2. Answer
    Missing user
    Missing user avatar

    Posted 16 Jun 2011 Link to this post

    Hi Karl,

    You can use the AutoLayout functionality which instructs the control to perform layout arrangement automatically for optimal utilization of the whole chart area and ensures that all chart elements are fully readable and do not overlap with one another. To enable this feature set the RadChart.AutoLayout to True.
    Another approach is to set the dimensions of the PlotArea manually. For example:
    <telerik:RadChart ID="radChart" runat="server" Width="465px" Height="200px" Legend-Visible="False"
        ChartTitle-Visible="False" DefaultType="Line" Skin="Default">
        <PlotArea>
            <Appearance Dimensions-Margins="10%, 5%, 15%, 6%"></Appearance>
        </PlotArea>
    </telerik:RadChart>

    or in code behind:
    Telerik.Charting.Styles.Unit top, right, bottom, left;
     
    top = Telerik.Charting.Styles.Unit.Percentage(10);
    right = Telerik.Charting.Styles.Unit.Percentage(5);
    bottom = Telerik.Charting.Styles.Unit.Percentage(15);
    left = Telerik.Charting.Styles.Unit.Percentage(6);
     
    radChart.PlotArea.Appearance.Dimensions.Margins =
        new Telerik.Charting.Styles.ChartMargins(top, right, bottom, left);

    I hope this helps.

    Best wishes,
    Polina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 16 Jun 2011 Link to this post

    Just what I was after... Thanks Polina...
Back to Top