jQuery UI Widgets Forums Grid Grid Charting

This topic contains 5 replies, has 3 voices, and was last updated by  ksheer 3 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Grid Charting #122337

    ksheer
    Participant

    Dear Tech team,

    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/charting.htm

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

    Regards
    ksheer

    Grid Charting #122348

    admin
    Keymaster

    Hi ksheer,

    Yes, it is possible. You can look at: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/bindingtojson.htm?light. The demo shows how to bind the Grid to JSON. You just have to enable the charting feature and it will work.

    Best regards,
    Peter Stoev

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

    Grid Charting #122354

    ksheer
    Participant

    Dear jQWidgets Team,

    I have already tried the same example by removing g in the beverages.txt and I am able to bet the grid. but when I am trying to click the chart buttons I am getting following error

    2jqxgrid.chart.js:106 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.d [as createChart] (jquery-1.12.4.min.js:2:3856)
    at HTMLDivElement.<anonymous> (charting.htm:154:12)
    5jqxgrid.chart.js:106 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.d [as createChart] (jquery-1.12.4.min.js:2:3856)

    I am posting the code below for your reference

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This example shows how to create a Grid from Array data.</title>
    <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/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=”../../../jqwidgets/jqxdata.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 url = “../../sampledata/beverages.txt”;

    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘name’, type: ‘string’ },
    { name: ‘type’, type: ‘string’ },
    { name: ‘calories’, type: ‘int’ },
    { name: ‘totalfat’, type: ‘string’ },
    { name: ‘protein’, type: ‘string’ }
    ],
    id: ‘id’,
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    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: ‘Name’, datafield: ‘name’, width: 250 },
    { text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
    { text: ‘Calories’, datafield: ‘calories’, width: 180 },
    { text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
    { text: ‘Protein’, datafield: ‘protein’, minwidth: 120 }
    ]
    });

    }
    </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>

    Grid Charting #122356

    ksheer
    Participant

    Dear jQWidgets Team,

    I have already tried the same example by removing g in the beverages.txt and I am able to bet the grid. but when I am trying to click the chart buttons I am getting following error

    2jqxgrid.chart.js:106 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.d [as createChart] (jquery-1.12.4.min.js:2:3856)
    at HTMLDivElement.<anonymous> (charting.htm:154:12)
    5jqxgrid.chart.js:106 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.d [as createChart] (jquery-1.12.4.min.js:2:3856)

    I am posting the code below for your reference

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This example shows how to create a Grid from Array data.</title>
    <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/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=”../../../jqwidgets/jqxdata.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 url = “../../sampledata/beverages.txt”;

    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘name’, type: ‘string’ },
    { name: ‘type’, type: ‘string’ },
    { name: ‘calories’, type: ‘int’ },
    { name: ‘totalfat’, type: ‘string’ },
    { name: ‘protein’, type: ‘string’ }
    ],
    id: ‘id’,
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    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: ‘Name’, datafield: ‘name’, width: 250 },
    { text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
    { text: ‘Calories’, datafield: ‘calories’, width: 180 },
    { text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
    { text: ‘Protein’, datafield: ‘protein’, minwidth: 120 }
    ]
    });

    }
    </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>

    Grid Charting #122359

    ivanpeevski
    Participant

    Hi ksheer,

    Thank you for reporting this. I have opened a work item and we will work on fixing this in one of our next releases.
    As a workaround, you can avoid the issue by replacing ‘datafields’ with ‘dataFields’ in the source object.
    You can see an example here: jsfiddle

    Best Regards,
    Ivan Peevski
    jQWidgets team
    https://www.jqwidgets.com

    Grid Charting #122362

    ksheer
    Participant

    Thank you.

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

You must be logged in to reply to this topic.