1. Home
  2. Forum
  3. Vue
  4. Paging in chart

Paging in chart

Hi

Is it possible to add pagination to a chart?
Meaning if there are too many points (line series) or bars (column/bar series), I can set a maximum number of points per page and the user can go back/forth.
Thanks


15 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team August 10, 2020 06:21 AM UTC

Hi Amos,

 
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using legend paging in the chart. We have also prepared a sample and UG link for your reference. Please find the below sample, UG link,  code snippet, and screenshot. 
  

 

 
Code Snippet: 
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :legendSettings='legendSettings'>
 
 // add your additional code here
</ejs-chart>       
 

 
// add your additional code here
legendSettings: {
            padding: 10, shapePadding: 10,
            visible: true, border: {
                width: 2, color: 'grey'
            },
            width: '200'
        },
      
 // add your additional code here

  
Screenshot: 
 

If still, this is not your exact requirement. kindly revert us with more information which will be helpful for further analysis and provide you solution sooner. 
  
Regards, 
Srihari M 


AM Amos August 10, 2020 06:41 AM UTC

Hi

I'm not talking about the legend, I'm talking about the chart itself.
If there are 60 data points, it shows 60 bars. That's too much for one page.
Instead I want to set it to show 20 (for example) and the user can go right/left to see the rest of the bars.

SM Srihari Muthukaruppan Syncfusion Team August 10, 2020 12:29 PM UTC

Hi Amos, 
  
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using zoomFactor property in the axis of the chart. Based on your requirement we have prepared a sample for your reference. In which out of 10 datas we have displayed 5 datas you can customize this as per your requirement. Please find the below sample, code snippet, and screenshot.  
   
  
Code Snippet:   
 <template>
  <div class="control-section">
    <div align='center'>
        <ejs-chart  :zoomSettings='zoomSettings' :axisLabelRender='axisLabelRender' :load='load' >
            <e-series-collection>
                // add your additional code here
            </e-series-collection>
        </ejs-chart>
    </div>
  </div>
</template>
 
<script> 
   // add your additional code here
export default Vue.extend({
  data: function() {
    return {
      seriesData: [
        { x: 1, y: 10 }, { x: 2, y: 12 },
        { x: 3, y: 8 }, { x: 4, y: 10 },
        { x: 5, y: 10 }, { x: 6, y: 9},
        { x: 7, y: 7 }, { x: 8, y: 9},
        { x: 9, y: 9}, { x: 10, y: 7}

      ],
     
         // add your additional code here
        zoomSettings:  {
            mode: 'X',
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true,
            enableScrollbar: true,
            toolbarItems: []
        },
    };
  },
  provide: {
    chart: [ColumnSeries, DataLabel, Tooltip, Legend, Zoom, ScrollBar]
  },
  methods: {
    load: function(args) {
         // add your additional code here
      // zoomFactor = (double)Number of datas to be displayed / (double) Total number of datas
        var zoomFactor = (5/ args.chart.series[0].dataSource['length']);
        args.chart.primaryXAxis.zoomFactor = zoomFactor;
        args.chart.zoomModule.isZoomed = true;
    }
  },
 
});
</script>
  
   
Screenshot:  
 

  
Let us know if you have any concerns.
  
Regards,  
Srihari M  


Marked as answer
AM Amos August 10, 2020 05:20 PM UTC

I needed to do some changes because in load event the data is not there but it works great.

One question though:
I have 60 datas and the first view is 10.
It shows 10 but the x axis shows much less labels even though there's enough space for all of them.
When changing the zoom using the mouse, the labels in x axis are not shown/hidden depending on the space but instead stay the same as they were in the beginning and are drawn (in the first place) based on the original view (60 datas).

I tried this from the docs "enableAutoIntervalOnZooming=true" but it had no effect
What am I missing? Thanks

BP Baby Palanidurai Syncfusion Team August 11, 2020 12:09 PM UTC

Hi Amos, 

Thanks for your update. 

By default, intervals will be calculate based on the available size. So, If you are having 10 data to show initially, can you set interval as 1.  
Kindly revert us, if you have any concerns. 

Regards, 
Baby.  


AM Amos August 11, 2020 12:31 PM UTC

Thanks,
It is working but now the problem is the opposite.
It shows one label per column as expected but when I zoom out and see more and more "points", eventually the labels overlap and I see only dots instead of labels.

Wasn't enableAutoIntervalOnZooming=true suppose to deal with that exactly?
Thanks!

SM Srihari Muthukaruppan Syncfusion Team August 12, 2020 11:57 AM UTC

Hi Amos,

We have analyzed your query. From that, we would like to let you know that the reported scenario occurs due to the interval value is set as 1. And also we would like to let you know that the enableAutoIntervalOnZooming property does not work if the interval value is set as default. Hence we suggest you to remove the interval value as null in Zoomcomplete event and enable the enableAutoIntervalOnZooming property to achieve your requirement.


Screenshot:


Let us know if you have any concerns.

Regards,
Srihari


AM Amos August 12, 2020 08:28 PM UTC

Maybe I'm missing something but I did the following
<ejs-chart....
ref="theChart"
:zoomComplete="zoomComplete"
:primaryXAxis="xAxis"
enableAutoIntervalOnZooming="true"

zoomComplete(args) {
this.$refs.theChart.ej2Instances.primaryXAxis.interval = null;
},

xAxis: {
visible: true,
   valueType: "Category",
   majorGridLines: { width: 0 },
   minorGridLines: { width: 0 },
   interval: 1,
   enableAutoIntervalOnZooming: true,
},

notice that in your demo enableAutoIntervalOnZooming appears inside xAxis while in your docs:
https://ej2.syncfusion.com/vue/documentation/chart/zooming/ it appears inside ejs-chart section. Which is correct?

With the above code, it starts with one label per column as expected but once I zoom in/out even a bit, most of the labels disappear
and it goes back to the original problem.

May I ask what enableAutoIntervalOnZooming is for? From the docs it seems to do exactly what I need but maybe I misunderstand something.

SM Srihari Muthukaruppan Syncfusion Team August 13, 2020 01:32 PM UTC

Hi Amos, 
  
We are sorry for the inconvenience. You are right that enableAutoIntervalOnZooming should appear within the xAxis and it’s a mistake in our document which we will correct and refresh soon in live by next week. The purpose of enableAutoIntervalOnZooming is to calculate and set the auto intervals while zooming action takes place, but at this point of time, we are able to reproduce your reported issue with most of the labels getting disappeared and not calculated with near range intervals when zooming in/out. Therefore, we confirm this as a bug and logged a defect report. You can keep track of the bug from the feedback portal below. 
 
  
 
  
The fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on or before August 25th, 2020. 
  
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

 
Thanks,  
Srihari. 


AM Amos August 13, 2020 03:10 PM UTC

Thank you very much!

SM Srihari Muthukaruppan Syncfusion Team August 14, 2020 11:57 AM UTC

Hi Amos,  

 
Most welcome, 

 
we will let you know once the patch release is rolled out. We appreciate your patience until then.
  
 
Regards,  
Srihari  


SM Srihari Muthukaruppan Syncfusion Team August 25, 2020 05:24 PM UTC

Hi Amos, 
 
Sorry for the inconvenience.  
 
Due to complexity in implementation, we couldn't include this in our patch release. We will include this fix in our weekly patch release which is scheduled to be rolled out on or before 1 September 2020. We appreciate your patience until then. 
 
Regards, 
Srihari M  


AM Amos August 25, 2020 06:02 PM UTC

No problem, thanks!

SM Srihari Muthukaruppan Syncfusion Team August 26, 2020 04:51 AM UTC

Hi Amos,  
  
Thanks for the update 
 
we will let you know once the patch release is rolled out. We appreciate your patience until then. 
   
Regards,   
Srihari 
 


SM Srihari Muthukaruppan Syncfusion Team September 3, 2020 01:28 PM UTC

Hi Amos, 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.    
Regards,
Srihari M 


Loader.
Up arrow icon