Asp.Net Chart ve Grid View Data kontrol

Asp.Net 4.0 Chart kontolüne bu blogtada devam ediyoruz.Bu kez Chart kontrolümüzün birlikte çalışabileceği Grid View Data kontrolümüzüde kolayca ekleyip hem veritabanımızdaki veriyi güncelleyeceğiz(Uptade) hemde bu güncellemenin Grafiğini izleyebileceğiz.


Visual Studio 2010 içinde yerleşik Chart kontrolü ile ilgili ilk bilgiyi bir önceki Asp.Net Grafik Raporlar Oluşturmak isimli blogumda yazmıştım.Bu yazıya devam etmeden ilk yazdıklarıma göz atmanız iyi bir fikir olabilir.

Gelelim bu 2 data kontrolün bir arada nasıl çalışacağına...
Öncelikle Grafik raporları genelde bir tablo eşliğinde sunmak oldukça verimli bir özellik.Bu türde birkaç raporun oluşumundan sonra güncellenmesi ise dahada verimli, zira grafik raporların bir sabit sutun değerine sahip (X Value gibi) tek bir sutun bilgisine sahip olması şarttır.

Yani Arabalar X Value Member değerine sürekli ve yeni kayıtların eklenmesi bir süre sonra Grafiğinizin anlaşılmaz hale gelmesi demek olur.İşte bu yüzden Chart kontrolündede dikkat etmemiz gereken X Value değer sabitine Y Value Members verileri güncelleyebilmekdir.Bu doğrultuda Tablo ve güncelleme işimizi Grid View kontorolüyle sağlayıp Chart ilede görüntümüzü almaya çalışacağız.

1.Projeye Chart kontrolünü ekleyelim

<asp:Chart ID="CarModels" runat="server" DataSourceID="CarModelGraphSource"
                    Height="300px" Width="350px">
                    <Series>
                        <asp:Series Name="Series1" ChartType="Doughnut" XValueMember="CarName"
                            YValueMembers="Hits" YValuesPerPoint="2">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="CarModelArea">
                        </asp:ChartArea>
                    </ChartAreas>
 </asp:Chart>
(Chart eklemek için yapılacaklar bir önceki blogta yazılmış anlatımla aynıdır.)

2.Chart Kontrolünün Veritabanı Bağlantısı
<asp:SqlDataSource ID="CarModelGraphSource" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ChartConnectionString %>" 
                    ProviderName="<%$ ConnectionStrings:ChartConnectionString.ProviderName %>" 
                    SelectCommand="SELECT * FROM [CarModel_Hits]"></asp:SqlDataSource>
(Veritabanı bağlantısı kod içeriği ve anlatımı bir önceki blogta yazılmış anlatım ile benzerdir)


3.GridView Kontrolünü dahil etmek

<asp:GridView ID="CarModelGridView" runat="server" AutoGenerateColumns="False" 
                     DataKeyNames="CarId" DataSourceID=CarModelHitsSource">
                    <Columns>
                        <asp:CommandField ShowEditButton="True" />
                        <asp:BoundField DataField="CarName" HeaderText="Car Models" 
                            SortExpression="Name" />
                        <asp:BoundField DataField="Hits" HeaderText="% " SortExpression="Hits" />
                    </Columns>
 </asp:GridView>

4.Grid View Veritabanı Bağlantısı

<asp:SqlDataSource ID="CarModelHitsSource" runat="server" 
                     ConnectionString="<%$ ConnectionStrings:ChartConnectionString %>" 
                     DeleteCommand="DELETE FROM [CarModel_Hits] WHERE [CarId] = ?" 
                     InsertCommand="INSERT INTO [CarModel_Hits] ([CarId], [CarName], [Hits]) VALUES (?, ?, ?)" 
                     ProviderName="<%$ ConnectionStrings:ChartConnectionString.ProviderName %>" 
                     SelectCommand="SELECT * FROM [CarModel_Hits]" 
                     UpdateCommand="UPDATE [CarModel_Hits] SET [CarName] = ?, [Hits] = ? WHERE [CarId] = ?">
                     <DeleteParameters>
                         <asp:Parameter Name="CarId" Type="Int32" />
                     </DeleteParameters>
                     <InsertParameters>
                         <asp:Parameter Name="CarId" Type="Int32" />
                         <asp:Parameter Name="CarName" Type="String" />
                         <asp:Parameter Name="Hits" Type="Int32" />
                     </InsertParameters>
                     <UpdateParameters>
                         <asp:Parameter Name="CarName" Type="String" />
                         <asp:Parameter Name="Hits" Type="Int32" />
                         <asp:Parameter Name="CarId" Type="Int32" />
                     </UpdateParameters>
</asp:SqlDataSource>


Bakalım bu kodlarla ne tür bir şey elde ettik...

Şimdilik bu kadar, Chart kontrolüne ilerleyen bloglardada devam edeceğiz.

      Bu Yazının Sponsorları