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

  1. #1

    [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
    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
    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
    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
    Unfortunately, it's seems that Chart doesn't have this functionality by default.

    However, we will try to find some solution.
  6. #6
    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.
  7. #7
    OK, try the following solution. It's a trick but it should work:

    <script>
    	Ext.override(Ext.chart.axis.Category, {
    		applyData: function () {
    			this.callParent();
    			this.setLabels();
    			var count = this.chart.getChartStore().getCount();
    			return {
    				from: this.leftOffset == true ? -1 : 0,
    				to: count - 1,
    				power: 1,
    				step: 1,
    				steps: count - 1
    			};
    		},
    
    		setLabels: function () {
    			var store = this.chart.getChartStore(),
    			data = store.data.items,
    			d, dLen, record,
    			fields = this.fields,
    			ln = fields.length,
    			labels,
    			name,
    			i;
    			labels = this.labels = [];
    			if (this.type == 'Category' && this.leftOffset === true)
    				this.labels.push('');
    			for (d = 0, dLen = data.length; d < dLen; d++) {
    				record = data[d];
    				for (i = 0; i < ln; i++) {
    					name = record.get(fields[i]);
    					labels.push(name);
    				}
    			}
    		}
    	});
    </script>
    Also, you should add additional Config:

    <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year">
    	<CustomConfig>
    		<ext:ConfigItem Name="leftOffset" Value="true" Mode="Raw" />
    	</CustomConfig>
    </ext:CategoryAxis>
  8. #8
    Sencha opened a bug ticket.

    We have opened our Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/90
  9. #9
    Hello!

    The issue at #90 (linked above) was questioning the Ext.chart.axis.Category support for the length and width config options. Not really what was requested here, that rather than a bug, would be a feature request for charts.

    Seems there's still no feature like that available from charts down the road to ExtJS 6.5.1, and the logged issue has been marked as irreproducibe by Sencha, as the questioned properties are currently, respectively, private and non-existent.

    So, a feature request thread was then created to track this feature under #1547.

    We'll update here as soon as we have news about this feature.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. 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. Replies: 2
    Last Post: Oct 11, 2012, 10:40 PM
  4. 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