Axis and PlotArea problem

Thread is closed for posting
4 posts, 0 answers
  1. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 31 Jan 2013 Link to this post

    With the declaration of the RadChart (see below), I found few render problems:

    1 - When unzoomed, the top-left corner of the PlotArea is round if I ask to have to have all corners of the chart only to be round. I tried to declare in the code (ASPX) to have all PlotArea corners as rectangle without success.

    2- When zoomes, both axis are greater than the PlotArea. The worst one is the X-Axis which is very to big and in the left it terminate where the Y-Axis Label begin.

    Note: I am using version 2012.3.1308.45

    ASPX
    <telerik:RadChart ID="RadChart" runat="server" Width="800px" DefaultType="Line" OnClick="RadChart_Click" OnZoom="RadChart_Zoom" AutoLayout="True" Height="400px" >
        <ClientSettings ScrollMode="Both" ZoomRectangleColor="White" ZoomRectangleOpacity="0.5" />
        <ChartTitle>
            <TextBlock Text="Exemple avec RadChart">
            </TextBlock>
        </ChartTitle>
        <Series>
            <telerik:ChartSeries Name="Value_OK" Type="Line">
                <Appearance ShowLabels="False">
                    <FillStyle MainColor="Lime">
                    </FillStyle>
                </Appearance>
            </telerik:ChartSeries>
            <telerik:ChartSeries Name="Value_Alarm" Type="Line">
                <Appearance ShowLabels="False">
                    <FillStyle MainColor="Aqua">
                    </FillStyle>
                </Appearance>
            </telerik:ChartSeries>
            <telerik:ChartSeries Name="HighLimit" Type="Line">
                <Appearance ShowLabels="False">
                    <FillStyle MainColor="Red">
                    </FillStyle>
                </Appearance>
            </telerik:ChartSeries>
        </Series>
        <Appearance TextQuality="AntiAlias" Corners="Round, Round, Round, Round, 6">
        </Appearance>
        <PlotArea>
            <Appearance Dimensions-Margins="18%, 24%, 22%, 10%">
                <FillStyle MainColor="Black" />
            </Appearance>
            <XAxis LayoutMode="Normal" AutoScale="False">
                <AxisLabel TextBlock-Text="Temperature (&deg;C)">
                </AxisLabel>
                <Appearance ValueFormat="ShortTime" >
                    <MajorGridLines Visible="true" />
                    <MinorGridLines Visible="false"/>
                    <LabelAppearance RotationAngle="90" Position-AlignedPosition="Top">
                    </LabelAppearance>
                </Appearance>
            </XAxis>
            <YAxis IsZeroBased="false" AxisMode="Extended">
                <Appearance>
                    <MajorGridLines Visible="true"/>
                    <MinorGridLines Visible="False" />
                </Appearance>
                <AxisLabel Visible="true">
                    <TextBlock Text="Temperature (°C)">
                    </TextBlock>
                </AxisLabel>
            </YAxis>
        </PlotArea>
    </telerik:RadChart>
  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 05 Feb 2013 Link to this post

    Hello,

    Indeed there is an issue when the corners are rounded and used in a scenario when zooming and scrolling is enabled. I have forwarded this to our developers so they will decide whether it will be fixed.

    Onto your other question, I tried to reproduce the issue using the code you have provided but with no avail.
    In order for use to be able could you send us sample runnable project isolating the issue. As this is a forum thread you can use a third party web site for uploading the sample and share it with use.

    Regards,
    Peshito
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc
    Marc avatar
    39 posts
    Member since:
    Nov 2012

    Posted 05 Feb 2013 Link to this post

    Hi Peshito, sorry but I don't have any space to put a compiled project... but here is the definition of my RadChart. To reproduce the bug, just zoom and scroll (maybe you have to put some data ?!?!). I put a another image where you can see that both axis have the problem.

    Also I notice another problem with the zoom mode and you can reproduce it with the on-line demo at http://demos.telerik.com/aspnet-ajax/chart/examples/newfeatures/zoomingscrolling/defaultcs.aspx . Follow this procedure:
    - Make a zoom
    - Try to move a scroll bar...the mouse click is refused!
    - Click on a scroll bar...then you are able to scroll. So it is required to just click on a scroll bar to be able to slide it on another mouse click.

    ASPX
    <telerik:RadChart ID="radChart" runat="server" Width="800px" DefaultType="Line" AutoLayout="True" Height="400px">
        <ClientSettings ScrollMode="Both" />
        <ChartTitle>
            <TextBlock Text="Exemple avec RadChart">
            </TextBlock>
        </ChartTitle>
        <Series>
            <telerik:ChartSeries Name="HighLimit" Type="Line">
                <Appearance ShowLabels="False">
                    <LineSeriesAppearance Width="1" />
                    <FillStyle MainColor="Red">
                    </FillStyle>
                </Appearance>
            </telerik:ChartSeries>
            <telerik:ChartSeries Name="MinMax" Type="CandleStick">
                <Appearance ShowLabels="False">
                    <Border Color="Black" />
                </Appearance>
            </telerik:ChartSeries>
            <telerik:ChartSeries Name="Average" Type="Line">
                <Appearance ShowLabels="False">
                    <LineSeriesAppearance Width="1" />
                    <Border Width="1" />
                    <FillStyle MainColor="Black" />
                </Appearance>
            </telerik:ChartSeries>
        </Series>
        <Appearance TextQuality="AntiAlias">
        </Appearance>
        <PlotArea>
            <Appearance Dimensions-Margins="18%, 24%, 22%, 10%">
            </Appearance>
            <XAxis LayoutMode="Normal" AutoScale="False">
                <Appearance ValueFormat="ShortTime">
                    <MajorGridLines Visible="true" />
                    <MinorGridLines Visible="false" />
                    <LabelAppearance RotationAngle="90" Position-AlignedPosition="Top">
                    </LabelAppearance>
                </Appearance>
            </XAxis>
            <YAxis IsZeroBased="False" AxisMode="Extended">
                <Appearance>
                    <MajorGridLines Visible="true" />
                    <MinorGridLines Visible="False" />
                </Appearance>
                <AxisLabel Visible="true">
                    <Appearance Visible="False" Position-AlignedPosition="Center"></Appearance>
                    <TextBlock Text="Temperature (°C)">
                    </TextBlock>
                </AxisLabel>
            </YAxis>
        </PlotArea>
        <Legend Visible="false">
            <Appearance Visible="False"></Appearance>
        </Legend>
    </telerik:RadChart>
  5. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 08 Feb 2013 Link to this post

    Hello Marc,

    It appears that the clicking issue is reproducible in IE8 only. As a workaround I would suggest you setting the XScale property in your ClientSettings initially.

    Onto your other issue, using axis Normal layout mode combined with zooming  leads to this labels overlapping behavior. You could use Inside layout mode in order to avoid this overlapping.

    Hope this helps.

    All the best,
    Peshito
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top