Problem Databinding RadChart to Database

Thread is closed for posting
4 posts, 0 answers
  1. Tony
    Tony avatar
    2 posts
    Member since:
    Oct 2014

    Posted 01 Oct 2014 Link to this post

    I'm new to the radchart databinding process and after spending an excessive amount of time trying to figure out why I'm not showing any return when I bind to the database I thought I'd ask the sea of experts. I'm sure this has been discussed but when I searched on databinding I only got three posts so please excuse if I am repeating something previously shown.

    Attached is a screen shot of what I see currently. The XAxis labels (2008 2009 2010...) are pulled from the database and are displaying as I expected. What isn't showing are the values reflected in the rest of the table. This is pretty straightforward and I'm positive it is something exceptionally simple I'm overlooking but can anyone shed some light on what that might be? I've gotten lost in the mixed examples that came with this add-on so I'm not sure where I'm crossing signals.

    Below is the code for my chart.aspx page and it's code behind. The binding taking place in the code behind file is simply binding to a data object that I've created but isn't really relevant to this issue since all it does is open,get, close the database.

    Thanks in advance.

    Tony


    Chart.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="chart.aspx.cs" Inherits="myworkcalpassplus.chart" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true"  Visible="false"/>
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

         <div style="width: 800px; height: 500px;">
              <telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1" >
                   <PlotArea>
                        
                             <YAxis MaxValue="100" MinValue="0" Step="10" >
                                  <TitleAppearance Text="Units"></TitleAppearance>
                             </YAxis>
                             <XAxis DataLabelsField="AcademicYear"></XAxis>
                             <Series>
                                  <telerik:ColumnSeries Name="Average" DataFieldY="Average" >
                                       <TooltipsAppearance Color="White" BackgroundColor="Orange" DataFormatString="P"/>
                                      
                                  </telerik:ColumnSeries>
                                  <telerik:ColumnSeries Name="Top 10 Region" DataFieldY="Top10Region">
                                       <TooltipsAppearance Color="White" BackgroundColor="Orange" DataFormatString="P"/>
                                  </telerik:ColumnSeries>
                                  <telerik:ColumnSeries Name="Statewide" DataFieldY="Statewide">
                                       <TooltipsAppearance Color="White" BackgroundColor="Orange" DataFormatString="P"/>
                                  </telerik:ColumnSeries>
                             </Series>
                   </PlotArea>
                   <Legend>
                        <Appearance Visible="false">
                        </Appearance>
                   </Legend>
                   <ChartTitle Text="STEM Dashboard">
                   </ChartTitle>
              </telerik:RadHtmlChart>
         </div>
        </form>
    </body>
    </html>


    Codebehind: 

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using DataAccess;

    namespace myworkcalpassplus
    {
        public partial class chart : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    Data chartData = new Data();
                    RadHtmlChart1.DataSource = chartData.GetChartData();
                    RadHtmlChart1.DataBind();
                }
            }
        }
    }


    Mind you I was following along with several examples and that's what I ended up with expecting just to see a simple chart display.

    Thanks again!










  2. Tony
    Tony avatar
    2 posts
    Member since:
    Oct 2014

    Posted 01 Oct 2014 Link to this post

    Here is the second screen grab showing my chart is it displays right now. I guess it didn't attach to the original post.

    Apologies.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tony
    Tony avatar
    24 posts
    Member since:
    Sep 2014

    Posted 02 Oct 2014 Link to this post

    I just realized I posted the RadChart in the title in error. It should be RadHtmlChart, not RadChart.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 06 Oct 2014 Link to this post

    Hi Tony,

    From the provided snap shot it seems that passed values have "%" sign which mean they are of string type. Generally values for the y-axis accept decimal values and not string. For example:
    ASPX:
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" Visible="false" />
        <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     
        <div style="width: 800px; height: 500px;">
            <telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1">
                <PlotArea>
     
                    <YAxis MaxValue="100" MinValue="0" Step="10">
                        <TitleAppearance Text="Units"></TitleAppearance>
                    </YAxis>
                    <XAxis DataLabelsField="AcademicYear"></XAxis>
                    <Series>
                        <telerik:ColumnSeries Name="Average" DataFieldY="Average">
                            <TooltipsAppearance Color="White" BackgroundColor="Orange" DataFormatString="P" />
     
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries Name="Top 10 Region" DataFieldY="Top10Region">
                            <TooltipsAppearance Color="White" BackgroundColor="Orange" DataFormatString="P" />
                        </telerik:ColumnSeries>
                        <telerik:ColumnSeries Name="Statewide" DataFieldY="Statewide">
                            <TooltipsAppearance Color="White" BackgroundColor="Orange" DataFormatString="P" />
                        </telerik:ColumnSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false">
                    </Appearance>
                </Legend>
                <ChartTitle Text="STEM Dashboard">
                </ChartTitle>
            </telerik:RadHtmlChart>
        </div>
    </form>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable chartData = GetData();
            RadHtmlChart1.DataSource = chartData;
            RadHtmlChart1.DataBind();
        }
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("AcademicYear", typeof(string));
        dt.Columns.Add("Average", typeof(decimal));
        dt.Columns.Add("Top10Region", typeof(decimal));
        dt.Columns.Add("Statewide", typeof(decimal));
     
        dt.Rows.Add(1, "2008-2009", 45.6, 16.4, 66.6);
        dt.Rows.Add(2, "2009-2010", 49, null, 73.6);
        dt.Rows.Add(3, "2010-2011", 49.6, 27.3, 81.8);
     
        return dt;
    }



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top