jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by svetoslav_borislavov 2 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

chart Posts
August 10, 2022 at 8:13 am chart #122304

Vaishnavi P
Participant

Dear Support Team,
I was trying jqxgrid charting. My code is given below. I’m getting this error

Uncaught TypeError: Cannot read properties of undefined (reading ‘find’)
at c.<computed>._getChartDataFields (jqxgrid.chart.js:106:51)
at c.<computed>.createChart (jqxgrid.chart.js:185:31)
at t.bv [as createChart] (jqxcore.js:8:7494)
at HTMLDivElement.<anonymous> (gridcadmin:171:12)

please let me know where I’m doing wrong.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Grid Charting | Grid | Javascript.</title>
<meta name=”description” content=”Data Visualization of Grid data in Chart” />
<link rel=”stylesheet” href=”../jqwidgets//styles/jqx.base.css” type=”text/css” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
<script type=”text/javascript” src=”../../scripts/jquery-1.12.4.min.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxcore.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxcalendar.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.chart.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../jqwidgets//globalization/globalize.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxdraw.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxchart.core.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxchart.api.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxwindow.js”></script>
<script type=”text/javascript” src=”generatedata.js”></script>
<script type=”text/javascript” src=”../jqwidgets//jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<style>
#toolbar {
display: flex;
height: 100%;
padding: 0 1rem;
}
#toolbar.warning:after {
content: ‘Selected data cannot be used to create a chart.’;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(–smart-error);
}
#toolbar > div {
display: flex;
align-items: flex-end;
justify-content: center;
margin-right: 15px;
width: 35px;
height: 30px;
height: 100%;
font-size: 12px;
background-size: contain;
background-repeat: no-repeat;
user-select: none;
cursor: pointer;
}
#toolbar > div:hover {
background-color: var(–smart-grid-column-header-background-hover);
}
#toolbar > div:active {
background-color: var(–smart-grid-column-header-background-active);
}
#toolbar > div.warning {
outline: 2px solid var(–smart-error);
}
#column {
background-image: url(“../jqwidgets//styles/images/create-column.png”);
}
#line {
background-image: url(“../jqwidgets//styles/images/create-line.png”);
}
#pie {
background-image: url(“../jqwidgets//styles/images/create-pie.png”);
}
#bar {
background-image: url(“../jqwidgets//styles/images/create-bar.png”);
}
#area {
background-image: url(“../jqwidgets//styles/images/create-area.png”);
}
#scatter {
background-image: url(“../jqwidgets//styles/images/create-scatter.png”);
}
[theme=”dark”] #column {
background-image: url(“../jqwidgets//styles/images/create-column-dark.png”);
}
[theme=”dark”] #line {
background-image: url(“../jqwidgets//styles/images/create-line-dark.png”);
}
[theme=”dark”] #pie {
background-image: url(“../jqwidgets//styles/images/create-pie-dark.png”);
}
[theme=”dark”] #bar {
background-image: url(“../jqwidgets//styles/images/create-bar-dark.png”);
}
[theme=”dark”] #area {
background-image: url(“../jqwidgets//styles/images/create-area-dark.png”);
}
[theme=”dark”] #scatter {
background-image: url(“../jqwidgets//styles/images/create-scatter-dark.png”);
}
</style>
<script type=”text/javascript”>
window.onload = function() {
var source = {
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
commit(true);
},
datatype: ‘json’,
datafields: [
{name: ‘name’, type: ‘string’},
{name: ‘m_tot_pay’, type: ‘number’},
{name: ‘f_tot_pay’, type: ‘number’},
{name: ‘tot_pay’, type: ‘number’},
{name: ‘m_avg_sal’, type: ‘number’},
{name: ‘f_avg_sal’, type: ‘number’},
{name: ‘avg_sal’, type: ‘number’},
{name: ‘ytd’, type: ‘number’}
],
id: ‘id’,
url: ‘${pageContext.request.contextPath}/chart/getCadmin ‘,
type: ‘POST’,
async: true
};

var dataAdapter = new $.jqx.dataAdapter(source);
var getLocalization = function () {
var localizationobj = {};

localizationobj.currencysymbol = ” “;
localizationobj.currencysymbolposition = “before”;
localizationobj.decimalseparator = “.”;
localizationobj.thousandsseparator = “,”;

return localizationobj;
}

var grid = new jqxGrid(“#jqxgrid”, {
width: ‘100%’,
autoheight: true,
rendertoolbar: function(toolbar){
var template = document.getElementById(‘toolbarTemplate’);
var chartToolbar = document.importNode(template.content, true);
var toolbarElement = toolbar[0];

toolbarElement.appendChild(chartToolbar);

toolbarElement.querySelector(‘#column’).addEventListener(‘click’, function () {
grid.createChart(‘column’);
});
toolbarElement.querySelector(‘#line’).addEventListener(‘click’, function () {
grid.createChart(‘line’);
});
toolbarElement.querySelector(‘#pie’).addEventListener(‘click’, function () {
grid.createChart(‘pie’);
});
toolbarElement.querySelector(‘#bar’).addEventListener(‘click’, function () {
grid.createChart(‘bar’);
});
toolbarElement.querySelector(‘#area’).addEventListener(‘click’, function () {
grid.createChart(‘area’);
});
toolbarElement.querySelector(‘#scatter’).addEventListener(‘click’, function () {
grid.createChart(‘scatter’);
});
},
source: dataAdapter,
showtoolbar: true,
toolbarheight: 50,
sortable: true,
ready: function () {
},
selectionmode: ‘multiplecellsadvanced’,
columns: [
{text: ‘Admin’, datafield: ‘name’, width: 160},
{text: ‘M Total’, datafield: ‘m_tot_pay’, cellsalign: ‘right’, width: 120, aggregates: [‘sum’] },
{text: ‘F Total’, datafield: ‘f_tot_pay’, cellsalign: ‘right’, width: 120, aggregates: [‘sum’] },
{text: ‘Total Pay’, datafield: ‘tot_pay’, cellsalign: ‘right’, width: 120, aggregates: [‘sum’] },
{text: ‘M Avg Salary’, datafield: ‘m_avg_sal’, cellsalign: ‘right’, width: 120, aggregates: [‘sum’] },
{text: ‘F Avg Salary’, datafield: ‘f_avg_sal’, cellsalign: ‘right’, width: 120, aggregates: [‘sum’] },
{text: ‘Avg Salary’, datafield: ‘avg_sal’, cellsalign: ‘right’, width: 120, aggregates: [‘sum’] }

]
});

}
</script>
</head>
<body class=’default’>
<template id=”toolbarTemplate”>
<div id=”toolbar”>
<div id=”column”>Column</div>
<div id=”line”>Line</div>
<div id=”pie”>Pie</div>
<div id=”bar”>Bar</div>
<div id=”area”>Area</div>
<div id=”scatter”>Scatter</div>
</div>
</template>
<div id=”jqxgrid”></div>
</body>
</html>

August 11, 2022 at 6:54 am chart #122314

svetoslav_borislavov
Participant

Hi,

I am reproducing your example and I am not getting error: http://jsfiddle.net/o1wcefva/
Please provide us with a quick demo of the error!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

August 11, 2022 at 11:21 am chart #122317

Vaishnavi P
Participant

Hi,
Thanks for reply can you give me any example of grid charting with json URL. It’ll be of real help.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/charting.htm

Thanks

August 12, 2022 at 11:45 am chart #122325

svetoslav_borislavov
Participant

Hi,

We are very sorry, that is a bug and we will fix it as soon as possible!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.