jQWidgets Forums

Tagged: grid charting json

This topic contains 5 replies, has 3 voices, and was last updated by ksheer 2 years, 9 months ago.

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

Author

Grid Charting Posts
August 15, 2022 at 2:42 pm 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

August 16, 2022 at 9:55 am 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/

August 17, 2022 at 10:03 am 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>

August 17, 2022 at 1:26 pm 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>

August 18, 2022 at 2:40 pm 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

August 19, 2022 at 3:47 am Grid Charting #122362

ksheer
Participant

Thank you.
Author

Posts

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

You must be logged in to reply to this topic.