Completed
Last Updated: 28 Jul 2016 08:53 by ADMIN
ADMIN
Danail Vasilev
Created on: 12 Jun 2014 13:37
Category: HtmlChart
Type: Feature Request
4
ADD display text/image when RadHtmlChart has empty series
For the time being you can do that manually with an initially hidden panel that stores the text/image and display it only when there is no data in the chart. This can be done on the server-side as well as on the client-side. For example:

Server-side code:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
        </telerik:RadHtmlChart>
        <asp:Panel runat="server" Visible="false" ID="panelImage" Width="200" Height="200">
            <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
            <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
        </asp:Panel>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        BarSeries bar = new BarSeries();
        //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
        //bar.SeriesItems.Add(csi);

        RadHtmlChart1.PlotArea.Series.Add(bar);
        //If there isn't any items in the first series hide the chart and display the panel
        if ((RadHtmlChart1.PlotArea.Series[0] as BarSeries).SeriesItems.Count == 0)
        {
            RadHtmlChart1.Visible = false;
            panelImage.Visible = true;
        }
    }

Client-side code:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px">
        </telerik:RadHtmlChart>
        <asp:Panel runat="server" ID="panelImage" Width="200" Height="200" Style="display: none;">
            <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" />
            <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" />
        </asp:Panel>
        <script type="text/javascript">
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                //Hide the chart and display the panel when there is no data in the first series
                if (chart._chartObject.options.series[0].data.length == 0) {
                    chart.get_element().style.display = "none";
                    $get("<%=panelImage.ClientID%>").style.display = "block";
                }
            }
        </script>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        BarSeries bar = new BarSeries();
        //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 };
        //bar.SeriesItems.Add(csi);
        RadHtmlChart1.PlotArea.Series.Add(bar);
    }
1 comment
ADMIN
Rumen
Posted on: 28 Jul 2016 08:53
Due to lack of enough demand, I'll mark this feature request as completed since it includes a solution. If more users give their vote, we will consider implementing it built-in.