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

HTMLChart Label display NaN (not a number)

2 Answers 174 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.