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

Show empty pie chart

4 Answers 233 Views

Chart (HTML5)

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

4 Answers, 1 is accepted

Accepted

answered on 29 Jul 2020, 09:32 AM

Hi,

As mentioned by you, the only way to show a whole grey chert when the chart is actually empty, is to have one additional series with static value. You can show it conditionally, only when the chart is empty, disabling its labels, tooltips, click and highlight functionality in a similar way:

        <script>
            function onClick(e) {
                if (e.series.name == "Empty") {
                    e.preventDefault();
                }
            }
            function onHover(e) {
                if (e.series.name == "Empty") {
                    e.preventDefault();
                }
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" OnDataBound="RadHtmlChart1_DataBound">
            <ClientEvents OnSeriesClick="onClick" OnSeriesHover="onHover" />
            <PlotArea>
                <Series>
                    <telerik:PieSeries Name="Total cases" DataFieldY="values" NameField="labels">
                    </telerik:PieSeries>
                    <telerik:PieSeries Name="Empty" Opacity="0.2" Visible="false">
                        <TooltipsAppearance Visible="false"></TooltipsAppearance>
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <SeriesItems>
                            <telerik:PieSeriesItem Y="1" BackgroundColor="Gray" VisibleInLegend="false" />
                        </SeriesItems>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
            <Legend>
                <Appearance Visible="false"></Appearance>
            </Legend>
        </telerik:RadHtmlChart>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadHtmlChart1.DataSource = GetData();
            RadHtmlChart1.DataBind();
        }
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();

        dt.Columns.Add(new DataColumn("values", typeof(int)));
        dt.Columns.Add(new DataColumn("labels", typeof(string)));

        dt.Rows.Add(0, "Item 1");
        dt.Rows.Add(0, "Item 1");

        return dt;
    }


    protected void RadHtmlChart1_DataBound(object sender, EventArgs e)
    {
        bool isChartEmpty = true; //your logic for checking the data values here

        if (isChartEmpty)
        {
            RadHtmlChart1.PlotArea.Series[1].Visible = true;
        }
    }

Regards,
Vessy
Progress Telerik

answered on 03 Aug 2020, 07:04 AM

test.jpg

The lines with numbers dont show properly if I add second series.

You can see on atteched image.