Apr 23, 2013, 2:23 PM
[OPEN] [#216] Filtering chart store
Hello,
Since there are known problems regarding zooming a chart, I am locally filtering chart store (for a time range) to get the desired view. After filtering the chart store, if a series has no items (points), earlier markers and line stays on the chart where they should not appear. I tried .redraw(), .refresh() etc. with no change.
Please investigate the code below. When you click the "Test" button, the series starting @Today+2 and ending @Today+3 should go away since the store is filtered for (Date>=Today) and (Date<=Today+1). In fact store is properly filtered and the points which should disappear are no longer in store's data items collection after filtering. However chart is not refreshed.
Thanks.
Since there are known problems regarding zooming a chart, I am locally filtering chart store (for a time range) to get the desired view. After filtering the chart store, if a series has no items (points), earlier markers and line stays on the chart where they should not appear. I tried .redraw(), .refresh() etc. with no change.
Please investigate the code below. When you click the "Test" button, the series starting @Today+2 and ending @Today+3 should go away since the store is filtered for (Date>=Today) and (Date<=Today+1). In fact store is properly filtered and the points which should disappear are no longer in store's data items collection after filtering. However chart is not refreshed.
Thanks.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData();
this.Store1.DataBind();
}
}
private List<object> TestData()
{
List<object> data = new List<object>
{
new {
ID = 0,
Date = DateTime.Today,
Data1 = 1,
Data2=""
},
new {
ID = 1,
Date = DateTime.Today.AddDays(1),
Data1 = 1,
Data2 = ""
},
new {
ID = 2,
Date = DateTime.Today.AddDays(2),
Data1 = "",
Data2 = 2
},
new {
ID = 3,
Date = DateTime.Today.AddDays(3),
Data1 = "",
Data2 = 2
}
};
return data;
}
</script>
<script type="text/javascript">
function myFilterFunc() {
var store = App.Store1;
var chart = App.Chart1;
var today = new Date();
today.setHours(0, 0, 0, 0);
todayTime = today.getTime();
var chartFromDate = new Date(todayTime);
var chartToDate = new Date(todayTime + 24 * 60 * 60 * 1000);
store.clearFilter();
var filterFn = function (item) {
return (item.data.Date >= chartFromDate && item.data.Date <= chartToDate);
};
store.filterBy(filterFn);
if (chart.series.items[1].items.length == 0) {
alert("Test series has no items and should not appear on the chart.");
}
//tried those:
chart.redraw();
chart.refresh();
chart.forceRefresh();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Filtering Chart Store</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Button ID="Button1" runat="server" Text="Test">
<Listeners>
<Click Handler="myFilterFunc()"></Click>
</Listeners>
</ext:Button>
<ext:Panel ID="Panel1" runat="server" Width="800" Height="500" Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false" Flex="1">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Data1" Type="Int">
<Convert Handler="if(value==''){value=undefined;} return value;"></Convert>
</ext:ModelField>
<ext:ModelField Name="Data2" Type="Int">
<Convert Handler="if(value==''){value=undefined;} return value;"></Convert>
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:TimeAxis Fields="Date" Position="Bottom" Title="Time" DateFormat="Y, MMM dd">
</ext:TimeAxis>
<ext:NumericAxis Title="Value" Fields="Data1,Data2" Position="Left" MajorTickSteps="1" MinorTickSteps="0">
<Label>
<Renderer Handler="return value" />
</Label>
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Date" YField="Data1" ShowInLegend="false">
<Tips ID="MyTip" runat="server" Width="250">
<Renderer Handler="this.setTitle(storeItem.data.Date.toString());"></Renderer>
</Tips>
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Date" YField="Data2" ShowInLegend="false">
<Tips ID="Tips1" runat="server" Width="250">
<Renderer Handler="this.setTitle(storeItem.data.Date.toString());"></Renderer>
</Tips>
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Apr 24, 2013 at 4:27 PM.
Reason: [OPEN] [#216]
