Grid Charting

[DeployDuckParticipant]

Hello, I try to get grid charting working in my application.

We use the grid for years in our application and it works just fine. Now I want to upgrade our grid with the ability to show charts like in your demo: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/charting.htm

I have added a toolbar like that in your demo to add the charting- funktionality but get this error, when select some data and click on one of the charting-buttons in the toolbar:

Uncaught TypeError: Cannot read property ‘find’ of undefined
at c.<computed>._getChartDataFields (jqxgrid.chart.js?ver=80675042804:106)
at c.<computed>.createChart (jqxgrid.chart.js?ver=80675042804:185)
at t.i [as createChart] (jquery-3.5.0.js?ver=3.5.0:2)
at HTMLDivElement.<anonymous> (omp_scores_liste.js?_=1594318468694:83)
_getChartDataFields @ jqxgrid.chart.js?ver=80675042804:106
createChart @ jqxgrid.chart.js?ver=80675042804:185
i @ jquery-3.5.0.js?ver=3.5.0:2
(anonymous) @ omp_scores_liste.js?_=1594318468694:83

———————————————————————–

My code:

var grid = new jqxGrid("#hevPanel_GridID", {
            width: '100%',       
            autoheight: true,                       
            sortable: 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');
                });
            },
        
            showtoolbar: true,
            toolbarheight: 50,

            ready: function () {},
            selectionmode: 'multiplecellsadvanced',

            source: hevAdapterGridSource,       
            columns:  My.columnsarray 
        });

I’m using the current commercial version 9.1.6 of jQWidgets.
Data is an array of objects using the $.jqx.dataAdapter.
I have loaded all scripts in the same order as in the demo.

Could you please help me, what’s going wrong here.
Thanks.

[HristoParticipant]

Hello DeployDuck,

You use different approaches.
Are you sure that this instance of jqxGrid is created just once?
Also, it is not the whole example and it is difficult to test.
It seems the issue becomes from your code because the original demo works fine.
Please, provide us one simple example that demonstrates this (in jseditor or jsfiddle).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ksheerParticipant]

Dear Tech team,

Can we bind the charting grid to json. Please provide an example.

Regards
ksheer

[Author]

Posts