Data not re-queried after zooming

[Daniel]

G'day,

I am trying to use an ej.charts.Chart so that I can show number of connections on a specific timeframe. I've got this working, looking like this:



What I cannot get to work is the behaviour of re-querying the datasource once the user uses the 'zoom' functionality.
At the moment, after zooming (

enableSelectionZooming: true,

),

the data is the same as the above, just 'zoomed in / magnified':



The bar showing 30, should (after zooming) be multiple bars making up 30 in total and should look something like this:



I have millions of connections to show, therefore the backend system aggregates the data so that a max of 200 bars are shown on the x-axis. Therefore I need to re-query the datasource / backend system once a user has selected a timeframe so I can return the additional details.

I would appreciate any help on how I can code the chart, so that after a zooming event, it re-queries the datasource to get the additional details for that selected timeframe.

Below is the code I use.

Thank you very much for your help,
Daniel

create_chart();

update_date_time_selector_data("")

function create_chart() {

chart = new ej.charts.Chart({

primaryXAxis: {

valueType: 'DateTime',

labelFormat: 'HH:mm:ss<br>dd/MM/yy'

},

primaryYAxis: {

title: 'Number of connections'

},

height: '250px',

scrollSettings: { width: 100, height: 100 },

series: [{

type: 'Column',

dataSource: chartData,

xName: 'x', yName: 'y',

width: 20, fill: 'white'

}],

legendSettings: { visible: true, toggleVisibility: false },

zoomSettings:

{

enableSelectionZooming: true,

mode: 'X',

},

tooltip: {

enable: true,

format: '${series.name} ${point.x} : ${point.y}'

},

enableAutoIntervalOnZooming: true,

zoomComplete: function (args) {

// magic to happen here probably :)

},

}, '#syncfusion_time_selector');

}

function update_date_time_selector_data(local_filter) {

ej.popups.showSpinner(chartElement);

$.get(API_URL + '/api/date_time_selector?' , function (data_received) {

data = JSON.parse(data_received);

chart.dataSource = data;

ej.popups.hideSpinner(chartElement);

return data;

});

}

[Swetha Babu]

Hi Daniel,

We are validating the reported scenario and update you with further details within two business days.

Regards,

Swetha

[Daniel]

Thank you very much Swetha.

- Daniel

[Durga Gopalakrishnan]

Hi Daniel,

Thanks for being patience. We suggest you to use zoomComplete event to change the chart series datasource after zooming. We have prepared sample based on your requirement. Please check with the below snippet and sample.

var chart = new ej.charts.Chart({

    zoomComplete(args){

           chart.series[0].dataSource = getData(20);

        }

});

Before Data Update

After Data Update

Sample : https://stackblitz.com/edit/stwep5

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Daniel]

Hi Durga,

apologies for the long reply cycle.

I tested your suggested solution and it works.

Thank you very much!

Daniel

[Durga Gopalakrishnan]

Hi Daniel,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Durga Gopalakrishnan.