We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to fully reinitialize chart control

Hello All,

We are trying to create chart, data in which could be switched.
In the bottom of page there is switcher/link that control what data to show.
We are using javascript version. The problem is that we need not only change datasource, but all including axes properties, zoom levels,
datalabels etc. So generally 2 versions could look completely different. We just want to preserve chart size, names of axes and some general properties including chart type.
Everything related to data could differ. We tried to use   $("#container").ejChart(chartProperties); when switching datasource. But it just create second chart over first seem to me, because datalabels are mixed. We tried $("#container").ejChart("instance").model = chartProperties; it also fails. Are there any possibilities? We don't want blinking of chart due of recreation/destroy. But could not find any good way. 

I have attached our sample cshtml.


Attachment: Index_99e11900.zip

1 Reply

AB Akbar Basha K M Syncfusion Team March 25, 2016 11:23 AM UTC

Hi Yauhen,

Thanks for contacting syncfusion support. We have analyzed your reported query and we suggest to use, set the null value to the properties before passing the data to the chart.
Currently we are changing series property based on your scenario. Please find the below code snippet,

           

            $("#lnkSerie1").click(function (event) {

                event.preventDefault();

                var chartModel = $("#container").ejChart("instance").model;

                // calling function to set the null value

                setNull(chartModel, chartProperties);

                $("#container").ejChart(chartProperties);

           });

           

             function setNull(model, options) {

                 for (var prop in options) {

                    switch (prop) {

                       case "series":

                         model.series = [];

                         break;

                    }

                 }

             }




Output image:
When clicking on series2 link

When clicking on series1 link


We have prepared a sample based on this. Please find the sample below location,

Sample Location : http://www.syncfusion.com/downloads/support/forum/123521/ze/SyncfusionMvcApplication5-883502915
Thanks,
Akbar Basha KM.

Loader.
Live Chat Icon For mobile
Up arrow icon