May 27, 2017, 5:41 AM
Hello again @tylert!
We've just implemented this on Ext.NET. It is now available from github.
The fix involves actually enabling the fix, for any side effects it may have (and as it is necessary only in a specific case of gaps + auto-scale).
The fix is enabled via the
This would be the code required to run the example, if under the fixed Ext.NET version:
I hope this helps!
We've just implemented this on Ext.NET. It is now available from github.
The fix involves actually enabling the fix, for any side effects it may have (and as it is necessary only in a specific case of gaps + auto-scale).
The fix is enabled via the
DataGapsHandling="true"
property set to the each series' components.This would be the code required to run the example, if under the fixed Ext.NET version:
<%@ 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>
</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" />
</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" 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>
<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>
Notice the property is set in line 107 but not on 120. It is just because the second series map Data2, which is rid of the 'float' type restriction which, in turn, was a condition to trigger the issue.I hope this helps!