User Defined Graphs - looking for code sample

Thread is closed for posting
4 posts, 1 answers
  1. Cindie Tenneson
    Cindie Tenneson avatar
    14 posts
    Member since:
    Dec 2008

    Posted 04 Jun 2009 Link to this post

    I would like to provide a gridview for the user to enter graph data and then I would like the data to show up in a RADChart.  Anyone have a sample similar to this?

    Any help would be appreciated
  2. Answer
    Ves
    Admin
    Ves avatar
    2927 posts

    Posted 08 Jun 2009 Link to this post

    Hello Cindie Tenneson,

    Please, find attached a small example showing this.

    Best regards,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Cindie Tenneson
    Cindie Tenneson avatar
    14 posts
    Member since:
    Dec 2008

    Posted 11 Jun 2009 Link to this post

    My solution is posted below.  Figured out from samples on Telerik site.
  4. Cindie Tenneson
    Cindie Tenneson avatar
    14 posts
    Member since:
    Dec 2008

    Posted 11 Jun 2009 Link to this post

    My solution:


    <%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="~/MasterPage.master"
        CodeFile="frmUserDefinedGraphs.aspx.vb" Inherits="frmProvededGraphs" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="cc1" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        <asp:TextBox ID="txtUserID" runat="server" Visible="False" Font-Bold="True"></asp:TextBox><asp:Label
            ID="lblLogin" runat="server" Text="Label" Height="22px" Font-Size="Small" Font-Italic="True"></asp:Label>
        &nbsp; &nbsp;
        <asp:Label ID="lblCSFY" runat="server" Text="State Fiscal Year" Height="22px" Font-Size="Small"
            Font-Bold="True" BackColor="Transparent"></asp:Label><asp:Label ID="lblCstateFy"
                runat="server" Text="Label" Height="22px" Font-Size="Small" Font-Italic="True"></asp:Label>
        <br />
        <telerik:RadTabStrip ID="rtsTabStrip" runat="server" SelectedIndex="2" Skin="Web20">
            <Tabs>
                <telerik:RadTab Text="Provided Graphs" runat="server" Width="225px">
                </telerik:RadTab>
                <telerik:RadTab Text="User Defined Graphs" runat="server" Width="225px" Selected="True">
                </telerik:RadTab>
                <telerik:RadTab Text="Upload Graphs" runat="server" Width="225px">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        This section is used to graph data that you may have.&nbsp; This data is not saved
        in the database.<br />
        If you would like to save a graph that you create on this page, right click and
        choose save.<br />
        You may then use the upload graphs tab to store the graph in the database.&nbsp;
        <br />
        <br />
        To remove a series just edit it and delete all data in the year columns.<br />
        <br />
        <asp:Label ID="lblGraphTitle" runat="server" Text="Enter Graph Title:  "></asp:Label>
        <asp:TextBox ID="txtGraphTitle" runat="server" Width="293px"></asp:TextBox><br />
        <br />
        &nbsp;<asp:ValidationSummary ID="valSummary" runat="server" DisplayMode="BulletList"
            Font-Bold="True" HeaderText="Please correct the following errors:" ShowSummary="True" />
        <br />
        <asp:GridView AutoGenerateColumns="false" ID="grdUserDefined" runat="server" OnRowCancelingEdit="grdUserDefined_RowCancelingEdit"
            OnRowEditing="grdUserDefined_RowEditing" OnRowUpdating="grdUserDefined_RowUpdating"
            ShowHeader="true" CellPadding="4" EmptyDataText="No graph data entered">
            <FooterStyle CssClass="headerFooterStyle" />
            <RowStyle CssClass="itemStyle" />
            <SelectedRowStyle CssClass="selectedStyle" />
            <EditRowStyle CssClass="editStyle" />
            <PagerStyle CssClass="headerFooterStyle" />
            <HeaderStyle CssClass="headerFooterStyle" />
            <AlternatingRowStyle CssClass="altItemStyle" />
            <Columns>
                <asp:CommandField ButtonType="Button" ShowEditButton="True">
                    <ControlStyle Font-Bold="True" CssClass="buttonStyle" />
                    <ItemStyle Wrap="False" />
                </asp:CommandField>
                <asp:BoundField HeaderText="ID" DataField="ID" ReadOnly="true" />
                <asp:TemplateField HeaderText="Series">
                    <ItemTemplate>
                        <asp:Label ID="lblSeries" runat="server" Width="100px" Text='<%#Eval("Series") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtSeries" runat="server" Width="100px" Text='<%#Bind("Series") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblYear1" runat="server" Width="40px" Text='<%#Eval("Year1") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtYear1" runat="server" Width="40px" Text='<%#Bind("Year1") %>'></asp:TextBox>
                        <asp:RangeValidator ID="valYear11" ControlToValidate="txtYear1" Type="Integer" MinimumValue="0"
                            MaximumValue="2000" runat="server" ErrorMessage="Graph values must be numeric">*
                        </asp:RangeValidator>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblYear2" runat="server" Width="40px" Text='<%#Eval("Year2") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtYear2" runat="server" Width="40px" Text='<%#Bind("Year2") %>'></asp:TextBox>
                        <asp:RangeValidator ID="valYear12" ControlToValidate="txtYear2" Type="Integer" MinimumValue="0"
                            MaximumValue="2000" runat="server" ErrorMessage="Graph values must be numeric">*
                        </asp:RangeValidator>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblYear3" runat="server" Width="40px" Text='<%#Eval("Year3") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtYear3" runat="server" Width="40px" Text='<%#Bind("Year3") %>'></asp:TextBox>
                        <asp:RangeValidator ID="valYear13" ControlToValidate="txtYear3" Type="Integer" MinimumValue="0"
                            MaximumValue="2000" runat="server" ErrorMessage="Graph values must be numeric">*
                        </asp:RangeValidator>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblYear4" runat="server" Width="40px" Text='<%#Eval("Year4") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtYear4" runat="server" Width="40px" Text='<%#Bind("Year4") %>'></asp:TextBox>
                        <asp:RangeValidator ID="valYear14" ControlToValidate="txtYear4" Type="Integer" MinimumValue="0"
                            MaximumValue="2000" runat="server" ErrorMessage="Graph values must be numeric">*
                        </asp:RangeValidator>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblYear5" runat="server" Width="40px" Text='<%#Eval("Year5") %>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtYear5" runat="server" Width="40px" Text='<%#Bind("Year5") %>'></asp:TextBox>
                        <asp:RangeValidator ID="valYear15" ControlToValidate="txtYear5" Type="Integer" MinimumValue="0"
                            MaximumValue="2000" runat="server" ErrorMessage="Graph values must be numeric">*
                        </asp:RangeValidator>
                    </EditItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <br />
        <telerik:RadChart ID="trcRadChart" runat="server" Width="600px" Height="600px">
            <Series>
                <cc1:ChartSeries Name="Series 1">
                </cc1:ChartSeries>
                <cc1:ChartSeries Name="Series 2">
                </cc1:ChartSeries>
            </Series>
        </telerik:RadChart>
        <br />
        <br />
        <asp:Button ID="btnToggleLegend" runat="server" Text="Toggle Graph Legend On/Off" cssclass="buttonStyle"/>
        &nbsp;
    </asp:Content>

    Option Strict On
    Imports System.Configuration.ConfigurationManager
    Imports System
    Imports System.Data
    Imports System.Collections
    Imports System.Web
    Imports System.Web.UI.WebControls
    Imports System.Web.UI.WebControls.WebParts
    Imports System.Web.UI.HtmlControls
    Imports Telerik.Charting
    Partial Class frmProvededGraphs
        Inherits System.Web.UI.Page
        Dim dtFinalGrid As New DataTable
       

        Private Sub BindGrid()
            grdUserDefined.DataSource = GetDataSource()
            grdUserDefined.DataBind()

            'Set grid header columns for the 5 year period
            Dim intStateFY As Integer = CInt(Session("StateFY").ToString)
            grdUserDefined.HeaderRow.Cells(3).Text = CStr(intStateFY - 4)
            grdUserDefined.HeaderRow.Cells(4).Text = CStr(intStateFY - 3)
            grdUserDefined.HeaderRow.Cells(5).Text = CStr(intStateFY - 2)
            grdUserDefined.HeaderRow.Cells(6).Text = CStr(intStateFY - 1)
            grdUserDefined.HeaderRow.Cells(7).Text = CStr(intStateFY)

        End Sub
      
        Protected Function GetDataSource() As DataTable

            Const strkey As String = "UserDataSource"
            Dim dtInitialGrid As DataTable = TryCast(Session(strkey), DataTable)

            'only used first time to load gridview and starting datatable
            If dtInitialGrid Is Nothing Then
                dtInitialGrid = New DataTable()

                'Define the table structure for the intial
                Dim Id As DataColumn = New DataColumn("Id")
                Id.DataType = System.Type.GetType("System.Int32")
                dtInitialGrid.Columns.Add(Id)

                Dim Series As DataColumn = New DataColumn("Series")
                Series.DataType = System.Type.GetType("System.String")
                dtInitialGrid.Columns.Add(Series)

                Dim Year1 As DataColumn = New DataColumn("Year1")
                Year1.DataType = System.Type.GetType("System.String")
                dtInitialGrid.Columns.Add(Year1)

                Dim Year2 As DataColumn = New DataColumn("Year2")
                Year2.DataType = System.Type.GetType("System.String")
                dtInitialGrid.Columns.Add(Year2)

                Dim Year3 As DataColumn = New DataColumn("Year3")
                Year3.DataType = System.Type.GetType("System.String")
                dtInitialGrid.Columns.Add(Year3)

                Dim Year4 As DataColumn = New DataColumn("Year4")
                Year4.DataType = System.Type.GetType("System.String")
                dtInitialGrid.Columns.Add(Year4)

                Dim Year5 As DataColumn = New DataColumn("Year5")
                Year5.DataType = System.Type.GetType("System.String")
                dtInitialGrid.Columns.Add(Year5)

                'define the rows in the table - we allow them up to 5 datasets
                'any more looks sloppy
                dtInitialGrid.Rows.Add(1, "series name")
                dtInitialGrid.Rows.Add(2, "series name")
                dtInitialGrid.Rows.Add(3, "series name")
                dtInitialGrid.Rows.Add(4, "series name")
                dtInitialGrid.Rows.Add(5, "series name")
                Session(strkey) = dtInitialGrid

            End If

            Return dtInitialGrid

        End Function
        Protected Sub grdUserDefined_RowEditing(ByVal sender As Object, ByVal e As GridViewEditEventArgs)
            grdUserDefined.EditIndex = e.NewEditIndex
            BindGrid()
        End Sub
        Protected Sub grdUserDefined_RowCancelingEdit(ByVal sender As Object, ByVal e As GridViewCancelEditEventArgs)
            grdUserDefined.EditIndex = -1
            BindGrid()
        End Sub

        Protected Sub grdUserDefined_RowUpdating(ByVal sender As Object, ByVal e As GridViewUpdateEventArgs)

            If Page.IsValid Then
                'get the values currently on the form
                Dim intId As Integer = Integer.Parse(grdUserDefined.Rows(e.RowIndex).Cells(1).Text)
                Dim txtSeries As TextBox = TryCast(grdUserDefined.Rows(e.RowIndex).Cells(2).FindControl("txtSeries"), TextBox)
                Dim txtYear1 As TextBox = TryCast(grdUserDefined.Rows(e.RowIndex).Cells(3).FindControl("txtYear1"), TextBox)
                Dim txtYear2 As TextBox = TryCast(grdUserDefined.Rows(e.RowIndex).Cells(4).FindControl("txtYear2"), TextBox)
                Dim txtYear3 As TextBox = TryCast(grdUserDefined.Rows(e.RowIndex).Cells(5).FindControl("txtYear3"), TextBox)
                Dim txtYear4 As TextBox = TryCast(grdUserDefined.Rows(e.RowIndex).Cells(6).FindControl("txtYear4"), TextBox)
                Dim txtYear5 As TextBox = TryCast(grdUserDefined.Rows(e.RowIndex).Cells(7).FindControl("txtYear5"), TextBox)

                'move the form values into variables
                Dim strNewSeries As String = txtSeries.Text
                Dim strNewYear1 As String = txtYear1.Text
                Dim strNewYear2 As String = txtYear2.Text
                Dim strNewYear3 As String = txtYear3.Text
                Dim strNewYear4 As String = txtYear4.Text
                Dim strNewYear5 As String = txtYear5.Text

                'some general cleanup
                If strNewYear1 = "" AndAlso strNewYear2 = "" AndAlso strNewYear3 = "" AndAlso strNewYear4 = "" AndAlso strNewYear5 = "" Then
                    'don't waste time on nothing just clean up the row
                    strNewSeries = "series name"
                End If

                'ensure data is clean don't want any values that can't be numberic for the graph
                'validation does not check if they leave blank so must handle
                If strNewYear1 = "" Then
                    strNewYear1 = "0"
                End If
                If strNewYear2 = "" Then
                    strNewYear2 = "0"
                End If
                If strNewYear3 = "" Then
                    strNewYear3 = "0"
                End If
                If strNewYear4 = "" Then
                    strNewYear4 = "0"
                End If
                If strNewYear5 = "" Then
                    strNewYear5 = "0"
                End If

                'this is how to remove a series don't show zeros on the screen
                If strNewSeries = "series name" Then
                    strNewYear1 = String.Empty
                    strNewYear2 = String.Empty
                    strNewYear3 = String.Empty
                    strNewYear4 = String.Empty
                    strNewYear5 = String.Empty
                End If

                'set the actual table contents = initial table
                'This will only happen 1 time as once this is populated
                'dtFinalGrid is the only table that is updated with user data
                dtFinalGrid = GetDataSource()

                'actual insert
                Dim rows As DataRow() = dtFinalGrid.[Select]("ID = " & intId.ToString())
                rows(0)("Series") = strNewSeries
                rows(0)("Year1") = strNewYear1
                rows(0)("Year2") = strNewYear2
                rows(0)("Year3") = strNewYear3
                rows(0)("Year4") = strNewYear4
                rows(0)("Year5") = strNewYear5

                grdUserDefined.EditIndex = -1

                BindGrid()

                'load graph with datatable
                LoadGraph()

            End If
        End Sub
       
        Protected Sub LoadGraph()
            'clear the graph before process items
            trcRadChart.Series.Clear()

            Dim intOldSubCatId As Integer = -1
            Dim intNewSubCatId As Integer
            Dim currentSeries As ChartSeries = Nothing
            Dim intInnerLoopCount As Integer
            Dim dbrow As DataRow

            'this will loop through all 5 rows in the FinalGrid table
            For Each dbrow In dtFinalGrid.Rows
                intNewSubCatId = CInt(dbrow("Id"))

                If CStr(dbrow("Series")) = "series name" Then
                    'do not graph rows without data
                Else
                    currentSeries = trcRadChart.CreateSeries(CStr(dbrow("Series")), Drawing.Color.Empty, Drawing.Color.Empty, ChartSeriesType.Bar)
                    currentSeries.Appearance.Border.Color = Drawing.Color.Black
                    currentSeries.Appearance.ShowLabels = False
                    intOldSubCatId = intNewSubCatId

                    'these are the xvalues

                    trcRadChart.PlotArea.XAxis.Clear()
                    trcRadChart.PlotArea.XAxis.AutoScale = False
                    Dim intStateFY As Integer = CInt(Session("StateFY").ToString) - 4
                    For intInnerLoopCount = 1 To 5
                        trcRadChart.PlotArea.XAxis.AddItem(CStr(intStateFY))
                        intStateFY = intStateFY + 1
                    Next

                    'these are the yvalues
                    currentSeries.AddItem(CDbl(dbrow("Year1")))
                    currentSeries.AddItem(CDbl(dbrow("Year2")))
                    currentSeries.AddItem(CDbl(dbrow("Year3")))
                    currentSeries.AddItem(CDbl(dbrow("Year4")))
                    currentSeries.AddItem(CDbl(dbrow("Year5")))
                End If
                'loads the title if there
                trcRadChart.ChartTitle.TextBlock.Text = txtGraphTitle.Text

            Next
           
        End Sub
       
        Protected Sub txtGraphTitle_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txtGraphTitle.TextChanged
            'keep chart title up to date
            trcRadChart.ChartTitle.TextBlock.Text = txtGraphTitle.Text
        End Sub
        Protected Sub btnToggleLegend_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnToggleLegend.Click
            'Gives the user the option of seeing more graph space that is taken up by the legend
            trcRadChart.Legend.Visible = Not trcRadChart.Legend.Visible

        End Sub

Back to Top