[CLOSED] hide decimal values on chart markers

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] hide decimal values on chart markers

    I have a chart with the y axis defined as shown below. However, when the chart renders it shows as shown in the picture attached. I would like to not show the decimal numbers on the numeric axis. How can I configure the numeric axis to show integer values only. Therefore i would not like to display the 0.2,0.4,0.6,0.8 as shown in the attached image

    axes: [{
                                     type: 'Numeric',
                                     position: 'left',
                                     decimals: 0,
                                     fields: result.result.Yfields,
                                     title: result.result.YfieldLabel,
                                     minimum: 0,
                                     minorTickSteps: 1,
                                     adjustMinimumByMajorUnit: 0,
                                     labelTitle: {
                                         "font": "bold 11px Arial"
                                     }
                                 }
    Attached Thumbnails Click image for larger version. 

Name:	y-axis.PNG 
Views:	73 
Size:	6.0 KB 
ID:	5483  
    Last edited by Daniil; Feb 05, 2013 at 4:22 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Try the following:

    axes: [{
    	 type: 'Numeric',
    	 position: 'left',
    	 fields: result.result.Yfields,
    	 title: result.result.YfieldLabel,
    	 minimum: 0,
             maximum: 1,
    	 majorTickSteps: 0,
    	 labelTitle: {
    		 "font": "bold 11px Arial"
    	 }
     }
  3. #3
    That did not fix my issue. The maximum value for the numeric axis is not 1 so setting this to 1 prevents the chart from rendering as the data is dynamic and grows over time. Setting majorTickSteps: 0, makes the chart to only show the largest possible value and the zero point value on the y-axis. I would like to see intermediate integer value and not just zero and the highest value. I want to show only the major this as interger values. See the attached chart. it shows decimal value between 0 and 7. I would like to only show interger values on the y-axis.

    I would like to see ,0, 1,2,3,4,5,6,7 on the y-axis and not the decimal values.

    axes: [{
                                     type: 'Numeric',
                                     position: 'left',
                                     fields: result.result.ChartView.YaxisField,
                                     title: false,
                                     grid: false,
                                     minimum: 0,
                                     minorTickSteps: 0                                
    
                                 }
    Click image for larger version. 

Name:	y-axis2.PNG 
Views:	79 
Size:	5.7 KB 
ID:	5489
  4. #4
    Try the following overriding and renderer:

    var noDecimalsRenderer = function (value, i) {
    	if (i != null && i == 0)
    		this.axisLabels = [];
    	value = Math.round(value);
    	console.log(value);
    	if (this.axisLabels.indexOf(value) != -1)
    		return '';
    	else {
    		this.axisLabels.push(value);
    		return value;
    	}
    };
    
    Ext.override(Ext.chart.axis.Axis, {
    	drawVerticalLabels: function () {
    		var me = this,
    		inflections = me.inflections,
    		position = me.position,
    		ln = inflections.length,
    		chart = me.chart,
    		insetPadding = chart.insetPadding,
    		labels = me.labels,
    		maxWidth = 0,
    		max = Math.max,
    		floor = Math.floor,
    		ceil = Math.ceil,
    		axes = me.chart.axes,
    		gutters = me.chart.maxGutters,
    		bbox, point, prevLabel, prevLabelId,
    		hasTop = axes.findIndex('position', 'top') != -1,
    		hasBottom = axes.findIndex('position', 'bottom') != -1,
    		adjustEnd = me.adjustEnd,
    		textLabel, text,
    		last = ln - 1, x, y, i;
    		for (i = 0; i < ln; i++) {
    			point = inflections[i];
    			text = me.label.renderer(labels[i], i);
    			textLabel = me.getOrCreateLabel(i, text);
    			bbox = textLabel._bbox;
    			maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
    			y = point[1];
    			if (adjustEnd && (gutters.bottom + gutters.top) < bbox.height / 2) {
    				if (i == last && !hasTop) {
    					y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
    				}
    				else if (i == 0 && !hasBottom) {
    					y = me.y + gutters.bottom - floor(bbox.height / 2);
    				}
    			}
    			if (position == 'left') {
    				x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
    			}
    			else {
    				x = point[0] + me.dashSize + me.label.padding + 2;
    			}
    			textLabel.setAttributes(Ext.apply({
    				hidden: false,
    				x: x,
    				y: y
    			}, me.label), true);
    			if (i != 0 && me.intersect(textLabel, prevLabel)) {
    				if (i === last && prevLabelId !== 0) {
    					prevLabel.hide(true);
    				} else {
    					textLabel.hide(true);
    					continue;
    				}
    			}
    			prevLabel = textLabel;
    			prevLabelId = i;
    		}
    		return maxWidth;
    	}
    });
  5. #5
    Could you also provide some sample to reproduce?

    There is no any decimal in the example below. Could you modify it to get decimals?

    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 = 0,
                        y = 0  
                    },
                    new 
                    {
                        x = 5,
                        y = 5  
                    },
                    new 
                    {
                        x = 10,
                        y = 10   
                    }
                };
                s.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <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" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
        </ext:Chart>
    </body>
    </html>
  6. #6
    Quote Originally Posted by Daniil View Post
    Could you also provide some sample to reproduce?

    There is no any decimal in the example below. Could you modify it to get decimals?

    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 = 0,
                        y = 0  
                    },
                    new 
                    {
                        x = 5,
                        y = 5  
                    },
                    new 
                    {
                        x = 10,
                        y = 10   
                    }
                };
                s.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <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" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
        </ext:Chart>
    </body>
    </html>

    You can reproduce it with the code below



    
    <%@ 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 = 0,
                        y = 0  
                    },
                    new 
                    {
                        x = 2,
                        y = 1  
                    },
                    new 
                    {
                        x = 3,
                        y = 2   
                    }
                };
                s.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Chart
            ID="Chart1"
            runat="server"
            Width="400"
            Height="400">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" 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" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
           
        </ext:Chart>
    </body>
    </html>
  7. #7
    Quote Originally Posted by Baidaly View Post
    Try the following overriding and renderer:

    var noDecimalsRenderer = function (value, i) {
    	if (i != null && i == 0)
    		this.axisLabels = [];
    	value = Math.round(value);
    	console.log(value);
    	if (this.axisLabels.indexOf(value) != -1)
    		return '';
    	else {
    		this.axisLabels.push(value);
    		return value;
    	}
    };
    
    How do I use this method in the 
    
    Ext.override(Ext.chart.axis.Axis, {
    	drawVerticalLabels: function () {
    		var me = this,
    		inflections = me.inflections,
    		position = me.position,
    		ln = inflections.length,
    		chart = me.chart,
    		insetPadding = chart.insetPadding,
    		labels = me.labels,
    		maxWidth = 0,
    		max = Math.max,
    		floor = Math.floor,
    		ceil = Math.ceil,
    		axes = me.chart.axes,
    		gutters = me.chart.maxGutters,
    		bbox, point, prevLabel, prevLabelId,
    		hasTop = axes.findIndex('position', 'top') != -1,
    		hasBottom = axes.findIndex('position', 'bottom') != -1,
    		adjustEnd = me.adjustEnd,
    		textLabel, text,
    		last = ln - 1, x, y, i;
    		for (i = 0; i < ln; i++) {
    			point = inflections[i];
    			text = me.label.renderer(labels[i], i);
    			textLabel = me.getOrCreateLabel(i, text);
    			bbox = textLabel._bbox;
    			maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
    			y = point[1];
    			if (adjustEnd && (gutters.bottom + gutters.top) < bbox.height / 2) {
    				if (i == last && !hasTop) {
    					y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
    				}
    				else if (i == 0 && !hasBottom) {
    					y = me.y + gutters.bottom - floor(bbox.height / 2);
    				}
    			}
    			if (position == 'left') {
    				x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
    			}
    			else {
    				x = point[0] + me.dashSize + me.label.padding + 2;
    			}
    			textLabel.setAttributes(Ext.apply({
    				hidden: false,
    				x: x,
    				y: y
    			}, me.label), true);
    			if (i != 0 && me.intersect(textLabel, prevLabel)) {
    				if (i === last && prevLabelId !== 0) {
    					prevLabel.hide(true);
    				} else {
    					textLabel.hide(true);
    					continue;
    				}
    			}
    			prevLabel = textLabel;
    			prevLabelId = i;
    		}
    		return maxWidth;
    	}
    });

    How do I use the nodecimalrender method. Can you provide me a sample of its usage
  8. #8
    The overide method throw an error on the following line

      if (adjustEnd && (gutters.bottom + gutters.top) < bbox.height / 2) {
    Complained that gutters is undefined.
  9. #9
    Try the following 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 = 0,
                        y = 0 
                    },
                    new
                    {
                        x = 2,
                        y = 1 
                    },
                    new
                    {
                        x = 3,
                        y = 2  
                    }
                };
                s.DataBind();
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <script>
            var noDecimalsRenderer = function (value, i) {
                if (i != null && i == 0)
                    this.axisLabels = [];
                value = Math.round(value);
                console.log(value);
                if (this.axisLabels.indexOf(value) != -1)
                    return '';
                else {
                    this.axisLabels.push(value);
                    return value;
                }
            };
    
            Ext.override(Ext.chart.axis.Axis, {
                drawVerticalLabels: function () {
                    var me = this,
                    inflections = me.inflections,
                    position = me.position,
                    ln = inflections.length,
                    chart = me.chart,
                    insetPadding = chart.insetPadding,
                    labels = me.labels,
                    maxWidth = 0,
                    max = Math.max,
                    floor = Math.floor,
                    ceil = Math.ceil,
                    axes = me.chart.axes,
                    gutters = me.chart.maxGutters,
                    bbox, point, prevLabel, prevLabelId,
                    hasTop = axes.findIndex('position', 'top') != -1,
                    hasBottom = axes.findIndex('position', 'bottom') != -1,
                    adjustEnd = me.adjustEnd,
                    textLabel, text,
                    last = ln - 1, x, y, i;
                    for (i = 0; i < ln; i++) {
                        point = inflections[i];
                        text = me.label.renderer(labels[i], i);
                        textLabel = me.getOrCreateLabel(i, text);
                        bbox = textLabel._bbox;
                        maxWidth = max(maxWidth, bbox.width + me.dashSize + me.label.padding);
                        y = point[1];
                        if (adjustEnd && (gutters.bottom + gutters.top) < bbox.height / 2) {
                            if (i == last && !hasTop) {
                                y = Math.max(y, me.y - me.length + ceil(bbox.height / 2) - insetPadding);
                            }
                            else if (i == 0 && !hasBottom) {
                                y = me.y + gutters.bottom - floor(bbox.height / 2);
                            }
                        }
                        if (position == 'left') {
                            x = point[0] - bbox.width - me.dashSize - me.label.padding - 2;
                        }
                        else {
                            x = point[0] + me.dashSize + me.label.padding + 2;
                        }
                        textLabel.setAttributes(Ext.apply({
                            hidden: false,
                            x: x,
                            y: y
                        }, me.label), true);
                        if (i != 0 && me.intersect(textLabel, prevLabel)) {
                            if (i === last && prevLabelId !== 0) {
                                prevLabel.hide(true);
                            } else {
                                textLabel.hide(true);
                                continue;
                            }
                        }
                        prevLabel = textLabel;
                        prevLabelId = i;
                    }
                    return maxWidth;
                },
    
                drawHorizontalLabels: function () {
                    var me = this,
                        labelConf = me.label,
                        floor = Math.floor,
                        max = Math.max,
                        axes = me.chart.axes,
                        insetPadding = me.chart.insetPadding,
                        gutters = me.chart.maxGutters,
                        position = me.position,
                        inflections = me.inflections,
                        ln = inflections.length,
                        labels = me.labels,
                        maxHeight = 0,
                        ratio,
                        bbox, point, prevLabel, prevLabelId,
                        adjustEnd = me.adjustEnd,
                        hasLeft = axes.findIndex('position', 'left') != -1,
                        hasRight = axes.findIndex('position', 'right') != -1,
                        textLabel, text,
                        last, x, y, i, firstLabel;
                    last = ln - 1;
                    point = inflections[0];
                    firstLabel = me.getOrCreateLabel(0, me.label.renderer(labels[0], 0));
                    ratio = Math.floor(Math.abs(Math.sin(labelConf.rotate && (labelConf.rotate.degrees * Math.PI / 180) || 0)));
                    for (i = 0; i < ln; i++) {
                        point = inflections[i];
                        text = me.label.renderer(labels[i], i);
                        textLabel = me.getOrCreateLabel(i, text);
                        bbox = textLabel._bbox;
                        maxHeight = max(maxHeight, bbox.height + me.dashSize + me.label.padding);
                        x = floor(point[0] - (ratio ? bbox.height : bbox.width) / 2);
                        if (adjustEnd && gutters.left == 0 && gutters.right == 0) {
                            if (i == 0 && !hasLeft) {
                                x = point[0];
                            }
                            else if (i == last && !hasRight) {
                                x = Math.min(x, point[0] - bbox.width + insetPadding);
                            }
                        }
                        if (position == 'top') {
                            y = point[1] - (me.dashSize * 2) - me.label.padding - (bbox.height / 2);
                        }
                        else {
                            y = point[1] + (me.dashSize * 2) + me.label.padding + (bbox.height / 2);
                        }
                        textLabel.setAttributes({
                            hidden: false,
                            x: x,
                            y: y
                        }, true);
                        if (i != 0 && (me.intersect(textLabel, prevLabel) || me.intersect(textLabel, firstLabel))) {
                            if (i === last && prevLabelId !== 0) {
                                prevLabel.hide(true);
                            } else {
                                textLabel.hide(true);
                                continue;
                            }
                        }
                        prevLabel = textLabel;
                        prevLabelId = i;
                    }
                    return maxHeight;
                }
            });
        </script>
        <ext:Chart ID="Chart1" runat="server" Width="400" Height="400">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" 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">
                    <Label>
                        <Renderer Fn="noDecimalsRenderer" />
                    </Label>
                </ext:NumericAxis>
                <ext:NumericAxis Title="Y" Fields="y" Position="Left">
                    <Label>
                        <Renderer Fn="noDecimalsRenderer" />
                    </Label>
                </ext:NumericAxis>
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
        </ext:Chart>
    </body>
    </html>
  10. #10
    Quote Originally Posted by RCM View Post
    You can reproduce it with the code below



    
    <%@ 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 = 0,
                        y = 0  
                    },
                    new 
                    {
                        x = 2,
                        y = 1  
                    },
                    new 
                    {
                        x = 3,
                        y = 2   
                    }
                };
                s.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html>
     
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Chart
            ID="Chart1"
            runat="server"
            Width="400"
            Height="400">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" 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" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
           
        </ext:Chart>
    </body>
    </html>
    Thank you for the sample. Setting up MajorTickSteps for the NumericAxises appears to be working.

    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 = 0,
                        y = 0  
                    },
                    new 
                    {
                        x = 2,
                        y = 1  
                    },
                    new 
                    {
                        x = 3,
                        y = 2   
                    }
                };
                s.DataBind();
            }
        }
    </script>
      
    <!DOCTYPE html>
      
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <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" MajorTickSteps="2" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" MajorTickSteps="1" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>        
        </ext:Chart>
    </body>
    </html>
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [#109] How to hide label in pie chart when value is 0
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 14, 2013, 11:48 AM
  2. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM
  3. [CLOSED] Hide pie chart when total value is 0
    By Tactem in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 22, 2012, 9:24 AM
  4. How can i add an icon into GMapPanel Markers?
    By philom01 in forum 1.x Help
    Replies: 0
    Last Post: Oct 25, 2011, 9:24 AM
  5. [CLOSED] Export Hide Id values
    By Satyanarayana murthy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 22, 2009, 6:18 AM

Posting Permissions