jQuery UI Widgets Forums Chart chart

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    chart Posts
  • 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>

    chart #122314

    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/

    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

    chart #122325

    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/

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

You must be logged in to reply to this topic.