Jul 10, 2013, 7:53 PM
[CLOSED] Refresh bar chart after grid panel's event
Hi Support team,
I have a grid panel and display a pie chart and bar chart based on the data from grid panel.
Any event occur related to grid panel I need refresh the graphs.
I can check that the pie chart was refreshed but bar chart.
Kevin
I have a grid panel and display a pie chart and bar chart based on the data from grid panel.
Any event occur related to grid panel I need refresh the graphs.
I can check that the pie chart was refreshed but bar chart.
Kevin
<script type="text/javascript">
var successRaitMethod = function () {
App.direct.dispayRaitSummary2();
};
</script>
<ext:GridPanel ID="GridPanelRait" runat="server" Height="370">
<Store>
<ext:Store ID="Store3" runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="RaitID" />
<ext:ModelField Name="ProcurementID" />
<ext:ModelField Name="EventName" />
<ext:ModelField Name="StartDate" Type="Date" />
<ext:ModelField Name="EndDate" Type="Date" />
<ext:ModelField Name="Note" />
<ext:ModelField Name="Mod_By" />
<ext:ModelField Name="Mod_dt" Type="Date" />
<ext:ModelField Name="Diff" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:SummaryColumn ID="SummaryColumn6" runat="server" Text="RaitID" DataIndex="RaitID"
Hidden="true">
<SummaryRenderer Handler="return ' ';" />
<Editor>
<ext:TextField ID="TextField4" runat="server" AllowBlank="false">
</ext:TextField>
</Editor>
</ext:SummaryColumn>
<ext:SummaryColumn ID="SummaryColumn1" runat="server" TdCls="task" Text="Event" Sortable="true"
DataIndex="EventName" Hideable="false" SummaryType="Count" Flex="1">
<SummaryRenderer Handler="return ((value === 0 || value > 1) ? '(' + value +' Events)' : '(1 Event)');" />
<Editor>
<ext:ComboBox ID="ComboBox2" runat="server" DisplayField="EventName" ValueField="EventTypeID"
Width="320" LabelWidth="130" TypeAhead="true" AllowBlank="false">
<Store>
<ext:Store ID="Store6" runat="server">
<Model>
<ext:Model ID="Model6" runat="server">
<Fields>
<ext:ModelField Name="EventTypeID" />
<ext:ModelField Name="EventName" />
<ext:ModelField Name="Description" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="Clear selected" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.clearValue();" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:SummaryColumn>
<ext:SummaryColumn ID="SummaryColumn2" runat="server" Text="Start Date" DataIndex="StartDate"
Width="80">
<SummaryRenderer Handler="return ' ';" />
<Renderer Format="Date" FormatArgs="'m-d-Y'" />
<Editor>
<ext:DateField ID="dfStart" runat="server" Format="m-d-Y" AllowBlank="false">
<%--<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="dfEnd" Mode="Value" />
</CustomConfig>
<Listeners>
<KeyUp Fn="onKeyUp" />
</Listeners>--%>
</ext:DateField>
</Editor>
</ext:SummaryColumn>
<ext:SummaryColumn ID="SummaryColumn3" runat="server" Text="End Date" DataIndex="EndDate"
Width="80">
<SummaryRenderer Handler="return ' ';" />
<Renderer Format="Date" FormatArgs="'m-d-Y'" />
<Editor>
<ext:DateField ID="dfEnd" runat="server" Format="m-d-Y">
<%--<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="dfStart" Mode="Value" />
</CustomConfig>
<Listeners>
<KeyUp Fn="onKeyUp" />
</Listeners>--%>
</ext:DateField>
</Editor>
</ext:SummaryColumn>
<ext:SummaryColumn ID="SummaryColumn4" runat="server" Width="90" Text="Waiting"
Sortable="true" DataIndex="Diff" SummaryType="Sum">
<Renderer Handler="return value +' days';" />
<%--<SummaryRenderer Handler="return value +' days';" />--%>
<SummaryRenderer Handler="return ' ';" />
</ext:SummaryColumn>
<ext:SummaryColumn ID="SummaryColumn5" runat="server" Text="Note" DataIndex="Note"
Flex="1">
<SummaryRenderer Handler="return ' ';" />
<Editor>
<ext:TextField ID="TextField1" runat="server">
</ext:TextField>
</Editor>
</ext:SummaryColumn>
</Columns>
</ColumnModel>
<Features>
<ext:Summary ID="Summary1" runat="server" />
</Features>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel3" runat="server" />
</SelectionModel>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToMoveEditor="1" AutoCancel="false"
SaveHandler="validateSave" />
</Plugins>
<Buttons>
<ext:Button runat="server" Icon="Add" ID="AddRait" Text="Add Event">
<Listeners>
<Click Handler="#{Window1}.show();Ext.fly('form1').mask();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnDelete" runat="server" Text="Delete Event" Icon="Delete">
<DirectEvents>
<Click OnEvent="SubmitSelection" Success="successRaitMethod">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{GridPanelRait}.getRowsValues({selectedOnly : true}))"
Mode="Raw" />
</ExtraParams>
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:GridPanel>
<ext:Chart Height="500" Weight="500" ID="Chart1" runat="server" Animate="true" Shadow="true"
InsetPadding="60" Theme="Base:gradients">
<LegendConfig Position="Bottom" />
<Store>
<ext:Store ID="Store7" runat="server" AutoDataBind="false">
<Model>
<ext:Model ID="Model7" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Series>
<ext:PieSeries AngleField="Data1" ShowInLegend="true" Donut="0" Highlight="true"
HighlightSegmentMargin="20">
<Label Field="Name" Display="Rotate" Contrast="true" Font="12px Arial">
<Renderer Fn="PieRenderer" />
</Label>
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="160" Height="50">
<Renderer Fn="tipRenderer" />
</Tips>
</ext:PieSeries>
</Series>
</ext:Chart>
<ext:Chart
Height="500"
Weight="500"
ID="Chart2"
runat="server"
Shadow="true"
StyleSpec="background:#fff"
Animate="true">
<Store>
<ext:Store ID="Store9"
runat="server"
AutoDataBind="false">
<Model>
<ext:Model ID="Model9" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Gradients>
<ext:Gradient GradientID="v-1" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
<ext:GradientStop Offset="100" Color="rgb(117, 14, 14)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-2" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
<ext:GradientStop Offset="100" Color="rgb(94, 114, 13)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-3" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
<ext:GradientStop Offset="100" Color="rgb(14, 117, 56)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-4" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
<ext:GradientStop Offset="100" Color="rgb(14, 56, 117)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-5" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
<ext:GradientStop Offset="100" Color="rgb(85, 10, 103)" />
</Stops>
</ext:Gradient>
</Gradients>
<Axes>
<ext:NumericAxis
Fields="Data1"
Grid="true"
Title="Number of Processing Days"
Minimum="0">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
</ext:NumericAxis>
<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Event Categories"
/>
</Axes>
<Series>
<ext:ColumnSeries
Axis="Left"
Highlight="true"
XField="Name"
YField="Data1">
<Tips ID="Tips2" runat="server" TrackMouse="true" Width="170" Height="28">
<Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1') + ' Days');" />
</Tips>
<Label
Display="InsideEnd"
Field="Data1"
Orientation="Horizontal"
Color="#333"
TextAnchor="middle" >
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Style Opacity="0.95" />
<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
</ext:ColumnSeries>
</Series>
</ext:Chart><Ext.Net.DirectMethod()> _
Public Sub dispayRaitSummary2()
dispayRaitSummary()
updateWaitingDays()
'Reload data store for graphs
ReloadChartData()
End Sub
Private Sub ReloadChartData()
loadChartData()
loadChart2Data()
End Sub
Private Sub loadChartData()
getDicSession()
Dim store As Ext.Net.Store = Me.Chart1.GetStore()
store.DataSource = raitRep.getGroupedRaitDays(EmptyToInteger(dicSessionVars("DaysInProcessAward")))
store.CommitChanges()
store.DataBind()
End Sub
Private Sub loadChart2Data()
Dim store As Ext.Net.Store = Chart2.GetStore()
Dim datastore As List(Of ChartRecord) = raitRep.getGroupedBarData()
If Not datastore.Count = 0 Then
store.DataSource = datastore
store.CommitChanges()
store.DataBind()
Chart2.Hidden = False
barChartLabel.Hidden = True
Else
Chart2.Hidden = True
barChartLabel.Hidden = False
End If
End Sub
Protected Sub OnClick_AddRaitSubmit(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
Dim startDate As String = dtStartDate.Value
Dim endDate As String
If dtEndDate.SelectedValue Is Nothing Then
endDate = ""
Else
endDate = dtEndDate.SelectedValue
End If
Dim raitNote As String = taRaitNote.Value
Dim raitType As String = ComboBox1.Value
raitRep.AddRaitItem(startDate, endDate, raitNote, raitType, GetFromSession("_strUserId"))
initAddRaitDates()
'Reload data store for graphs
ReloadChartData()
closeRaitWindow()
End Sub
<Ext.Net.DirectMethod()> _
Public Function ValidateSave(ByVal isPhantom As Boolean, ByVal values As Ext.Net.JsonObject) As Object
'If Not isPhantom Then
If isPhantom Then
Return New With { _
.valid = True _
}
End If
Dim RaitID As String = values.Item("RaitID")
Dim EventTypeID As String = values.Item("EventName")
If (Not IsNumeric(EventTypeID)) Then
EventTypeID = raitRep.getEventTypeID(EventTypeID)
End If
Dim StartDate As String = values.Item("StartDate")
Dim EndDate As String
If values.Item("EndDate") Is Nothing Then
EndDate = ""
Else
EndDate = values.Item("EndDate")
End If
Dim Note As String = values.Item("Note")
If EndDate = Nothing Then
raitRep.updateRaitRecord(RaitID, EventTypeID, StartDate, EndDate, Note)
Else
If Convert.ToDateTime(StartDate) > Convert.ToDateTime(EndDate) Then
Return New With { _
.valid = False, _
.msg = "Start Date must be earlier date than End Date." _
}
Else
'Update Record here
raitRep.updateRaitRecord(RaitID, EventTypeID, StartDate, EndDate, Note)
End If
End If
Return New With { _
.valid = True _
}
End Function
Last edited by Daniil; Jul 16, 2013 at 4:23 AM.
Reason: [CLOSED]
