This is a migrated thread and some comments may be shown as answers.

HTMLChart Label display NaN (not a number)

2 Answers 109 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Charles asked on 25 Mar 2016, 11:35 PM

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 Answers, 1 is accepted

answered on 30 Mar 2016, 01:08 PM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

HTMLChart Label display NaN (not a number)

2 Answers, 1 is accepted