1. Home
  2. Forum
  3. ASP.NET MVC
  4. Clear series and reset zoom clientside

Clear series and reset zoom clientside

Hello,

what is the best approach to clear all series from chart and to reset chart zoom on button click from javascript. I tried to manualy splice series one by one and to redraw the chart, but chart.model.axes collection is kept, and chart shows empty axes. If I empty chart.model.axes collection, and try to redraw the chart after Zooming is applied, I got this error:
Uncaught TypeError: Cannot read property 'zoomPosition' of undefined
    at Object._updateScroll (ej.web.all.min.js:10)
    at Object.draw (ej.web.all.min.js:10)
    at Object.bindTo (ej.web.all.min.js:10)
    at Object.redraw (ej.web.all.min.js:10)
    at resetChart (Index:283)
    at Object.clearUserData (Index:231)
    at Object._trigger (ej.web.all.min.js:10)
    at Object._btnMouseClickEvent (ej.web.all.min.js:10)
    at HTMLButtonElement.<anonymous> (ej.web.all.min.js:10)
    at HTMLButtonElement.dispatch (jquery-3.1.1.min.js:3)

Can you please provide me with an example on how to achieve this.

Thanks,

Ivan Janjić

7 Replies
DD Dharanidharan Dharmasivam Syncfusion Team November 28, 2017 09:40 AM UTC

Hi Ivan, 
 
Thanks for using our products. 
 
We have analyzed your query. We have prepare a sample with respect to your requirement. Kindly find the sample from below location. 
 
 
In the sample, using the button click event, we have assigned empty array to the series and specified the zoomFactor(default value is 1) and zoomPosition(default value is 0) of all the axis to its default value and then called the redraw method of chart. So that, the chart will be rendered properly.  Find the code snippet below to achieve this scenario. 
 
ASP.NET MVC: 
 
<input type="button" onclick="clearSeries()" value="Clear Series" /> 
 
function clearSeries() { 
        var chart = $("#container").ejChart("instance"); 
        chart.model.series = []; 
        chart.model.zooming.toolbarItems = []; 
        for (var i = 0; i < chart.model._axes.length; i++) { 
            chart.model._axes[i].zoomFactor = 1; 
            chart.model._axes[i].zoomPosition = 0; 
        }   
        chart.redraw(); 
  } 
 
 
Screenshot before clearing the series with chart zoomed: 
 
 
Screenshot after clearing series: 
 
 
Kindy revert us, if this is not your requirement. 
 
Thanks, 
Dharani. 


IJ Ivan Janjic November 28, 2017 04:17 PM UTC

Thanks Dharani,

in your example all series are cleared from the chart, but the axes are still present. Can I clear axes also before I call redraw without the before mentioned error, because I noticed the error only when clearing the axes collection.

DD Dharanidharan Dharmasivam Syncfusion Team November 29, 2017 11:25 AM UTC

Hi Ivan, 

Thanks for the update. 

We have analyzed your query. If you need to clear the axis, then your requirement can be achieved by specifying empty array to the axes property before the redraw method. By default, chart will render with primary X and Y axis. So we can’t remove the primary axes, kindly remove the secondary axes as depicted below. Find the code snippet below to achieve this requirement. 

ASP.NET MVC: 

<input type="button" onclick="clearSeries()" value="Clear Series" />  
  
function clearSeries() {  
       var chart = $("#container").ejChart("instance");  
       chart.model.axes = []; 
       //... 
       chart.redraw();  
  }  



Screenshot before clear the series and secondary axes: 
 

Screenshot after clearing series and secondary axes: 
 

Sample for reference can be find from below link. 
 
Kindly revert us, if you have any concerns. 

Thanks, 
Dharani. 


IJ Ivan Janjic November 29, 2017 11:58 AM UTC

Hello Dharani,

Thanks for the answer. As I mentioned in my first post, this method for clearing the axes works only if zoom is not applied to the chart. If zoom is applied, and axes are cleared, then the above mentioned error happens. Also, I noticed that it happens only when there is more then one series in the chart when it is zoomed and then cleared.

Thanks,
Ivan

DD Dharanidharan Dharmasivam Syncfusion Team November 30, 2017 07:30 AM UTC

Hi Ivan, 

Thanks for the update. 

We have tried to replicate the reported scenario, unfortunately the reported issue is not replicated and the chart is rendering properly after clearing the series and secondary axes. Sample used for testing can be find from below link. 


In the above sample after zooming the chart only, we have cleared the series and secondary axis and called the redraw method in an button click event. The chart is rendered properly at our end. And as stated in our previous, chart will render with primary X and Y axes. So, we can’t remove primary axes and need to remove only the secondary axes. 

Since we are aware of your exact scenario on which the issue is reproduced, we would like to know the following details, which will be helpful in further analysis and provide you the solution sooner. 

  • Try to reproduce the reported issue in the attached sample and revert the sample
  • Else provide your sample with replication steps.
  • Current version of Essential Studio you are using.

Thanks, 
Dharani. 


IJ Ivan Janjic November 30, 2017 10:14 AM UTC

Hi Dharani,

as I mentioned earlier, clearing of axis and proper chart rendering works only if you are clearing the chart that has no zoom applied. If you zoom into the chart, clear the axes and then try to redraw, it fails with the error.

I think that problem is on line 296460 in file ej.web.all.js (version 15.3.0.26). I marked it on the screencap bellow
snippet
here, axes[i] is undefined, because axes collection is already cleared.
I found the workaround by doing this before redraw:

chart.model.scrollObj.splice(indexOfAxis, 1);
if (chart.scrollsvgObj !== undefined) {
    chart.scrollsvgObj.splice(indexOfAxis, 1);
}

Also, I attached the sample, where you can reproduce this by zooming the chart with mouse wheel and then clicking the Clear Axes button.

P.S. Out of topic. Can you please help me with posting code snippets in forum posts with correct language syntax highlighting. I couldn't find the shortcut anywhere in the editor.

Thanks,
Ivan


Attachment: chartSample_abf51eb.zip

DD Dharanidharan Dharmasivam Syncfusion Team December 1, 2017 08:10 AM UTC

Hi Ivan, 

Thanks for the update. 

We have analyzed the reported scenario with the provide sample. We found that, you have enabled scrollbar while zooming. So while removing the secondary axis in button click event, we can remove  the scrollbar for secondary axis, so that we can overcome from the reported scenario. Kindly find the code snippet below to overcome the reported scenario. 

ASP.NET MVC: 

<input type="button" onclick="clearSeries()" value="Clear Series" /> 
 
function clearSeries() { 
        var chart = $("#container").ejChart("instance"); 
         
      //Removing secondary axis scrollbar 
        if (chart.model.zooming.enableScrollbar) { 
            var scrollbar = $("#axisScrollbar_container")[0], 
                scrollbarCount = scrollbar.childElementCount; 
            for (var i = 0; i < scrollbarCount; i++) { 
                if (i > 1) scrollbar.children[i].remove(); 
            } 
            var scrollObj = chart.model.scrollObj; 
            if (scrollObj.length > 2) chart.model.scrollObj = scrollObj.slice(0, 2); 
        } 
 
        //... 
 
        chart.redraw(); 
    } 


In the above, we have removed the secondary axis scrollbar. Sample for reference can be find from below link. 
 
Kindly revert us, if you have any concerns. 

Thanks, 
Dharani. 


Loader.
Up arrow icon