This is a migrated thread and some comments may be shown as answers.

YAxis not scaling properly

5 Answers 110 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 19 Oct 2012, 08:58 PM
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!

5 Answers, 1 is accepted

Sort by
0
Accepted
Petar Kirov
Telerik team
answered on 24 Oct 2012, 03:45 PM
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.
0
Asutosh
Top achievements
Rank 1
answered on 24 Jun 2014, 11:18 AM
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>

0
Danail Vasilev
Telerik team
answered on 27 Jun 2014, 09:30 AM
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.

 
0
Asutosh
Top achievements
Rank 1
answered on 27 Jun 2014, 09:37 AM
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.
0
Danail Vasilev
Telerik team
answered on 02 Jul 2014, 07:29 AM
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.

 
Tags
Chart (Obsolete)
Asked by
Dave
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Asutosh
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or