What's New?

[OPEN] [#1547] [2.x] Offseting the first datapoint on the x- axis

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Dec 20, 2012, 5:33 PM

    [OPEN] [#1547] [2.x] Offseting the first datapoint on the x- axis

    How can the x-axis of the Ext js chart be configured so that the first data point on the x axis is not on the zero mark. from the website documentation

    http://docs.sencha.com/ext-js/4-1/#!...-cfg-adjustEnd

    the is a property called length and width that is suppose to offset the axis. I have tried that as shown below. But still the first point is on the zero level of the y-axis. What do you recommend?

     axes: [{
                             type: 'Numeric',
                             position: 'left',
                             fields: result.result.Yfields,
                             title: result.result.YfieldLabel,
                             minimum: 0,
                             adjustMinimumByMajorUnit: 0,
                             labelTitle: {
                                 "font": "bold 11px Arial"
                             }
                         }, {
                             type: 'Category',
                             position: 'bottom',
                             fields: [result.result.Xfield],
                             title: result.result.XfieldLabel,
                             grid: true,
                             length: 100,
                             width: 100,                          
                             labelTitle: {
                                 "font": "bold 11px Arial"
                             }
                         }],
    Last edited by fabricio.murta; Sep 15, 2017 at 10:28 PM.
  2. #2
    Dec 21, 2012, 1:48 AM
    Hello!

    Try to set not zero value in minimum: http://docs.sencha.com/ext-js/4-1/#!...ic-cfg-minimum
    Last edited by Baidaly; Dec 21, 2012 at 9:47 AM.
  3. #3
    Dec 21, 2012, 4:49 AM
    Hi everybody,

    I don't understand the requirement well.

    If you need to get the charted started from something else than a zero, then, as far as I can understand, you need to set up the minimum to 0 and start the chart from the value you need.

    Please take a look at the example below.

    Setting the minimum is required, because it will be 20 by default.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store s = this.Chart1.GetStore();
            s.DataSource = new object[]
            {
                new 
                {
                    x = 20,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
            s.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Chart 
            ID="Chart1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis Title="X" Fields="x" Position="Bottom" Minimum="0" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
        </ext:Chart>
    </form>
</body>
</html>
    If it is not what you need, please provide a mockup demonstrating the requirement.
  4. #4
    Dec 21, 2012, 4:40 PM
    From the response. I can see that both of you did not understand my question.

    The issue is not about minimum value as my x-axis is not a numeric field. The values displayed on the x axis are string value. Please look at my axis definition below

    axes: [{
                            type: 'Numeric',
                            position: 'left',
                            fields: result.result.Yfields,
                            title: result.result.YfieldLabel,
                            minimum: 0,
                            adjustMinimumByMajorUnit: 0,
                            labelTitle: {
                                "font": "bold 11px Arial"
                            }
                        }, {
                            type: 'Category',                                              <-----------------------------------------------------
                            position: 'bottom',
                            fields: [result.result.Xfield],
                            title: result.result.XfieldLabel,
                            grid: true,
                            length: 100,
                            width: 100,                          
                            labelTitle: {
                                "font": "bold 11px Arial"
                            }
                        }],
    The problem is that I do not want the first point on the x axis to be displayed on the Y-axis line. 
    
I do not want this
    |
    |
2  |                  *
    |
    |
 1 *
    |----------------|-----------------------------------------------------------|
Monday           Tuesday




I want to have this
    |
    |
 2 |                               *
    |
    |
 1 |           *
    |---------|----------------|--------------------------------------------------|
Offset->  Monday          Tuesday
    How can I create the offset above. I hope this is clearer now.
    Last edited by RCM; Dec 21, 2012 at 4:43 PM.
  5. #5
    Dec 24, 2012, 1:44 AM
    Unfortunately, it's seems that Chart doesn't have this functionality by default.

    However, we will try to find some solution.
  6. #6
    Dec 24, 2012, 11:44 AM
    I think the length and width settings just don't work.

    I reported to Sencha.
    http://www.sencha.com/forum/showthread.php?252356

    Lets wait what they will answer.

Similar Threads

  1. Chart: changing Fields of Axis runtime dynamically
    By tanky65 in forum 2.x Help
    Replies: 1
    Last Post: Nov 25, 2013, 5:13 PM
  2. [CLOSED] [#28] Change style of axis title
    By jchau in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Dec 29, 2012, 11:09 AM
  3. [CLOSED] Changing the font size of the column chart x and y axis title.
    By SymSure in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 11, 2012, 10:40 PM
  4. [CLOSED] Scale on numeric X-axis not correct when having multiple line series
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 13, 2012, 10:28 AM
  5. [CLOSED] Area chart starting axis
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 05, 2012, 8:56 PM

Posting Permissions