jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Peter,
That is true that you can return data collection all at once, but now I implemented like this. I managed to decrease load time by putting async to true, but nothing seems to change when putting autobind to true or false…
This is one of mine dataAdapters…var myURL ='data/FED_bysectors_data.php'; var source = { url: myURL, root: 'data', datatype: 'json', cache: false, datafields: [{ name: 'year', type: 'string' }, { name: 'Industry', type: 'number' }, { name: 'Transport', type: 'number' }, { name: 'Residential', type: 'number' }, { name: 'Commercial', type: 'number' }, { name: 'Agriculture', type: 'number' }, { name: 'Fishing', type: 'number' }, { name: 'Non_energy_use', type: 'number' }, { name: 'Other', type: 'number' }]; }; var dataAdapter = new $.jqx.dataAdapter(source);and what is strange I can remove whole data fields part ad the chart will still be rendered. How is that???
Hi Peter,
Thanks for quick reply. Thing is I need 2 data adapters because data for grid and chart is different. So I think that 2 request to the server is minimum in this case, or am I wrong?
My question is why the page make third request for rendering grid?
The firs two request is made to the server (trans parameter is different)
‘http://127.0.0.1:4001/data/TRA_report_data.php?action=power_output&trans=0&_=1391413288531’ (for the chart)
‘http://127.0.0.1:4001/data/TRA_report_data.php?action=power_output&trans=1&_=1391413288591’ (for the grid)But why is this request here, it is used for the grid as well….
‘http://127.0.0.1:4001/data/TRA_report_data.php?action=power_output&trans=1&filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&_=1391413288626’Thanks a lot…
Hi Dimitar,
No I havent modified css, I have just downloaded new jqwidgets 3.04 yesterday and it is still the same.
I the sample I have two grids and two chart, left grid is ok, but right grid is not working correctly after 2.columnn. I have same situation on other pages.
Thanks.
Here is data for dataAdapter
{“data”:[{“year”:”1990″,”Industry”:”10000.00″,”Transport”:”10000.00″,”Residential”:”10000.00″,”Commercial”:”10000.00″,”Agriculture”:””,”Fishing”:””,”Non_energy_use”:””,”Other”:””},{“year”:”2000″,”Industry”:”11000.00″,”Transport”:”11000.00″,”Residential”:”11000″,”Commercial”:”11000.00″,”Agriculture”:””,”Fishing”:””,”Non_energy_use”:””,”Other”:””},{“year”:”2010″,”Industry”:”12000.00″,”Transport”:”12000.00″,”Residential”:”12000.00″,”Commercial”:”12000.00″,”Agriculture”:””,”Fishing”:””,”Non_energy_use”:””,”Other”:””},{“year”:”2020″,”Industry”:”13000.00″,”Transport”:”13000.00″,”Residential”:”13000.00″,”Commercial”:”13000.00″,”Agriculture”:””,”Fishing”:””,”Non_energy_use”:””,”Other”:””}]}and data for dataAdapter2
{“data”:[{“name”:”Industry”,”1990″:”10000.00″,”2000″:”11000.00″,”2005″:””,”2010″:”12000.00″,”2015″:””,”2020″:”13000.00″,”2025″:””,”2030″:””,”2035″:””,”2040″:””,”2045″:””,”2050″:””},{“name”:”Transport”,”1990″:”10000.00″,”2000″:”11000.00″,”2005″:””,”2010″:”12000.00″,”2015″:””,”2020″:”13000.00″,”2025″:””,”2030″:””,”2035″:””,”2040″:””,”2045″:””,”2050″:””},{“name”:”Residential”,”1990″:”10000.00″,”2000″:”11000″,”2005″:””,”2010″:”12000.00″,”2015″:””,”2020″:”13000.00″,”2025″:””,”2030″:””,”2035″:””,”2040″:””,”2045″:””,”2050″:””},{“name”:”Commercial”,”1990″:”10000.00″,”2000″:”11000.00″,”2005″:””,”2010″:”12000.00″,”2015″:””,”2020″:”13000.00″,”2025″:””,”2030″:””,”2035″:””,”2040″:””,”2045″:””,”2050″:””}]}
and code
<script language="JavaScript" src="scripts/loadXML.js"></script> <script language="JavaScript" src="scripts/getXML.js"></script> <script language="JavaScript" src="scripts/getYears.js"></script> <script language="JavaScript" src="scripts/getFuels.js"></script> <script language="JavaScript" src="scripts/getSectors.js"></script> <script language="JavaScript" src="scripts/getUnit.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="javascript/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript"> $(document).ready(function () { //napuni nizove za fuels secctors years var casename = "<?php echo $_SESSION['case']; ?>"; getXML(casename); var years = getYears(); var sectors = getSectors(); var unit = getUnit(); //definisi prvi data adapter za grid i chart po sektorima var theme = 'fresh'; $("#jqxExpander1").jqxExpander({ width: '620px', height: '560px', theme: theme }); $("#jqxExpander2").jqxExpander({ width: '620px', height: '560px', theme: theme }); var myURL ='data/FED_bysectors_data.php'; var source = { url: myURL, root: 'data', datatype: 'json', cache: false, datafields: [ { name: 'year', type: 'string' }, { name: 'Industry', type: 'number' }, { name: 'Transport', type: 'number' }, { name: 'Residential', type: 'number' }, { name: 'Commercial', type: 'number' }, { name: 'Agriculture', type: 'number' }, { name: 'Fishing', type: 'number' }, { name: 'Non_energy_use', type: 'number' }, { name: 'Other', type: 'number' }, ] }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadComplete: function() { //kada se zavrsi load svih odataka pozvati funkciju koja ce provjeriti da li ima praznih celija i sakriti kolone,tj opcione kolone u ovom slcaju opcione sektore for (var key in sectors) { //console.log(key); var test = $('#jqxgrid').jqxGrid('getcellvalue', 0, key); if (test === ''){ $("#jqxgrid").jqxGrid('hidecolumn', key); } } } }); dataAdapter.dataBind(); // prepare jqxChart settings var settings_chart = { title: "Final energy demand", description: "Final energy demand by sectors", enableAnimations: true, showLegend: true, theme: theme, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'year', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: false, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme01', seriesGroups: [ { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 5, valueAxis: { unitInterval: 500, minValue: 0, maxValue: 'auto', displayValueAxis: true, description: unit, axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Industry', displayText: 'Industry'}, { dataField: 'Transport', displayText: 'Transport'}, { dataField: 'Residential', displayText: 'Residential'}, { dataField: 'Commercial', displayText: 'Commercial'}, { dataField: 'Agriculture', displayText: 'Agriculture'}, { dataField: 'Fishing', displayText: 'Fishing'}, { dataField: 'Non_energy_use', displayText: 'Non energy use'}, { dataField: 'Other', displayText: 'Other'} ] } ] }; //kraj settinga za chart // setup the chart $('#jqxChart').jqxChart(settings_chart); //settings za grid i incijalizacija $("#jqxgrid").jqxGrid( { autoheight: true, autorowheight: true, width: '600px', theme: theme, // showstatusbar: true, // showaggregates: true, source: dataAdapter, editable: true, selectionmode: 'singlecell', //kolone sa validacijom columns: [ { text: unit, datafield: 'year', width: 120, pinned: true }, { text: 'Industry', datafield: 'Industry', width: 120, aggregates: ['sum'],cellsalign: 'right',columntype: 'numberinput', cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Transport', datafield: 'Transport', width: 120, aggregates: ['sum'],cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Residential', datafield: 'Residential', width: 120, aggregates: ['sum'],cellsalign: 'right',columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Commercial', datafield: 'Commercial', width: 120, aggregates: ['sum'],cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Agriculture', datafield: 'Agriculture', width: 120, aggregates: ['sum'],cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Fishing', datafield: 'Fishing', width: 120, aggregates: ['sum'],cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Non energy use', datafield: 'Non_energy_use', width: 120, aggregates: ['sum'],cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: 'Other', datafield: 'Other', width: 120, aggregates: ['sum'],cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } } ] });//kraj inicijalizacije i settinga za grid //nakon zavrsenog edita grida pozovi ajax za update xml file $("#jqxgrid").on('cellendedit', function (event) { var args = event.args; var sector = args.datafield; var year = args.rowindex; var year1 = $("#jqxgrid").jqxGrid("getcellvalue", year, "year"); var value = args.value; rowdata = new Object(); rowdata['action'] = 'saveData'; rowdata['year'] = year1; rowdata['sector'] = sector; rowdata['value'] = value; $.ajax({ url: myURL, dataType: 'json', type: 'POST', data: rowdata, complete: function (data) { $('#jqxExpander2').jqxExpander({expanded: true }); dataAdapter.dataBind(); dataAdapter2.dataBind(); $('#jqxChart').jqxChart('refresh'); $('#jqxChart_trans').jqxChart('refresh'); } }); //kraj ajax-a }); //kraj cell edit-a //drugi data adapter za transponirane vrijednosti, po godinama var myURL2 ='data/FED_bysectors_data.php?trans=1'; var sourcetrans = { url: myURL2, root: 'data', datatype: 'json', cache: false, datafields: [ { name: 'name', type: 'string' }, { name: '1990', type: 'number' }, { name: '2000', type: 'number' }, { name: '2005', type: 'number' }, { name: '2010', type: 'number' }, { name: '2015', type: 'number' }, { name: '2020', type: 'number' }, { name: '2025', type: 'number' }, { name: '2030', type: 'number' }, { name: '2035', type: 'number' }, { name: '2040', type: 'number' }, { name: '2045', type: 'number' }, { name: '2050', type: 'number' }, ] }; var dataAdapter2 = new $.jqx.dataAdapter(sourcetrans, { async: false, autoBind: true, loadComplete: function() { //kada se zavrsi load svih odataka pozvati funkciju koja ce provjeriti da li ima praznih celija i sakriti kolone samo za opcione godine u ovom slucaju for (var key in years) { //console.log(key); var test = $('#jqxgrid_trans').jqxGrid('getcellvalue', 0, key); if (test === ''){ $("#jqxgrid_trans").jqxGrid('hidecolumn', key); } } } }); dataAdapter2.dataBind(); //setting za transponirani chart var settings_charttrans = { title: "Final energy demand", description: "Final energy demand by sectors", enableAnimations: true, showLegend: true, theme: theme, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter2, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'name', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: false, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', columnsGapPercent: 10, seriesGapPercent: 5, valueAxis: { unitInterval: 100, minValue: 0, maxValue: 'auto', displayValueAxis: true, description: unit, axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: '1990', displayText: '1990'}, { dataField: '2000', displayText: '2000'}, { dataField: '2005', displayText: '2005'}, { dataField: '2010', displayText: '2010'}, { dataField: '2015', displayText: '2015'}, { dataField: '2020', displayText: '2020'}, { dataField: '2025', displayText: '2025'}, { dataField: '2030', displayText: '2030'}, { dataField: '2035', displayText: '2035'}, { dataField: '2040', displayText: '2040'}, { dataField: '2045', displayText: '2045'}, { dataField: '2050', displayText: '2050'} ] } ] }; //kraj settinga za trans chart // setup the chart $('#jqxChart_trans').jqxChart(settings_charttrans); //setting i inicijalizacija za transponirani grid po godinamma $("#jqxgrid_trans").jqxGrid( { autoheight: true, autorowheight: true, width: '600px', theme: theme, source: dataAdapter2, editable: true, selectionmode: 'singlecell', columns: [ { text: unit, datafield: 'name', width: 120, pinned: true }, { text: '1990', datafield: '1990', width: 120,cellsalign: 'right', columntype: 'numberinput', cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2000', datafield: '2000', width: 120,cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2005', datafield: '2005', width: 120,cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2010', datafield: '2010', width: 120,cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2015', datafield: '2015', width: 120,cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2020', datafield: '2020', width: 120, cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2025', datafield: '2025', width: 120, columntype: 'numberinput',cellsalign: 'right',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2030', datafield: '2030', width: 120, cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2035', datafield: '2035', width: 120,cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2040', datafield: '2040', width: 120,cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2045', datafield: '2045', width: 120, cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } }, { text: '2050', datafield: '2050', width: 120, cellsalign: 'right', columntype: 'numberinput',cellsformat: 'd2', initeditor: function (row, cellvalue, editor) {editor.jqxNumberInput({ decimalDigits: 2 }); }, validation: function (cell, value) { if (value < 0) { return { result: false, message: "Value should be positive number!" }; } return true; } } ] }); //kraj inicijalizacije i settinga za trans grid //update za transpponirani grid $("#jqxgrid_trans").on('cellendedit', function (event) { var args = event.args; var godina = args.datafield; var sektor = args.rowindex; var sektor1 = $("#jqxgrid_trans").jqxGrid("getcellvalue", sektor, "name"); var value = args.value; rowdata = new Object(); rowdata['action'] = 'saveData'; rowdata['sector'] = sektor1; rowdata['year'] = godina; rowdata['value'] = value; $.ajax({ url: myURL, dataType: 'json', type: 'POST', data: rowdata, complete: function (data) { $('#jqxExpander1').jqxExpander({expanded: true }); dataAdapter.dataBind(); dataAdapter2.dataBind(); $('#jqxChart_trans').jqxChart('refresh'); $('#jqxChart').jqxChart('refresh'); } }); //krj ajaxa });//kraj cell edita }); </script> <div id = "page_title"> <p>Final energy demand-by sectors, case name:<?php if (isset($_SESSION['case'])) { echo $_SESSION['case']; } else { echo "Create new or edit existing case!"; } ?> </p> </div> <table> <tr> <td> <div id='jqxExpander1'> <div>Final energy demand by sectors</div> <div> <div id='jqxChart' style="width:600px; height:280px;"></div> <div id="jqxgrid"></div> </div> </div> </td> <td> <div id='jqxExpander2'> <div>Final energy demand by years</div> <div> <div id='jqxChart_trans' style="width:600px; height:280px;"></div> <div id="jqxgrid_trans"></div> </div> </div> </td> </tr> </table>November 4, 2013 at 6:33 pm in reply to: jqx chart refresh not working in expander jqx chart refresh not working in expander #31893Thanks Peter!
Now it works. I just make expander visible and than refresh.
ThanksNovember 1, 2013 at 1:47 pm in reply to: jqx chart not refreshed in extender jqx chart not refreshed in extender #31784It is actually jqx expander, not extender as I wrote, but the problem is the same
Sorry.October 25, 2013 at 10:30 am in reply to: How to hide serie in jqxchart How to hide serie in jqxchart #31324Hi Dimitar,
That is true and it is working, but in my case, I have all 0 for (e.g. Swimming), and it is not plotted in the chart but it is still in legend. I would like not to show it at all when it is all 0.
Thanks.October 23, 2013 at 2:04 pm in reply to: dataAdapter data undefined dataAdapter data undefined #31262Hej,
json data get returned in array,so I was missing this$(“#casename”).jqxInput(‘val’, records[0].name);
Sorry for disturbing you, but I lost couple of hours with this one.
Thanks anyway!!!
October 23, 2013 at 6:58 am in reply to: Validator – jquery problem Validator – jquery problem #31238Thanks Peter,
Acctually jquery 1.10. was problem. The select method has been deprecated in favor of just updating the active option.
http://jqueryui.com/upgrade-guide/1.10/#tabs
http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method
So when I updated from 1.9. to 1.10 it started giving this errors.
jqx validator works great btw!Best regards
Thank you Dimitar,
What I actually did is, I created new source (json data file) with transposed values and put it to grid.
Best -
AuthorPosts