PDA

View Full Version : [CLOSED] hide decimal values on chart markers



RCM
Jan 26, 2013, 11:30 PM
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"
}
}

Baidaly
Jan 27, 2013, 8:06 AM
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"
}
}

RCM
Jan 28, 2013, 3:28 PM
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

}


5489

Baidaly
Jan 29, 2013, 3:08 AM
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;
}
});

Daniil
Jan 29, 2013, 5:08 AM
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>

RCM
Jan 29, 2013, 4:29 PM
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>

RCM
Jan 29, 2013, 4:45 PM
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

RCM
Jan 29, 2013, 4:56 PM
The overide method throw an error on the following line



if (adjustEnd && (gutters.bottom + gutters.top) < bbox.height / 2) {


Complained that gutters is undefined.

Baidaly
Jan 29, 2013, 10:25 PM
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>

Daniil
Jan 30, 2013, 5:07 AM
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>

RCM
Jan 30, 2013, 5:12 PM
Setting the MajorTickSteps does not seem to work in my case and it makes the axes have multiple values that are the same on the numeric axis. However, I found a way to set the maximum value to a high value and thus prevent it from showing the decimal value.

Daniil
Jan 30, 2013, 5:24 PM
Setting the MajorTickSteps does not seem to work in my case and it makes the axes have multiple values that are the same on the numeric axis.

Well, I asked for a sample to reproduce the problem. If you will have a chance, please provide. Maybe, there is something we could fix.