With just FixA, there is no javascript error but the series are missing from the chart. I still have Type set to Float and AllowNull=true. Here is my complete test code with just FixA in place:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Chart1.GetStore().DataSource = new List<object>
{
new { Month = "Jan", Data1 = 20.3, Data2 = 10.3 },
new { Month = "Feb", Data1 = 20, Data2 = 10 },
new { Month = "Mar", Data1 = 19, Data2 = 9 },
new { Month = "Apr", Data1 = 18, Data2 = 8 },
new { Month = "May", Data1 = 18, Data2 = 8 },
new { Month = "Jun", Data2 = 7 },
new { Month = "Jul", Data1 = 16, Data2 = 6 },
new { Month = "Aug", Data1 = 16 },
new { Month = "Sep", Data1 = 16, Data2 = 6 },
new { Month = "Oct", Data1 = 16, Data2 = 6 },
new { Month = "Nov", Data1 = 15, Data2 = 5 },
new { Month = "Dec", Data1 = 20, Data2 = 5 }
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>
<script type="text/javascript">
Ext.define('FixA', {
override: 'Ext.chart.series.Cartesian',
getYRange: function () {
return (this.dataRange[1] === null || this.dataRange[3] === null)
? null : [this.dataRange[1], this.dataRange[3]];
},
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Line Chart Example</h1>
<p>A basic line chart displays information as a series of data points connected through</p>
<p>straight lines. It is similar to scatter plot, except that the points are connected.</p>
<p>Line charts are often used to visualize trends in data over a period.</p>
<ext:Panel
runat="server"
Width="650"
Height="550"
Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button
runat="server"
Text="Preview"
Handler="this.up('panel').down('chart').preview();" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server"
InsetPadding="40"
InnerPadding="0 40 0 40">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Data1" Type="Float" AllowNull="true" />
<ext:ModelField Name="Data2" Type="Float" AllowNull="true" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Interactions>
<ext:PanZoomInteraction ZoomOnPanGesture="true" />
</Interactions>
<Items>
<ext:TextSprite
Text="Line Charts - Line With data Gaps"
FontSize="22"
Width="100"
Height="30"
X="40"
Y="20" />
</Items>
<Axes>
<ext:NumericAxis
Position="Left"
Fields="Data1,Data2"
Grid="true">
<Renderer Handler="return layoutContext.renderer(label) + '%';" />
</ext:NumericAxis>
<ext:CategoryAxis
Position="Bottom"
Fields="Month"
Grid="true">
<Label RotationDegrees="-45" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries XField="Month" YField="Data1">
<StyleSpec>
<ext:Sprite LineWidth="4" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
</HighlightConfig>
<Marker>
<ext:Sprite Radius="4" />
</Marker>
<Label Field="Data1" Display="Over" />
</ext:LineSeries>
<ext:LineSeries XField="Month" YField="Data2">
<StyleSpec>
<ext:Sprite LineWidth="4" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
</HighlightConfig>
<Marker>
<ext:Sprite Radius="4" />
</Marker>
<Label Field="Data2" Display="Over" />
</ext:LineSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Here is the complete code with FixA + FixB -- both series are now displayed:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Chart1.GetStore().DataSource = new List<object>
{
new { Month = "Jan", Data1 = 20.3, Data2 = 10.3 },
new { Month = "Feb", Data1 = 20, Data2 = 10 },
new { Month = "Mar", Data1 = 19, Data2 = 9 },
new { Month = "Apr", Data1 = 18, Data2 = 8 },
new { Month = "May", Data1 = 18, Data2 = 8 },
new { Month = "Jun", Data2 = 7 },
new { Month = "Jul", Data1 = 16, Data2 = 6 },
new { Month = "Aug", Data1 = 16 },
new { Month = "Sep", Data1 = 16, Data2 = 6 },
new { Month = "Oct", Data1 = 16, Data2 = 6 },
new { Month = "Nov", Data1 = 15, Data2 = 5 },
new { Month = "Dec", Data1 = 20, Data2 = 5 }
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>
<script type="text/javascript">
Ext.define('FixA', {
override: 'Ext.chart.series.Cartesian',
getYRange: function () {
return (this.dataRange[1] === null || this.dataRange[3] === null)
? null : [this.dataRange[1], this.dataRange[3]];
},
});
Ext.define('FixB', {
override: 'Ext.chart.series.Cartesian',
getRangeOfData: function (data, range) {
var i, length = data.length,
value, min = range.min, max = range.max;
for (i = 0; i < length; i++) {
value = data[i];
if (Ext.isNumeric(value)) {
if (value < min) {
min = value;
}
if (value > max) {
max = value;
}
}
}
range.min = min;
range.max = max;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Line Chart Example</h1>
<p>A basic line chart displays information as a series of data points connected through</p>
<p>straight lines. It is similar to scatter plot, except that the points are connected.</p>
<p>Line charts are often used to visualize trends in data over a period.</p>
<ext:Panel
runat="server"
Width="650"
Height="550"
Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Button
runat="server"
Text="Preview"
Handler="this.up('panel').down('chart').preview();" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server"
InsetPadding="40"
InnerPadding="0 40 0 40">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Data1" Type="Float" AllowNull="true" />
<ext:ModelField Name="Data2" Type="Float" AllowNull="true" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Interactions>
<ext:PanZoomInteraction ZoomOnPanGesture="true" />
</Interactions>
<Items>
<ext:TextSprite
Text="Line Charts - Line With data Gaps"
FontSize="22"
Width="100"
Height="30"
X="40"
Y="20" />
</Items>
<Axes>
<ext:NumericAxis
Position="Left"
Fields="Data1,Data2"
Grid="true">
<Renderer Handler="return layoutContext.renderer(label) + '%';" />
</ext:NumericAxis>
<ext:CategoryAxis
Position="Bottom"
Fields="Month"
Grid="true">
<Label RotationDegrees="-45" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries XField="Month" YField="Data1">
<StyleSpec>
<ext:Sprite LineWidth="4" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
</HighlightConfig>
<Marker>
<ext:Sprite Radius="4" />
</Marker>
<Label Field="Data1" Display="Over" />
</ext:LineSeries>
<ext:LineSeries XField="Month" YField="Data2">
<StyleSpec>
<ext:Sprite LineWidth="4" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
</HighlightConfig>
<Marker>
<ext:Sprite Radius="4" />
</Marker>
<Label Field="Data2" Display="Over" />
</ext:LineSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html>