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 1353 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Michael Hunt
Top achievements
Rank 1
Michael Hunt asked on 23 Dec 2014, 02:13 PM
Hi,

We are using version 2014.3.1024.40 of you ASP.NET for AJAX controls.  I am creating an HTMLChart with a couple of ColumnSeries.

Some of the values for the data, are actually NULL.  Yet the Labels for those are displaying as zero (0).

In the world of data, we all know that an empty value (NULL) is totally different than 0...  Empty or NULL just means I haven't entered it yet, where zero would indicate to the user that a value of zero has actually been entered.  Displaying zero instead of nothing, is totally different and misleading.

So is there a property or setting that will NOT display a value of zero for data points that are NULL?

If not, is there an area where I can vote for this feature?

Thanks,
Michael

5 Answers, 1 is accepted

Sort by
0
Misho
Telerik team
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>
<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.

 
0
Michael Hunt
Top achievements
Rank 1
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


1
Accepted
Danail Vasilev
Telerik team
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
Top achievements
Rank 1
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>

0
Michael Hunt
Top achievements
Rank 1
answered on 06 Jan 2015, 12:10 PM
Thanks much for the reply and link Danail.  One last bit of feedback I want to give is that there are some issues with the HTML Charts that we shouldn't even have to "vote" on.  This seems like a "no-brainer" bug to fix.  Zero is different than nothing and it some cases it shouldn't matter if only a handful of people doing this...  Who knows how many people there are who've run into this, that don't take the time to vote on it?

Aside from that, thanks for the great support on your forum, as always.  You all do a great job;  keep it up.
Michael

0
Mukesh
Top achievements
Rank 1
answered on 22 Nov 2017, 09:47 AM

Just add Data Format String like below:

objbarSeries.LabelsAppearance.DataFormatString = "{0: }";

Tags
Chart (HTML5)
Asked by
Michael Hunt
Top achievements
Rank 1
Answers by
Misho
Telerik team
Michael Hunt
Top achievements
Rank 1
Danail Vasilev
Telerik team
Mukesh
Top achievements
Rank 1
Share this question
or