Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

User Defined Graphs - looking for code sample

3 Answers 95 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Cindie Tenneson
Top achievements
Rank 1
Cindie Tenneson asked on 04 Jun 2009, 09:59 PM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Ves
Telerik team
answered on 08 Jun 2009, 03:12 PM
gridandchart.zip
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.
0
Cindie Tenneson
Top achievements
Rank 1
answered on 11 Jun 2009, 02:26 PM
My solution is posted below.  Figured out from samples on Telerik site.
0
Cindie Tenneson
Top achievements
Rank 1
answered on 11 Jun 2009, 10:46 PM

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

Tags
Chart (Obsolete)
Asked by
Cindie Tenneson
Top achievements
Rank 1
Answers by
Ves
Telerik team
Cindie Tenneson
Top achievements
Rank 1
Share this question
or