jQWidgets Forums
jQuery UI Widgets › Forums › Chart › Charts reloading
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.
-
AuthorCharts reloading Posts
-
Hello,
I ave an issue with very slow performance on reloading of the chart data.
I’m using .dataBind() do start dataAdapter and make charts upon its completion.
On the 1st load Charts loading instantly , however when you hit reload button (even if data is not presented) entire DOM hangs (like it switches in sync mode) and doing something. After quite some time Charts will appear but thsi sometime may take a very long while. Below is the code for the example .. please advice.Regards
Igor<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-redmond.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.darkblue.css" type="text/css" /> <link rel="stylesheet" href="../jqw/jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <script type="text/javascript" src="../jqw/scripts/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../jqw/jqwidgets/jqxrangeselector.js"></script> <script> $(document).ready(function () { document.body.scroll = "no"; document.body.style.overflow = 'hidden'; document.height = window.innerHeight; $(document).ajaxStart(function() { console.log("AJAX!"); $('*').css({"cursor":"wait"}); }).ajaxStop(function() { console.log("AJAX COMPLETED"); $('*').css({"cursor":"default"}); }); $("#jqxTabs").jqxTabs({ height: '95vh' , width: '100%', position: 'top', animationType: 'fade' , selectionTracker: 'checked' ,theme: 'ui-redmond'}); $("#expander").jqxExpander({ toggleMode: 'none', width: '98%' , showArrow: false, theme: 'energyblue' }); $('#button1').jqxButton({ theme: 'darkblue', width: '100px' }); $('#button1').click(function () { ChartdataAdapter.dataBind(); }); // -------------------- var source = { datatype: "json", datafields: [ { name: 'Date', type: 'date'}, { name: 'D1'}, { name: 'D2'}, ], root: 'ChartData', url: 'php/data.txt' }; var ChartdataAdapter = new $.jqx.dataAdapter(source, { autoBind: false, async: true, loadComplete: function(data, status, xhr, records) { var days=Math.floor(data[0].Step / 86400); var hours=Math.floor(data[0].Step / 3600)%24; var minutes=Math.floor(data[0].Step / 60)%60; if ( days > 0) { scale = 30; } else if (hours == 1) { scale = 6; } else if (hours >1 || minutes > 1) { scale = 12; } else { scale = 30; } var settings = { title: "Some Chart", description: "Some description", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: records, categoryAxis: { dataField: 'Date', formatFunction: function (value) { var month = value.getMonth(); var day = value.getDate() ; var hours = value.getHours(); var minutes = value.getMinutes(); minutes = minutes > 9 ? minutes : '0' + minutes; return day + "-" + month + " " + hours + ":" + minutes; }, unitInterval: scale, showGridLines: true, showTickMarks: true, tickMarksColor: '#888888', gridLinesColor: '#888888', valuesOnTicks: true, textRotationAngle: 270, }, colorScheme: 'scheme05', seriesGroups: [ { type: 'spline', valueAxis: { logarithmicScale: false, displayValueAxis: true , maxValue: 150, baselineValue: 0, description: 'Y', axisSize: 'auto', tickMarksColor: '#888888', formatSettings: { decimalPlaces: 2, } }, series: [ { dataField: 'D1'}, { dataField: 'D2'}, ]}, ], }; var settings_mini = { title: " ", description: " ", showBorderLine: false, enableAnimations: false, showToolTips: false, showLegend: false, padding: { left: 0, top: 0, right: 0, bottom: 0 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 0 }, source: records, categoryAxis: { dataField: 'Date', showGridLines: false, showTickMarks: false, valuesOnTicks: false, unitInterval: 1 }, colorScheme: 'scheme05', seriesGroups: [ { type: 'line', baselineValue: 0, showLabels: false, valueAxis: { displayValueAxis: false , axisSize: 'auto', tickMarksColor: '#888888', }, series: [ { dataField: 'D1'}, { dataField: 'D2'}, ]}, ], }; $("#rangeSelector").jqxRangeSelector( { width: 800, height: 90, min: 0, max: records.length-1, range: {from: records.length-(scale+1), to: records.length}, labelsOnTicks: false, resizable: true, majorTicksInterval: scale, minorTicksInterval: 1, markersFormatFunction: function (data) { if (records[data]) { var month = records[data].Date.getMonth(); var day = records[data].Date.getDate() + "-"; var hours = records[data].Date.getHours(); var minutes = records[data].Date.getMinutes(); minutes = minutes > 9 ? minutes : '0' + minutes; return day + month + " " + hours + ":" + minutes; } }, showLabels: false }); $('#jqxChart').jqxChart(settings); $('#jqxChart_mini').jqxChart(settings_mini); }, loadError: function () { } }); ChartdataAdapter.dataBind(); }); // End of the .ready() function </script> </head> <body class='default'> <div id='jqxTabs'> <ul> <li style="margin-left: 50px;">Tab 1</li> </ul> <div> <div id="expander" style="margin-left: 1%; margin-top: 1%; margin-right: 1%"> <div>An Expander</div> <div > <!-- Body of the Expander --> <div id='jqxChart' style="margin-left: 1%; margin-top: 1%; width: 1200px; height: 400px"> </div> <div id='rangeinner' style="margin-left: 1%; margin-top: 1%; width: 98%" > <div id="rangeSelector" style="margin: 0 auto; position: relative" > <div id="jqxRangeSelectorContent"> <div id='jqxChart_mini' style="width: 800px; height: 90px; position:relative; left: 0px; top: 0px" ></div> </div> </div> </div> <input style="margin-top: 20px; margin-left: 280px;" type="button" value="button1" id="button1" /> </div> </div> </div> </div> </body> </html>Hi Igor,
The problem is obvious. On Button Click, you do not reload the Chart, you set All settings of your Existing Chart i.e 40+ properties. To refresh the dataSource of a Chart, you need to only set its “source” property and do nothing else.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHello Peter,
Thanks a lot for the feedback, I understand that I ultimately re-build charts in my particular case from scratch by hitting refresh button so I have to set all settings for them, however how it is different from a situation when I build these charts for the first time? Why 1st time built happens in a split second (we set all 40+ properties here as well, right?) and all further “re-builds” taking much longer? Also if before creating these charts for the 1st time I save original state of DIV’s of these graphs by using originalState=$(“#some_div”).html() and restore it just before refreshing by $(“#some_div”).html(originalState); (ultimately removing them) then the whole update process works like the 1st time load?
Thanks a lot for your time and help!
Regards
IgorHi Igor,
You actually do not rebuild the Charts. You set again all settings of your existing Chart. That is very different from creating a new Chart. If you want to create completely new Chart, then simply select your Chart with jQuery, call the jQuery’s remove method, append a new DIV tag and then initialize your new Chart from that DIV tag.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Yes, that makes sense if you are updating the chart’s data and keep setting the same. In my case I’m trying to create a sort of zoom function where with use of the jqxRangeSelector I will zoom in in to a small chart which will trigger change for the main chart. In this case I have to re-create the main chart with new settings (because I need to pass new scale for grid to the chart) and place it instated of the existing one that. That is the reason for re-creating the whole setup for the same chart. In this case .remove() will not be an option since it completely removes DOM element but I need to put new re-created chart with use of the same DIV. Please advice what would be then the best approach here?
Thanks
IgorHi Igor,
As I explained, remove the existing Chart’s DIV tag, create a new DIV tag using jQuery’s remove and append methods. Then create your new Chart from the new DIV tag.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.