[FIXED] [#1546] [4.5.0] Continued Issue with Gaps in LineSeries Data
Following up from this previous thread, I am still having an issue with a CartesianChart using a LineSeries with gaps in 4.4.0. The last example from that thread works without issue, but when I remove the field Data2, now nothing on the chart loads.
Please see the following example where I removed the field Data2, results in an empty chart. I think what is happening is the range is not being properly calculated because of the presence of nulls.
Code:
<%@ 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 },
new { Month = "Feb", Data1 = 20},
new { Month = "Mar", Data1 = 19},
new { Month = "Apr", Data1 = 18},
new { Month = "May", Data1 = 18},
new { Month = "Jun" },
new { Month = "Jul", Data1 = 16},
new { Month = "Aug", Data1 = 16 },
new { Month = "Sep", Data1 = 16 },
new { Month = "Oct", Data1 = 16},
new { Month = "Nov", Data1 = 15},
new { Month = "Dec", Data1 = 20}
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Line Chart - Ext.NET Examples</title>
</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" />
</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"
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" DataGapsHandling="true">
<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>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
I have applied the following override to get this chart to work:
Code:
Ext.define('FixC', {
override: 'Ext.chart.Util',
expandRange: function (range, data) {
var length = data.length, min = range[0], max = range[1], i, value;
for (i = 0; i < length; i++) {
value = data[i];
if (!isFinite(value) || !Ext.isNumeric(value)) {
continue;
}
if (value < min || !isFinite(min) || !Ext.isNumeric(min)) {
min = value;
}
if (value > max || !isFinite(max) || !Ext.isNumeric(max)) {
max = value;
}
}
range[0] = min;
range[1] = max;
}
});
