Mar 11, 2016, 3:24 PM
[OPEN] [#1283] [3.3/4.0.0-beta] Problem with TimeAxis Steps
Hi,
In ext-net 2.x, for timeaxis, I can set StepUnit and Step, but in Ext.Net 3.3 it does not seem to consider these properties.
See my example, I put in "hour" in the StepUnit and 3 in Step, but the chart continues to show me hour by hour.
I have done several tests, but it does not change.
Thank you
In ext-net 2.x, for timeaxis, I can set StepUnit and Step, but in Ext.Net 3.3 it does not seem to consider these properties.
See my example, I put in "hour" in the StepUnit and 3 in Step, but the chart continues to show me hour by hour.
I have done several tests, but it does not change.
Thank you
<%@ Page Language="C#" %>
<script runat="server">
private List<object> GenerateData()
{
List<object> data = new List<object>();
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;
DateTime date = DateTime.Today;
for (int i = 0; i < 60; i++)
{
data.Add(new
{
Date = date.AddMinutes(i * 15),
Data1 = Math.Round(random.NextDouble() * 10),
Data2 = Math.Round(random.NextDouble() * 100)
});
}
return data;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Chart1.GetStore().DataSource = this.GenerateData();
}
}
protected void ReloadData(object sender, DirectEventArgs e)
{
Store store = this.Chart1.GetStore();
store.DataSource = GenerateData();
store.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Line Chart With Multiple Axes - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Title="Line Chart"
Width="800"
Height="400"
Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button
runat="server"
Text="Reload Data"
Icon="ArrowRefresh"
OnDirectClick="ReloadData"
/>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server"
Animate="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:TimeAxis
Title="Date"
Fields="Date"
Position="Bottom"
DateFormat="hh:mm"
FromDate="<%# DateTime.Today %>"
ToDate="<%# DateTime.Today.AddMinutes(59 * 15) %>"
StepUnit="Hour"
Step="3"
AutoDataBind="true" />
<ext:NumericAxis
Title="Data (blue)"
Fields="Data1"
Position="Left"
Maximum="10">
<TitleConfig FillStyle="#115fa6" />
<Label FillStyle="#115fa6" />
</ext:NumericAxis>
<ext:NumericAxis
Title="Data (green)"
Fields="Data2"
Position="Right"
Maximum="100">
<TitleConfig FillStyle="#ff0000" />
<Label FillStyle="#ff0000" />
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries
Titles="Green Line"
XField="Date"
YField="Data1"
Smooth="3">
<HighlightConfig>
<ext:CircleSprite Radius="7" />
</HighlightConfig>
<Marker>
<ext:CircleSprite Radius="4" LineWidth="0" />
</Marker>
</ext:LineSeries>
<ext:LineSeries
Titles="Red Line"
XField="Date"
YField="Data2"
Smooth="3"
Colors="#ff0000"
>
</ext:LineSeries>
</Series>
<Plugins>
<ext:VerticalMarker runat="server">
<XLabelRenderer Handler="return Ext.util.Format.date(value, 'h:m');" />
</ext:VerticalMarker>
</Plugins>
<LegendConfig runat="server" Dock="Bottom" />
</ext:CartesianChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
