YAxis not scaling properly

Thread is closed for posting
6 posts, 1 answers
  1. Dave
    Dave avatar
    35 posts
    Member since:
    Oct 2012

    Posted 19 Oct 2012 Link to this post

    Hello. I recently incorporated AJAX RadChart into our project, and I'm working on polishing it now.

    We have a logarithmic YAxis, and it doesn't seem to be scaling properly. I have AutoScale=True and IsZeroBased=false.

    The chart displays a huge empty portion of the chart, between 1 and 10,000 on the Axis. There isn't even any data value below 10,000. Why is it plotting this empty area? It should start plotting near the bottom of the data lines, right?

    Here is my chart:

    <telerik:RadChart ID="PmChart" runat="server" EnableViewState="True" DefaultType="Line" Skin="Outlook" OnZoom="PmChart_Zoom">
        <ClientSettings ScrollMode="Both" />
        <ChartTitle Visible="False" />
        <PlotArea>
            <XAxis LayoutMode="Inside" AutoScale="False" IsZeroBased="False" DataLabelsColumn="ChartDate">
                <Appearance MajorGridLines-Visible="false">
                    <LabelAppearance RotationAngle="270" Position-AlignedPosition="Top" />
                </Appearance>
            </XAxis>
            <YAxis AutoScale="True" IsZeroBased="False" />
            <YAxis2 AutoScale="True" IsZeroBased="False" />
        </PlotArea>
    </telerik:RadChart>


    I've attached an image to help illustrate my problem. Any help would be greatly appreciated. Thanks!
  2. Answer
    Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 24 Oct 2012 Link to this post

    Hi Dave,

    Unfortunately when the axis is logarithmic it does not auto range and starts from zero, even though you have set IsZeroBased to false.

    Setting manually the range should solve your problem. For example:
    chart.PlotArea.YAxis.AutoScale = false;
    chart.PlotArea.YAxis.MinValue = Math.Log(1000, 10);
    chart.PlotArea.YAxis.MaxValue = Math.Log(10000000, 10);

    We are sorry for the inconvenience.
     
    Kind regards,
    Petar Kirov
    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. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 24 Jun 2014 in reply to Petar Kirov Link to this post

    i have kind of similar problem . i need to include values 0.01 also and 32 also on same y axis . now you can check my code below and screenshot attached on whats the issue. smaller values in begining are not showing at all. and when i try to set starting value of y axis as 0 its not working. please let me know how can i see all bars properly for 0.01 value as well as 32 on same chart.

    my code,

    <telerik:RadChart ID="second_Line_chart" runat="Server" Width="495px" AutoLayout="true" Skin="Office2007">
                                                                <ClientSettings EnableZoom="false" ScrollMode="none" XScale="4"></ClientSettings>
                                                                 <PlotArea Appearance-Border-Visible="false">
                                                                        <Appearance Dimensions-Margins="10px,10px,200px,100px" Border-Visible="false"></Appearance>
                                                                        <XAxis Visible="True" AxisLabel-Appearance-RotationAngle="90">
                                                                            <Appearance MajorGridLines-Visible="false" MinorGridLines-Visible="false" LabelAppearance-Visible="false"></Appearance>
                                                                        </XAxis>
                                                                        <YAxis Visible="True" IsLogarithmic="true" LogarithmBase="5" AutoScale="false" AxisLabel-Visible="false" MinValue="0" MaxValue="32.00">
                                                                            <Appearance MajorGridLines-Visible="false" MinorGridLines-Visible="false"></Appearance>
                                                                        </YAxis>
                                                                        <Appearance>
                                                                        </Appearance>
                                                                    </PlotArea>
                                                                <Series>
                                                                    <telerik:ChartSeries DataYColumn="AcoAmountPct" Type="Bar" Name="acodata">

                                                                        <Appearance FillStyle-MainColor="223, 87, 60">
                                                                        </Appearance>
                                                                    </telerik:ChartSeries>
                                                                    <telerik:ChartSeries DataYColumn="NationalAmountPct" Type="line" Name="nationaldata">
                                                                        <Appearance FillStyle-MainColor="223, 87, 60">
                                                                        </Appearance>
                                                                    </telerik:ChartSeries>
                                                                </Series>
                                                                <Legend Visible="false"></Legend>
                                                                <ChartTitle TextBlock-Text="Scrolling only (initial XScale applied)" Visible="false">
                                                                </ChartTitle>
                                                            </telerik:RadChart>

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 27 Jun 2014 Link to this post

    Hello Asutosh,

    I can suggest that you use the newer RadHtmlChart with logarithmic axis (see this feedback item), instead of the obsolete RadChart because it handles better this scenario. For example:
    ASPX:
    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.valueAxis.type = "log";
            chart.repaint();
        }
    </script>
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
        <PlotArea>
            <YAxis></YAxis>
            <Series>
                <telerik:ColumnSeries>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        double[] yValues = new double[] { 0.01, 0.05, 0.11, 2, 2.5, 10, 30 };
        for (int i = 0; i < yValues.Length; i++)
        {
            CategorySeriesItem csi1 = new CategorySeriesItem() { Y = (decimal)yValues[i] };
            (RadHtmlChart1.PlotArea.Series[0] as ColumnSeries).SeriesItems.Add(csi1);
        }
    }

    The above code will render this chart.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 27 Jun 2014 in reply to Danail Vasilev Link to this post

    thank your for your reply dave. but we are using radhtml chart only for our project but for one chart we have around 60 bars for one chart and x axis dont have numeric value so as per telerik people we cant use chart navigator if x axis is not numeric. so we ended up trying radchart and face issues there too.
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 02 Jul 2014 Link to this post

    Hello Asutosh,

    The navigator can only be used with category series(i.e., Area, Bar, Column and Line series) for displaying data over time. More information is available here and here.

    What I can suggest, however, is that you attach to the drag, dragEnd and zoom events of the chart and manually filter the data source when they occur. For example:
    JavaScript:
    <script type="text/javascript">
        function pageLoad() {
            demo.chart = $find('<%=RadHtmlChart1.ClientID%>');
            demo.initialize();
        }
     
        ; (function () {
            var demo = window.demo = window.demo || {},
                chart, MIN_SIZE, MAX_SIZE, SORT,
                DRAG_THR, viewStart, viewSize, newStart, data;
     
            demo.initialize = function () {
                // Minimum/maximum number of visible items
                MIN_SIZE = 10;
                MAX_SIZE = 20;
     
                // Optional sort expression
                // var SORT = { field: "val", dir: "asc" };
                SORT = {};
     
                // Minimum distance in px to start dragging
                DRAG_THR = 50;
     
                // State variables
                viewStart = 0;
                viewSize = MIN_SIZE;
                newStart;
     
                // Sample data
                data = [];
                for (var i = 0; i < 100; i++) {
                    var val = Math.round(Math.random() * 10);
                    data.push({
                        category: "C" + i,
                        val: val
                    });
                };
     
                chart = demo.chart;
     
                //Attach chart to drag, dragEnd and zoom event handlers
                chart._chartObject.bind("drag", demo.onDrag);
                chart._chartObject.bind("dragEnd", demo.onDragEnd);
                chart._chartObject.bind("zoom", demo.onZoom);
                //Set chart data source and configure pageSize, page and sort
                chart._chartObject.dataSource.data(data);
                chart._chartObject.dataSource.pageSize(viewSize);
                chart._chartObject.dataSource.page(0);
                chart._chartObject.dataSource.sort({ field: "val", dir: "desc" });
            }
     
            // Drag handler
            demo.onDrag = function (e) {
                var chart = e.sender;
                var ds = chart.dataSource;
                var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);
     
                if (delta != 0) {
                    newStart = Math.max(0, viewStart - delta);
                    newStart = Math.min(data.length - viewSize, newStart);
                    ds.query({
                        skip: newStart,
                        page: 0,
                        pageSize: viewSize,
                        sort: SORT
                    });
                }
            }
     
            demo.onDragEnd = function () {
                viewStart = newStart;
            }
     
            // Zoom handler
            demo.onZoom = function (e) {
                var chart = e.sender;
                var ds = chart.dataSource;
                viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
                ds.query({
                    skip: viewStart,
                    page: 0,
                    pageSize: viewSize,
                    sort: SORT
                });
     
                // Prevent document scrolling
                e.originalEvent.preventDefault();
            }
        })();
     
    </script>

    ASPX:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px" Transitions="false">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Product 1" DataFieldY="val">
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="category">
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>

    You can also find the full runnable VS example in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017