Jul 13, 2012, 8:34 AM
[CLOSED] Scale on numeric X-axis not correct when having multiple line series
When using 2 numeric axes for multiple line series, if the Maximum and Minimum is not specified, the scale on the X-axis is not correct. I think it this more likely ExtJS issue. Here is the code to reproduce the problem. Please do mouse over on the datapoint and you will see the X values are not corresponding to the X-axis, however the Y-axis is correct. This won't happen when there is only one line series. Thanks
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public void loadData()
{
strData.Data = new object[] {
new {
xvalue =2.00031,
yvalue=10.234 ,
xvalue2 =2.50031,
yvalue2=10.234
},
new {
xvalue =2.50031,
yvalue=11.234 ,
xvalue2 =3.50031,
yvalue2=12.234
},
new {
xvalue =3.50031,
yvalue=13.334 ,
xvalue2 =4.80031,
yvalue2=13.234
}, new {
xvalue =4.20031,
yvalue=15.234 ,
xvalue2 =8.50031,
yvalue2=16.234
},
new {
xvalue =5.00031,
yvalue=16.234 ,
xvalue2 =12.50031,
yvalue2=20.234
},
new {
xvalue =7.80031,
yvalue=18 ,
xvalue2 =15.50031,
yvalue2=21.234
}
};
strData.DataBind();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel runat="server" >
<Items>
<ext:Chart
ID="chtRiskReturn"
runat="server"
Shadow="true"
Animate="false"
StyleSpec="background:#fff"
Width="1024" Height="400" Flex="1" >
<LegendConfig Position="Right" >
</LegendConfig>
<Store>
<ext:Store ID="strData"
runat="server"
AutoDataBind="true">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="xvalue" />
<ext:ModelField Name="yvalue" />
<ext:ModelField Name="xvalue2" />
<ext:ModelField Name="yvalue2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Fields="yvalue, yvalue2"
Title="Y"
Position="Left"
>
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>
<ext:NumericAxis
Fields="xvalue, xvalue2"
Title="X"
Position="Bottom"
Grid="true"
MajorTickSteps="9"
/>
</Axes>
<Series>
<ext:LineSeries Highlight="true" YField="yvalue" Title="line1" XField="xvalue" ShowMarkers="true" Axes="Left, Bottom">
<Tips TrackMouse="true" Width="120" Height="40">
<Renderer Fn="
function(storeItem, item) {
this.setTitle('X: ' + storeItem.get('xvalue').toFixed(2) + '<br /> Y: ' + storeItem.get('yvalue').toFixed(2) + '%');
}
"></Renderer>
</Tips>
<HighlightConfig Size="3" Radius="3" />
<MarkerConfig Type="Diamond" Size="2" Radius="2" StrokeWidth="1" StrokeLinejoin="Round" DominantBaseline="Mathematical" />
</ext:LineSeries>
<ext:LineSeries Axes="Left, Bottom" XField="xvalue2" YField="yvalue2" Title="Line2" ShowMarkers="true" >
<Tips TrackMouse="true" Width="120" Height="40">
<Renderer Fn="
function(storeItem, item) {
this.setTitle('X: ' + storeItem.get('xvalue2').toFixed(2) + '<br /> Y: ' + storeItem.get('yvalue2').toFixed(2) + '%');
}
"></Renderer>
</Tips>
</ext:LineSeries>
</Series>
</ext:Chart>
<ext:Button runat="server" Text="load data" >
<Listeners>
<Click Handler="#{DirectMethods}.loadData();"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Jul 16, 2012 at 9:40 PM.
Reason: [CLOSED]
