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

Don't want to display a value of zero on a label, when the value is actually NULL.

5 Answers 1727 Views

Chart (HTML5)

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

5 Answers, 1 is accepted

answered on 26 Dec 2014, 08:46 AM

Hello,

I've tried to replicate the unwanted behavior on my side setting up a similar configuration to yours but not avail. Here is a video showing my test:
http://screencast.com/t/qA71BR9QwH
I'm attaching the code snippet I'm testing with for convenience:

<%@ Page Language="C#" AutoEventWireup="true"%>

<%@ Import Namespace="System.Data" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">

<PlotArea>

<Series>

<telerik:ColumnSeries Name="Products" DataFieldY="Price">

<TooltipsAppearance DataFormatString="${0}" />

<LabelsAppearance />

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="Price">

</XAxis>

<YAxis>

<LabelsAppearance DataFormatString="${0}" />

</YAxis>

</PlotArea>

<Legend>

<Appearance Visible="false" />

</Legend>

<ChartTitle Text="Bookstore Products">

</ChartTitle>

</telerik:RadHtmlChart>

<div>

<asp:GridView runat="server" ID="Gridview1"></asp:GridView>

</div>

<script runat="server">

protected void Page_Load(object sender, System.EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

Gridview1.DataSource = GetData();

Gridview1.DataBind();

}

private DataSet GetData()

{

DataSet ds = new DataSet("Bookstore");

DataTable dt = new DataTable("Products");

dt.Columns.Add("Id", Type.GetType("System.Int32"));

dt.Columns.Add("Name", Type.GetType("System.String"));

dt.Columns.Add("Price", Type.GetType("System.Double"));

dt.Rows.Add(1, "Pen", 5.45);

dt.Rows.Add(2, "Audio book", 9.95);

dt.Rows.Add(3, "Pencil"); // Null value for the price

dt.Rows.Add(4, "Book", 15.95);

dt.Rows.Add(5, "Newspaper", 0); // 0 value for the price

dt.Rows.Add(6, "Magazine", 3.95);

ds.Tables.Add(dt);

return ds;

}

</script>

</form>

</body>

</html>

Could you please modify the code in accordance with your custom setup so I would be able to replicate the issue on my side and provide with a working solution?

If there is something that I'm missing in your scenario please send me additional details and reproduction steps.

Thank you for your contribution.

Best Regards,
Misho
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.

answered on 05 Jan 2015, 12:45 PM

Hi Misho,

Thanks for the reply.

On thing that is different is that I am creating this chart dynamically in code. To create the column series, I do this:

seriesItem = New CategorySeriesItem(bv.ActualValue)

If (Not seriesItem Is Nothing) Then
actualColumnSeries.SeriesItems.Add(seriesItem)
End If

Note that "bv" is a strongly typed object and "ActualValue" is a property of type String. In the case where ActualValue is Nothing, the column in the chart shows up with a label of 0. When I look at the seriesItem that is added, the Y property is indeed set to 0.

Since a value of Nothing seems to be converting to a value of 0 (which makes sense) I've tried using the following code to simply create an empty CategorySeriesItem:

If (Not bv.ActualValue Is Nothing) Then
seriesItem = New CategorySeriesItem(bv.ActualValue)
Else
seriesItem = New CategorySeriesItem()
End If

actualColumnSeries.SeriesItems.Add(seriesItem)

But when I do this no seriesItem really gets added to the series. In other words, that series items is skipped / not represented on the chart.

I also just tried using a nullable Double instead of the String property, as follows:

Dim av As Nullable(Of Double)
If (Not bv.ActualValue Is Nothing) Then
av = CDbl(bv.ActualValue)
Else
av = Nothing
End If

'seriesItem = New CategorySeriesItem(bv.ActualValue)
seriesItem = New CategorySeriesItem(av)
actualColumnSeries.SeriesItems.Add(seriesItem)

The result again was that the seriesItem is not represented in the series. That data point is skipped and the next non-zero data point is plotted in its place.

Thanks for any help you can provide.
Michael

Accepted

answered on 06 Jan 2015, 11:11 AM

Hi Michael,

This is an issue with the control that has already been logged here, so that you can monitor, comment and vote on it. What I can suggest is that instead of creating items programmatically you create a data source with null-able values and then pass it to the chart. After that you can can hide labels for null-able items with templates:

ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="SellQuantity">

<LabelsAppearance>

<ClientTemplate>

#if(value != undefined){# #=value# #}#

</ClientTemplate>

</LabelsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis BaseUnit="Months" DataLabelsField="SellDate">

<LabelsAppearance DataFormatString="d" Step="3">

</LabelsAppearance>

</XAxis>

</PlotArea>

</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)

{

RadHtmlChart1.DataSource = GetData();

RadHtmlChart1.DataBind();

}

protected DataTable GetData()

{

DataTable dt = new DataTable();

dt.Columns.Add("ID", typeof(int));

dt.Columns.Add("SellQuantity", typeof(int));

dt.Columns.Add("SellDate", typeof(DateTime));

dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));

dt.Rows.Add(2, 0, new DateTime(2011, 12, 12));

dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));

dt.Rows.Add(4, null, new DateTime(2012, 09, 18));

dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));

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.

Chuck

commented on 20 Jul 2022, 03:12 PM

This approach (Client Template) also worked for me on a Bar Chart column series.

<telerik:ColumnSeries Name="Fixed Income" DataFieldY="PublicFixedIncome" GroupName="StressedNAV">
    <Appearance>
        <FillStyle BackgroundColor="#DEE6F3" />
    </Appearance>
    <LabelsAppearance DataFormatString="Public Fixed Income ${0}" Position="Center">
        <ClientTemplate>
            #if(value != 0){# #="Public Fixed Income $" + value# #}#
        </ClientTemplate>
    </LabelsAppearance>
    <TooltipsAppearance Color="Black" BackgroundColor="White" DataFormatString="Public Fixed Income ${0}" />
</telerik:ColumnSeries>