HTMLCHART not refreshing

3 Answers 49 Views
Chart (HTML5)
Omar
Top achievements
Rank 2
Iron
Iron
Veteran
Omar asked on 09 Mar 2022, 06:17 PM | edited on 09 Mar 2022, 06:19 PM

Hi,

I have a page with an HTML chart that is dynamically created from the code behind.

The user selects some options and the column chart get generated, user change filter options, the chart should change the results accordinly.

The issue is, when the chart is created from the code behind, and e.g 3 bars are created which that represents three categories (series). When I change the filter option that should result in plotting one column bar, the chart still displays three bars representing the old filter option and the new one. 

How do I reset the chart?

I have attached two images, P1 represent the first chart that was created with three series, P2 was created after P1 which suppose to have one series, but it shows the previous two series with the new series.


            RadHtmlChart chart = new RadHtmlChart();
            chart.PlotArea.Series.Clear();
           
            for (int j = 0; j < rec.Count; j++)
            {
                ColumnSeries series = new ColumnSeries();
                series.Name = rec[j].answer;
                series.SeriesItems.Add(new CategorySeriesItem(rec[j].total));
                series.LabelsAppearance.ClientTemplate = rec[j].answer + ": (" + rec[j].total + ")";
                chart.PlotArea.Series.Add(series);
            }
            area_results.Controls.Add(chart);


  <div id="area_results" runat="server" style="padding-left: 20px; width: 100%">
                                       
                                    </div>
Omar
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 10 Mar 2022, 03:43 PM

Any suggestions????
Omar
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 12 Mar 2022, 06:14 PM

Any one.......

3 Answers, 1 is accepted

Sort by
1
Accepted
Vessy
Telerik team
answered on 14 Mar 2022, 02:30 PM

Hello Omar,

The faced problem is caused by the fact the chart is dynamically created each time, while its previous object is never cleared, thus - it is cached. Adding a basic HtmlChart configuration inside the "area_results" container will allow you to add/remove its series when needed, by accessing the same chart instance every time.

You will also need to clear the XAxis.Items collection .For example:

        <div id="area_results" runat="server" style="padding-left: 20px; width: 100%">
            <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"></telerik:RadHtmlChart>
        </div>
        <telerik:RadButton ID="RadButton1" runat="server"
            Text="Rrebind HtmlChart" OnClick="RadButton1_Click">
        </telerik:RadButton>

        RadHtmlChart chart = RadHtmlChart1 as RadHtmlChart;

        chart.PlotArea.XAxis.Items.Clear();
        chart.PlotArea.Series.Clear();


        for (int j = 0; j < rec.Count; j++)
        {
            ColumnSeries series = new ColumnSeries();
            series.Name = rec[j].answer;
            series.SeriesItems.Add(new CategorySeriesItem(rec[j].total));
            series.LabelsAppearance.ClientTemplate = rec[j].answer + ": (" + rec[j].total + ")";
            chart.PlotArea.Series.Add(series);
        }
        //area_results.Controls.Add(chart);

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Omar
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 18 Mar 2022, 08:02 PM

Now it's working perfectly!

 

thanks for the help.

Regards,

Omar

0
yuv
Top achievements
Rank 1
Iron
answered on 18 Mar 2022, 08:29 PM
thanks for the awesome information.
Vessy
Telerik team
commented on 21 Mar 2022, 10:59 AM

You are welcome, guys! :)
Tags
Chart (HTML5)
Asked by
Omar
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Vessy
Telerik team
Omar
Top achievements
Rank 2
Iron
Iron
Veteran
yuv
Top achievements
Rank 1
Iron
Share this question
or