I've a page where I load grids and charts. The heirarchical grids and heirarchical charts uses the same webapis. So, I call the load grids function first and then call the create chart after the grids are loaded. So, the ajax data returned from the grid is stored in localStorage and reused in chart.
I load the grid first and when its complete, I create the chart
$.when(CreateGeoGrids()).then(CreateLabelChart());
I've 3 charts & 3 grids in this heirarchical order - Country -> Region -> Territories(State Province)
And all charts are column charts - selecting a country column in country chart loads region chart and selecting a region in region chart loads territories. For charts I've used ApexCharts & grids gijgogrids
Everything was working fine until I added a dropdown(Change regions) change event for changing the last territory/StateProvince chart. So, I remove this dropdown &? its events. Still I'm getting this error
Uncaught TypeError: geoChart.addEventListener is not a function at two lines of code
geoChart.addEventListener('dataPointSelection', function (e, chart, opts) {
$.when(CreateGeoGrids()).then(CreateLabelChart());
This errors are in chart function, CreateLabelChart to be specific where I create and render both country chart & region chart. And there are four addEventListeners in this function - 2 each for country & region
The events added through the listeners are
- geoChart.addEventListener('dataPointSelection', function (e, chart, opts) {
geoChart is country chart & event dataPointSelection is added through addEventListener & the error is thrown here & for all addEventListener that follows too if i comment this listener. This event is for column selection by clicking on the column in the country chart & this should load data into the region chart for that country selected
- geoChart.addEventListener('updated', function (chart) {
This event is called after loading data into region chart.
So, all these events for the charts addEventListeners are provided by apex charts in their site [Apex dynamic chart][1]
Below is the full code in my JS file Sales.js
function CreateGeoGrids() {
var countryGrid, onSuccessFuncForCountry = function (data) {
localStorage.setItem('stackedCountryChartSourceData', JSON.stringify(data));
countryGrid.render(data);
};
countryGrid = $('#countryGrid').grid({
primaryKey: 'CountryId',
dataSource: { url: 'http://localhost:51604/api/Sales/GetSalesByGeo', data: {}, success: onSuccessFuncForCountry },
columns: [
{ field: 'CountryId', hidden: true },
{ field: 'SalesTerritoryCountry', title: 'Country' },
{ field: 'TotalMargin', title: 'Total Margin' }
],
complete: function (data) {
},
detailTemplate: '<div><table id="regGrid"/></div>'
});
countryGrid.on('detailExpand', function (e, $detailWrapper, CountryId) {
regGrid = $detailWrapper.find('table').grid({
params: { CountryId: CountryId },
primaryKey: 'GridRowIndex',
dataSource: 'http://localhost:51604/api/Sales/GetSalesByRegion',
columns: [
{ field: 'ProductCategoryKey', hidden: true },
{ field: 'EnglishProductCategoryName', title: 'Category' },
{ field: 'SalesTerritoryKey', hidden: true },
{ field: 'SalesTerritoryRegion', title: 'Region' },
{ field: 'CalendarYear', title: 'Year' },
{ field: 'Total_Sales', title: 'Total Sales' },
{ field: 'Total_cost', title: 'Total Cost' },
{ field: 'Total_Margin', title: 'Total Margin' }
],
pager: { limit: 5 }
});
countryGrid.on('dataBound', function (e, records, totalRecords) {
stackedCountryChartSourceData = JSON.stringify(records);
});
regGrid.on('dataBound', function (e, records, totalRecords) {
regGrid.setSelected(1);
document.getElementById('stateProvGrid').style.visibility = "visible";
$("#divYear").visibility = "visible";
$("#divRegion").visibility = "visible";
$("#divCategory").visibility = "visible";
defaultCategory = records[0].EnglishProductCategoryName;
defaultRegion = records[0].SalesTerritoryRegion;
defaultYear = records[0].CalendarYear;
$("#selectedRegion").text(defaultCategory);
$("#selectedCategory").text(defaultRegion);
$("#selectedYear").text(defaultYear);
dynamicRegionChartSource = records;
loadGrid(defaultCategory, defaultRegion, defaultYear);
});
regGrid.on('rowSelect', function (e, $row, record) {
var data = regGrid.get(regGrid.getSelected());
$("#selectedRegion").text(data.SalesTerritoryRegion);
$("#selectedCategory").text(data.EnglishProductCategoryName);
$("#selectedYear").text(data.CalendarYear);
stateProvGrid.reload({
EnglishProductCategoryName: data.EnglishProductCategoryName, SalesTerritoryRegion: data.SalesTerritoryRegion,
CalendarYear: data.CalendarYear, page: 1
});
});
});
countryGrid.on('detailCollapse', function (e, $detailWrapper, CountryId) {
$detailWrapper.find('table').grid('destroy', true, true);
document.getElementById('stateProvGrid').style.visibility = "hidden";
$("#divYear").visibility = "hidden";
$("#divRegion").visibility = "hidden";
$("#divCategory").visibility = "hidden";
stateProvGrid('destroy', true, true);
});
}
$.when(CreateGeoGrids()).then(CreateLabelChart());