YAxis not scaling properly

[Dave]

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!

[Petar Kirov]

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

[Asutosh]

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>

[Danail Vasilev]

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

 

 

[Asutosh]

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.

[Danail Vasilev]

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