HTMLCHART not refreshing

[Omar]

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]

Any suggestions????

[Omar]

Any one.......

[Vessy]

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

[Omar]

Now it's working perfectly!

 

thanks for the help.

Regards,

Omar

[yuv]

thanks for the awesome information.

[Vessy]

You are welcome, guys! :)