This not not exactly what I asked in the first message.
I have different cities AND different periods (Data1 and Data2 for example for 2 periods).
This is an example :
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
public class ChartData
{
public string Name
{
get;
set;
}
public double? Data1
{
get;
set;
}
public double? Data2
{
get;
set;
}
public static List<ChartData> GenerateData()
{
return new List<ChartData>
{
new ChartData {
Name = "City 1" ,
Data1 = 50,
Data2 = 0
},
new ChartData {
Name = "City 2" ,
Data1 = 200,
Data2 = 50
},
new ChartData {
Name = "City 3" ,
Data1 = 300,
Data2 = 150
},
new ChartData {
Name = "City 4" ,
Data1 = null,
Data2 = 100
}
};
}
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
<Axis Stroke="#084594" />
<AxisLabelLeft Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
<AxisLabelBottom Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
<AxisTitleLeft Font="bold 18px Arial" />
<AxisTitleBottom Font="bold 18px Arial" />
</ext:ChartTheme>
<ext:Panel ID="Panel1"
runat="server"
Title="Bar Chart"
Width="800"
Height="600"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
Theme="CustomBlue"
Animate="true">
<Store>
<ext:Store ID="Store1"
runat="server"
Data="<%# ChartData.GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="this.filterBy(function(record) { return record.get('Data1') != null || record.get('Data2') != null;; });" />
</Listeners>
</ext:Store>
</Store>
<Background>
<Gradient GradientID="backgroundGradient" Angle="45">
<Stops>
<ext:GradientStop Offset="0" Color="#ffffff" />
<ext:GradientStop Offset="100" Color="#eaf1f8" />
</Stops>
</Gradient>
</Background>
<Axes>
<ext:NumericAxis
Fields="Data1,Data2"
Position="Bottom"
Grid="true"
Title="Y"
Minimum="0">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
</ext:NumericAxis>
<ext:CategoryAxis
Fields="Name"
Position="Left"
Title="X"
/>
</Axes>
<Series>
<ext:BarSeries
Axis="Bottom"
Highlight="true"
XField="Name"
YField="Data1,Data2">
</ext:BarSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>
And It gave me this :
you can see there is no difference betwenn the Data2 in City 1 and the Data1 in City 4, it displays a zero bar even if for City1 it is zero and for City 4 a null value.
How can I hide the bar whith null value because if I want to read the store, both value are zero.
