HTMLChart Label display NaN (not a number)

3 posts, 0 answers
  1. Charles
    Charles avatar
    3 posts
    Member since:
    Sep 2013

    Posted 25 Mar Link to this post

    I have a chart that is getting data from a SQL database in codebehind. Everything displays correctly and the series have the correct number on hover.

    It is a stacked bar with the Show totals work a round found on this site.

    http://www.telerik.com/support/kb/aspnet-ajax/chart-%28html5%29/details/displaying-grand-total-in-stacked-series-labels-and-pie-series-legend

    I know the data coming from SQL is a number because I'm casting it to decimal.

    The gTotal shows: "TL bbl: NaN"  

    Any Ideas?

    code behind:

            Dim daFMChart As New SqlDataAdapter(SQLFM, Conn)
            daFMChart.Fill(DTFMChart)

            Me.ColumnChart.DataSource = DTFMChart
            Me.ColumnChart.DataBind()

     

    The SQL data is this:

    DateTime     TotalRed   TotalWhite       gTotal
    2016-03-25    20000        3             0.0001
    2016-03-24    30000        2601          0.0001
    2016-03-23    50000        45626         0.0001
    2016-03-22    10000        55568         0.0001
    2016-03-21    30000        54098         0.0001
    2016-03-20    10000        51351         0.0001
    2016-03-19    20000        21973         0.0001

    <telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true" Skin="Silk" Visible="false" Style="width: 100%; height: 100%;">
     
        <ChartTitle Text="Daily Volume Total Per Meter">
            <Appearance Align="Right" Position="Top">
                <TextStyle Color="#999999" />
            </Appearance>
        </ChartTitle>
     
        <Legend>
            <Appearance Position="Right" Visible="true">
                <TextStyle Color="#999999" />
            </Appearance>
        </Legend>
     
        <PlotArea>
            <Series>
     
                <telerik:ColumnSeries Name="FM Red" DataFieldY="TotalRed" Stacked="true">
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                    <Appearance>
                        <FillStyle BackgroundColor="#ff1a1a"></FillStyle>
     
                    </Appearance>
                </telerik:ColumnSeries>
     
                <telerik:ColumnSeries Name="FM White" DataFieldY="TotalWhite">
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                    <Appearance>
                        <FillStyle BackgroundColor="#bfbfbf"></FillStyle>
                    </Appearance>
                </telerik:ColumnSeries>
     
                <telerik:ColumnSeries DataFieldY="gTotal" Stacked="true">
                    <Appearance FillStyle-BackgroundColor="#DDD9C3"></Appearance>
                    <LabelsAppearance Position="OutsideEnd">
                        <TextStyle Color="#999999" />
                        <TextStyle Margin="0" />
                        <ClientTemplate>
                                TL bbls: #=dataItem.TotalRed + dataItem.TotalWhite#
                        </ClientTemplate>
                    </LabelsAppearance>
     
                    <TooltipsAppearance Visible="false">
                    </TooltipsAppearance>
                </telerik:ColumnSeries>
     
            </Series>
            <XAxis DataLabelsField="DateTime"></XAxis>
            <XAxis>
                <MajorGridLines Visible="false" />
                <MinorGridLines Visible="false" />
                <LabelsAppearance Step="1">
                    <TextStyle Color="#999999" />
                </LabelsAppearance>
            </XAxis>
     
            <YAxis>
                <MajorGridLines Visible="true" Color="#555555" />
                <MinorGridLines Visible="false" />
                <LabelsAppearance Step="1">
                    <TextStyle Color="#999999" />
                </LabelsAppearance>
            </YAxis>
        </PlotArea>
     
        <ChartTitle Text=""></ChartTitle>
    </telerik:RadHtmlChart>

     

  2. Charles
    Charles avatar
    3 posts
    Member since:
    Sep 2013

    Posted 25 Mar in reply to Charles Link to this post

    Guess what..... Its a Bug.

    Does not work with a Date column for the X Axis.

    What a pain in the balls that was to figure out.

    Had to use 3|24 as a string.. Could not use 3/24

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 30 Mar Link to this post

    Hi Charles,

    Can you ensure you have properly defined the type of the data source fields? Binding the following data to the chart renders the chart like that on my side - http://screencast.com/t/uBumEokfuu

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        ColumnChart.DataSource = GetData();
        ColumnChart.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("TotalWhite", typeof(decimal));
        dt.Columns.Add("TotalRed", typeof(decimal));
        dt.Columns.Add("gTotal", typeof(decimal));
        dt.Columns.Add("DateTime", typeof(DateTime));
     
        dt.Rows.Add(20000, 3, 0.0001, new DateTime(2016, 03, 25));
        dt.Rows.Add(30000, 2601, 0.0001, new DateTime(2016, 03, 24));
        return dt;
    }


    Regards,
    Danail Vasilev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top