jQWidgets Forums
Forum Replies Created
-
Author
-
August 9, 2018 at 3:18 pm in reply to: Evaluation a GET request on submit Evaluation a GET request on submit #101471
I have validate code execution by the following code…and it works ..meaning console.log( test ); printed the string defined in function tstVar,
btn.on('click', function () { sampleForm.jqxForm('submit',window.location.href,'GET'); console.log(window.location.search) ; var test = tstVar(); console.log( test ); var text = getUrlVars()["textBoxValue"]; var dropdown = getUrlVars()["dropdownValue"]; console.log( text ); console.log( dropdown); }); }); function tstVar() { var t = "dfsdf"; return t; }August 9, 2018 at 1:48 pm in reply to: Evaluation a GET request on submit Evaluation a GET request on submit #101467well, many ways lead obviously to Rome ;-)…and many thanks for providing you code snippet!
Indeed, I want to stay onto the page after submit. At submit and extraction of the GET values I would like to publish MQTT messages towards an ARDUINO platform ( this is not provided in the code to reduce post length).Honestly, I am not so familiar with Web programming, and thus, dealing with AJAX is an additional grade of complexity for me..now.
So I would like firstly to stick closely to the the demo examples which at present are not so well documented regarding the form widget.I googled a bit and
window.location.searchshould hold the string after the question mark…but when using that withconsole.log(window.location.search)So the question remains, which is the variable/function that holds after submit the url with the GET parameters?
Kr,
MichaelAugust 16, 2017 at 3:10 pm in reply to: toolTipFormatFunction / rangeSelector for Multiline Chart toolTipFormatFunction / rangeSelector for Multiline Chart #95506Hi Hristo,
well I need to checkout your proposal on the data structure. Many thanks for that hint.
Most likely I will count the sensor pulses for a dedciated intervall (ie. every 10min) and
issue format as you have proposed…Okay, then we have resolved the toolTip isse…very good!
However, the support of dataFields) in rangeSelectoon is strongly appreciated!
Kr,
Michael
August 15, 2017 at 2:57 pm in reply to: toolTipFormatFunction / rangeSelector for Multiline Chart toolTipFormatFunction / rangeSelector for Multiline Chart #95483Hi Hristo,
many thanks for yur evaluation…
It is possible to consider the display of more than one datafield fo the roadmap? Would be great an, as described imo senseful!I have checked out your code and it works in my environment. The only difference is now the data used for the chart.
Still with my generated data is does not work, which is very strange to me…
Now, I replaced your data with mine…the result is: no chart is shown at all, even more strange as with url: ‘data2.php’ lines are shown!I am asking you kindly to dig again into the code:
<!DOCTYPE HTML> <html lang="en"> <head> <title id='Description'>JavaScript Chart Range Selector Example</title> <meta name="description" content="This is an example of Javascript Chart Range Selector and Zooming." /> <link rel="stylesheet" href="../jquery/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jquery/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxchart.rangeselector.js"></script> <script type="text/javascript"> $(document).ready(function () { var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']; var data = [{"current":"4","Date":"2017-08-06 00:00:00"},{"current":"3","Date":"2017-08-06 00:10:00"},{"current":"3","Date":"2017-08-06 00:20:00"}, {"current":"3","Date":"2017-08-06 00:30:00"},{"current":"2","Date":"2017-08-06 00:40:00"},{"current":"2","Date":"2017-08-06 00:50:00"}, {"current":"2","Date":"2017-08-06 01:00:00"},{"current":"1","Date":"2017-08-06 01:10:00"},{"current":"2","Date":"2017-08-06 01:20:00"}, {"current":"2","Date":"2017-08-06 01:30:00"},{"current":"1","Date":"2017-08-06 01:40:00"},{"current":"2","Date":"2017-08-06 01:50:00"}, {"current":"2","Date":"2017-08-06 02:00:00"},{"current":"1","Date":"2017-08-06 02:10:00"},{"current":"2","Date":"2017-08-06 02:20:01"}, {"current":"1","Date":"2017-08-06 02:30:01"},{"current":"2","Date":"2017-08-06 02:40:01"},{"current":"2","Date":"2017-08-06 02:50:01"}, {"current":"1","Date":"2017-08-06 03:00:01"},{"current":"2","Date":"2017-08-06 03:10:01"},{"current":"1","Date":"2017-08-06 03:20:01"}, {"current":"2","Date":"2017-08-06 03:30:01"},{"current":"2","Date":"2017-08-06 03:40:01"},{"current":"1","Date":"2017-08-06 03:50:01"}, {"current":"2","Date":"2017-08-06 04:00:01"},{"current":"1","Date":"2017-08-06 04:10:01"},{"current":"2","Date":"2017-08-06 04:20:01"}, {"current":"1","Date":"2017-08-06 04:30:01"},{"current":"1","Date":"2017-08-06 04:40:01"},{"current":"2","Date":"2017-08-06 04:50:01"}, {"current":"2","Date":"2017-08-06 05:00:01"},{"current":"1","Date":"2017-08-06 05:10:01"},{"current":"2","Date":"2017-08-06 05:20:01"}, {"current":"1","Date":"2017-08-06 05:30:01"},{"current":"2","Date":"2017-08-06 05:40:01"},{"current":"1","Date":"2017-08-06 05:50:01"}, {"current":"1","Date":"2017-08-06 06:00:01"},{"current":"2","Date":"2017-08-06 06:10:01"},{"current":"1","Date":"2017-08-06 06:20:01"}, {"current":"2","Date":"2017-08-06 06:30:01"},{"current":"1","Date":"2017-08-06 06:40:01"},{"current":"4","Date":"2017-08-06 06:50:02"}, {"current":"4","Date":"2017-08-06 07:00:02"},{"current":"1","Date":"2017-08-06 07:10:02"},{"current":"3","Date":"2017-08-06 07:20:02"}, {"current":"2","Date":"2017-08-06 07:30:02"},{"current":"2","Date":"2017-08-06 07:40:02"},{"current":"2","Date":"2017-08-06 07:50:02"}, {"current":"4","Date":"2017-08-06 08:00:02"},{"current":"2","Date":"2017-08-06 08:10:02"},{"current":"2","Date":"2017-08-06 08:20:02"}, {"current":"2","Date":"2017-08-06 08:30:02"},{"current":"3","Date":"2017-08-06 08:40:02"},{"current":"2","Date":"2017-08-06 08:50:02"}, {"current":"2","Date":"2017-08-06 09:00:02"},{"current":"4","Date":"2017-08-06 09:10:02"},{"current":"6","Date":"2017-08-06 09:30:00"}, {"current":"3","Date":"2017-08-06 09:40:00"},{"current":"1","Date":"2017-08-06 10:00:00"},{"current":"32","Date":"2017-08-06 10:10:00"}, {"current":"17","Date":"2017-08-06 10:20:00"},{"current":"18","Date":"2017-08-06 10:30:00"},{"current":"12","Date":"2017-08-06 10:40:00"}, {"current":"23","Date":"2017-08-06 10:50:00"},{"current":"20","Date":"2017-08-06 11:00:00"},{"current":"5","Date":"2017-08-06 11:10:00"}, {"current":"6","Date":"2017-08-06 11:20:00"},{"current":"6","Date":"2017-08-06 11:30:00"},{"current":"5","Date":"2017-08-06 11:40:00"}, {"current":"5","Date":"2017-08-06 11:50:00"},{"current":"4","Date":"2017-08-06 12:00:00"},{"current":"3","Date":"2017-08-06 12:10:00"}, {"current":"5","Date":"2017-08-06 12:20:00"},{"current":"7","Date":"2017-08-06 12:30:00"},{"current":"4","Date":"2017-08-06 12:40:00"}, {"current":"5","Date":"2017-08-06 12:50:00"},{"current":"5","Date":"2017-08-06 13:00:00"},{"current":"3","Date":"2017-08-06 13:10:00"}, {"current":"6","Date":"2017-08-06 13:20:00"},{"current":"8","Date":"2017-08-06 13:30:00"},{"current":"6","Date":"2017-08-06 13:40:00"}, {"current":"15","Date":"2017-08-06 13:50:00"},{"current":"13","Date":"2017-08-06 14:00:00"},{"current":"11","Date":"2017-08-06 14:10:00"}, {"current":"11","Date":"2017-08-06 14:20:00"},{"current":"9","Date":"2017-08-06 14:30:00"},{"current":"17","Date":"2017-08-06 14:40:00"}, {"current":"32","Date":"2017-08-06 14:50:00"},{"current":"22","Date":"2017-08-06 15:00:00"},{"current":"10","Date":"2017-08-06 15:10:00"}, {"current":"5","Date":"2017-08-06 15:20:01"},{"current":"15","Date":"2017-08-06 15:30:01"},{"current":"4","Date":"2017-08-06 15:40:00"}, {"current":"6","Date":"2017-08-06 15:50:00"},{"current":"6","Date":"2017-08-06 16:00:00"},{"current":"5","Date":"2017-08-06 16:10:00"}, {"current":"5","Date":"2017-08-06 16:20:00"},{"current":"4","Date":"2017-08-06 16:30:00"},{"current":"4","Date":"2017-08-06 16:40:00"}, {"current":"5","Date":"2017-08-06 16:50:00"},{"current":"4","Date":"2017-08-06 17:00:00"},{"current":"5","Date":"2017-08-06 17:10:00"}, {"current":"13","Date":"2017-08-06 17:20:00"},{"current":"13","Date":"2017-08-06 17:30:00"},{"current":"7","Date":"2017-08-06 17:40:00"}, {"current":"4","Date":"2017-08-06 17:50:00"},{"current":"7","Date":"2017-08-06 18:00:00"},{"current":"7","Date":"2017-08-06 18:10:00"}, {"current":"8","Date":"2017-08-06 18:20:00"},{"current":"7","Date":"2017-08-06 18:30:00"},{"current":"7","Date":"2017-08-06 18:40:00"}, {"current":"7","Date":"2017-08-06 18:50:00"},{"current":"7","Date":"2017-08-06 19:00:00"},{"current":"7","Date":"2017-08-06 19:10:00"}, {"current":"8","Date":"2017-08-06 19:20:00"},{"current":"8","Date":"2017-08-06 19:30:00"},{"current":"9","Date":"2017-08-06 19:40:00"}, {"current":"7","Date":"2017-08-06 19:50:00"},{"current":"11","Date":"2017-08-06 20:00:00"},{"current":"6","Date":"2017-08-06 20:10:00"}, {"current":"6","Date":"2017-08-06 20:20:00"},{"current":"10","Date":"2017-08-06 20:30:00"},{"current":"9","Date":"2017-08-06 20:40:00"}, {"current":"6","Date":"2017-08-06 20:50:00"},{"current":"5","Date":"2017-08-06 21:00:00"},{"current":"5","Date":"2017-08-06 21:10:00"}, {"current":"12","Date":"2017-08-06 21:20:00"},{"current":"6","Date":"2017-08-06 21:30:00"},{"current":"5","Date":"2017-08-06 21:40:00"}, {"current":"6","Date":"2017-08-06 21:50:00"},{"current":"5","Date":"2017-08-06 22:00:00"},{"current":"6","Date":"2017-08-06 22:10:00"}, {"current":"5","Date":"2017-08-06 22:20:00"},{"current":"26","Date":"2017-08-06 22:30:00"},{"current":"11","Date":"2017-08-06 22:40:00"}, {"current":"24","Date":"2017-08-06 22:50:00"},{"current":"6","Date":"2017-08-06 23:00:01"},{"current":"25","Date":"2017-08-06 23:10:01"}, {"current":"26","Date":"2017-08-06 23:20:01"},{"current":"4","Date":"2017-08-06 23:30:01"},{"current":"3","Date":"2017-08-06 23:40:01"}, {"current":"4","Date":"2017-08-06 23:50:01"},{"current":"4","Date":"2017-08-07 00:00:01"},{"current":"4","Date":"2017-08-07 00:10:01"}, {"current":"4","Date":"2017-08-07 00:20:01"},{"current":"3","Date":"2017-08-07 00:30:01"},{"current":"3","Date":"2017-08-07 00:40:01"}, {"current":"4","Date":"2017-08-07 00:50:01"},{"current":"4","Date":"2017-08-07 01:00:01"},{"current":"4","Date":"2017-08-07 01:10:01"}, {"current":"3","Date":"2017-08-07 01:20:01"},{"current":"4","Date":"2017-08-07 01:30:01"},{"current":"4","Date":"2017-08-07 01:40:01"}, {"current":"3","Date":"2017-08-07 01:50:01"},{"current":"4","Date":"2017-08-07 02:00:01"},{"current":"4","Date":"2017-08-07 02:10:01"}, {"current":"3","Date":"2017-08-07 02:20:01"},{"current":"4","Date":"2017-08-07 02:30:01"},{"current":"4","Date":"2017-08-07 02:40:01"}, {"current":"4","Date":"2017-08-07 02:50:01"},{"current":"3","Date":"2017-08-07 03:00:01"},{"current":"4","Date":"2017-08-07 03:10:01"}, {"current":"3","Date":"2017-08-07 03:20:01"},{"current":"4","Date":"2017-08-07 03:30:01"},{"current":"4","Date":"2017-08-07 03:40:01"}, {"current":"4","Date":"2017-08-07 03:50:01"},{"current":"4","Date":"2017-08-07 04:00:01"},{"current":"3","Date":"2017-08-07 04:10:01"}, {"current":"4","Date":"2017-08-07 04:20:01"},{"current":"3","Date":"2017-08-07 04:30:01"},{"current":"4","Date":"2017-08-07 04:40:02"}, {"current":"4","Date":"2017-08-07 04:50:02"},{"current":"3","Date":"2017-08-07 05:00:02"},{"current":"4","Date":"2017-08-07 05:10:02"}, {"current":"4","Date":"2017-08-07 05:20:02"},{"current":"4","Date":"2017-08-07 05:30:02"},{"current":"3","Date":"2017-08-07 05:40:02"}, {"current":"4","Date":"2017-08-07 05:50:02"},{"current":"5","Date":"2017-08-07 06:00:02"},{"current":"7","Date":"2017-08-07 06:10:02"}, {"current":"5","Date":"2017-08-07 06:20:02"},{"current":"4","Date":"2017-08-07 06:30:02"},{"current":"5","Date":"2017-08-07 06:40:02"}, {"current":"8","Date":"2017-08-07 06:50:02"},{"current":"7","Date":"2017-08-07 07:00:02"},{"current":"4","Date":"2017-08-07 07:10:02"}, {"current":"4","Date":"2017-08-07 07:20:02"},{"current":"5","Date":"2017-08-07 07:30:02"},{"current":"3","Date":"2017-08-07 07:40:02"}, {"current":"4","Date":"2017-08-07 07:50:02"},{"current":"4","Date":"2017-08-07 08:00:02"},{"current":"6","Date":"2017-08-07 08:10:02"}, {"current":"6","Date":"2017-08-07 08:20:02"},{"current":"6","Date":"2017-08-07 08:30:02"},{"current":"5","Date":"2017-08-07 08:40:02"}, {"current":"6","Date":"2017-08-07 08:50:02"},{"current":"6","Date":"2017-08-07 09:00:02"},{"current":"7","Date":"2017-08-07 09:10:02"}, {"current":"6","Date":"2017-08-07 09:20:02"},{"current":"1","Date":"2017-08-07 09:30:00"},{"current":"3","Date":"2017-08-07 09:40:00"}, {"current":"12","Date":"2017-08-07 09:50:00"},{"current":"17","Date":"2017-08-07 10:00:00"},{"current":"16","Date":"2017-08-07 10:10:00"}, {"current":"12","Date":"2017-08-07 10:20:00"},{"current":"8","Date":"2017-08-07 10:30:00"},{"current":"8","Date":"2017-08-07 10:40:00"}, {"current":"4","Date":"2017-08-07 10:50:00"},{"current":"4","Date":"2017-08-07 11:00:00"},{"current":"4","Date":"2017-08-07 11:10:00"}, {"current":"4","Date":"2017-08-07 11:20:00"},{"current":"4","Date":"2017-08-07 11:30:00"},{"current":"5","Date":"2017-08-07 11:40:00"}, {"current":"7","Date":"2017-08-07 11:50:00"},{"current":"7","Date":"2017-08-07 12:00:00"},{"current":"7","Date":"2017-08-07 12:10:00"}, {"current":"7","Date":"2017-08-07 12:20:00"},{"current":"7","Date":"2017-08-07 12:30:00"},{"current":"7","Date":"2017-08-07 12:40:00"}, {"current":"7","Date":"2017-08-07 12:50:00"},{"current":"6","Date":"2017-08-07 13:20:00"},{"current":"1","Date":"2017-08-07 13:50:00"}, {"current":"1","Date":"2017-08-08 17:10:00"},{"current":"7","Date":"2017-08-08 17:20:00"},{"current":"6","Date":"2017-08-08 17:30:00"}, {"current":"7","Date":"2017-08-08 17:40:00"},{"current":"7","Date":"2017-08-08 17:50:00"},{"current":"6","Date":"2017-08-08 18:00:00"}, {"current":"1","Date":"2017-08-08 18:10:00"},{"current":"3","Date":"2017-08-08 18:20:00"},{"current":"7","Date":"2017-08-08 18:30:00"}, {"current":"3","Date":"2017-08-08 18:40:00"},{"current":"1","Date":"2017-08-08 18:50:00"},{"current":"4","Date":"2017-08-08 19:00:00"}, {"current":"1","Date":"2017-08-08 19:20:00"},{"current":"2","Date":"2017-08-08 19:40:00"},{"current":"3","Date":"2017-08-08 19:50:00"}, {"current":"7","Date":"2017-08-08 20:00:00"},{"current":"7","Date":"2017-08-08 20:20:00"},{"water":"10","Date":"2017-08-06 00:00:00"}, {"water":"12","Date":"2017-08-06 00:30:00"},{"water":"7","Date":"2017-08-06 07:00:02"},{"water":"14","Date":"2017-08-06 08:00:02"}, {"water":"1","Date":"2017-08-06 08:30:02"},{"water":"15","Date":"2017-08-06 08:40:02"},{"water":"3","Date":"2017-08-06 08:50:02"}, {"water":"3","Date":"2017-08-06 09:00:02"},{"water":"3","Date":"2017-08-06 09:10:02"},{"water":"19","Date":"2017-08-06 09:30:00"}, {"water":"10","Date":"2017-08-06 10:10:00"},{"water":"1","Date":"2017-08-06 10:20:00"},{"water":"3","Date":"2017-08-06 10:30:00"}, {"water":"3","Date":"2017-08-06 10:40:00"},{"water":"5","Date":"2017-08-06 10:50:00"},{"water":"3","Date":"2017-08-06 11:00:00"}, {"water":"14","Date":"2017-08-06 11:10:00"},{"water":"23","Date":"2017-08-06 11:20:00"},{"water":"18","Date":"2017-08-06 11:30:00"}, {"water":"8","Date":"2017-08-06 11:40:00"},{"water":"18","Date":"2017-08-06 11:50:00"},{"water":"6","Date":"2017-08-06 12:00:00"}, {"water":"2","Date":"2017-08-06 12:10:00"},{"water":"6","Date":"2017-08-06 12:20:00"},{"water":"1","Date":"2017-08-06 13:00:00"}, {"water":"10","Date":"2017-08-06 13:10:00"},{"water":"2","Date":"2017-08-06 13:20:00"},{"water":"18","Date":"2017-08-06 13:30:00"}, {"water":"35","Date":"2017-08-06 13:40:00"},{"water":"13","Date":"2017-08-06 13:50:00"},{"water":"1","Date":"2017-08-06 14:00:00"}, {"water":"1","Date":"2017-08-06 14:10:00"},{"water":"5","Date":"2017-08-06 14:20:00"},{"water":"8","Date":"2017-08-06 14:30:00"}, {"water":"3","Date":"2017-08-06 14:40:00"},{"water":"8","Date":"2017-08-06 14:50:00"},{"water":"7","Date":"2017-08-06 15:00:00"}, {"water":"20","Date":"2017-08-06 15:30:01"},{"water":"17","Date":"2017-08-06 15:40:00"},{"water":"27","Date":"2017-08-06 15:50:00"}, {"water":"1","Date":"2017-08-06 16:00:00"},{"water":"12","Date":"2017-08-06 17:10:00"},{"water":"7","Date":"2017-08-06 17:30:00"}, {"water":"8","Date":"2017-08-06 17:40:00"},{"water":"8","Date":"2017-08-06 17:50:00"},{"water":"10","Date":"2017-08-06 18:00:00"}, {"water":"24","Date":"2017-08-06 19:10:00"},{"water":"1","Date":"2017-08-06 19:20:00"},{"water":"9","Date":"2017-08-06 19:30:00"}, {"water":"8","Date":"2017-08-06 19:40:00"},{"water":"1","Date":"2017-08-06 19:50:00"},{"water":"2","Date":"2017-08-06 20:00:00"}, {"water":"1","Date":"2017-08-06 20:10:00"},{"water":"8","Date":"2017-08-06 20:20:00"},{"water":"1","Date":"2017-08-06 21:20:00"}, {"water":"1","Date":"2017-08-06 21:30:00"},{"water":"4","Date":"2017-08-06 22:20:00"},{"water":"18","Date":"2017-08-06 22:30:00"}, {"water":"2","Date":"2017-08-06 22:50:00"},{"water":"1","Date":"2017-08-06 23:00:00"},{"water":"3","Date":"2017-08-06 23:10:01"}, {"water":"19","Date":"2017-08-06 23:20:01"},{"water":"1","Date":"2017-08-06 23:40:01"},{"water":"6","Date":"2017-08-07 06:00:02"}, {"water":"2","Date":"2017-08-07 06:10:02"},{"water":"8","Date":"2017-08-07 06:40:02"},{"water":"19","Date":"2017-08-07 06:50:02"}, {"water":"4","Date":"2017-08-07 07:00:02"},{"water":"4","Date":"2017-08-07 07:20:02"},{"water":"6","Date":"2017-08-07 07:30:02"}, {"water":"6","Date":"2017-08-07 07:40:02"},{"water":"8","Date":"2017-08-07 07:50:02"},{"water":"15","Date":"2017-08-07 10:40:00"}, {"water":"9","Date":"2017-08-07 11:30:00"},{"water":"16","Date":"2017-08-07 12:00:00"},{"water":"23","Date":"2017-08-07 13:20:00"}, {"water":"1","Date":"2017-08-08 18:50:00"},{"water":"4","Date":"2017-08-08 20:00:00"} ]; var source = { datatype: "json", datafields: [ { name: 'Date', type: 'date', map: 'month' }, { name: 'water', type: 'int', map: 'min' }, { name: 'current', type: 'int', map: 'avg' } ], localdata: data //url: 'data2.php' }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function () { }, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) { var dataItem = dataAdapter.records[itemIndex]; return '<div style="text-align:left"><b>Date: ' + categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() + '</b><br />Pulses: ' + dataItem.current + '</div>'; }; var settings = { title: "Sensor Monitoring", description: "1-Aug'17 - 31-Dez'17", enableAnimations: true, animationDuration: 1500, enableCrosshairs: true, showLegend: true, padding: { left: 5, top: 5, right: 50, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Date', minValue: '08/01/2017', maxValue: '12/31/2017', type: 'date', baseUnit: 'day', autoBind: true, labels: { formatFunction: function (value) { return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2); } }, rangeSelector: { size: 60, padding: { left: 0, right: 0, top: 0, bottom: 0 }, minValue: new Date(2017, 7, 1), backgroundColor: 'white', dataField: 'current', baseUnit: 'month', gridLines: { visible: true }, serieType: 'area', labels: { formatFunction: function (value) { return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2); } } } }, colorScheme: 'scheme01', seriesGroups: [ { type: 'line', toolTipFormatFunction: toolTipCustomFormatFn, valueAxis: { displayValueAxis: true, description: 'Counter', axisSize: 'auto', tickMarksColor: '#888888', unitInterval: 10, minValue: 0, maxValue: 40, }, series: [ { dataField: 'water', displayText: 'Wasser' }, { dataField: 'current', displayText: 'Strom' }, //{ dataField: 'gas', displayText: 'Gas' } // you do not set such datafield in the DataAdapter's source ] }, ] }; // setup the chart $('#chartContainer').jqxChart(settings).on ( 'rangeSelectionChanging', function (event) { var args = event.args; args.instance.description = args.minValue.getDate() + '-' + months[args.minValue.getMonth()] + '\'' + args.minValue.getFullYear().toString().substring(2) + " - " + args.maxValue.getDate() + '-' + months[args.maxValue.getMonth()] + '\'' + args.maxValue.getFullYear().toString().substring(2); } ); }); </script> </head> <body class='default'> <div id='chartContainer' style="width:850px; height:500px"> </div> <div class="example-description"> <br /> <h2>Description</h2> <br /> This is an example of JavaScript chart with range column series. There are two series shown – rangecolumn and spline. The toolTipCustomFormatFn function is used to format the tool tip. </div> </body> </html>August 14, 2017 at 5:37 pm in reply to: toolTipFormatFunction / rangeSelector for Multiline Chart toolTipFormatFunction / rangeSelector for Multiline Chart #95469…will that be a new feature or can someone give me a hint to code that
A) toolTip is that constellation (see above example) is shown for each single line
B) rangeSelector shows up area of each line along the timeline and not only a single predefined (dataField) oneMany thx in advance!
Michael
August 14, 2017 at 12:27 pm in reply to: toolTipFormatFunction / rangeSelector for Multiline Chart toolTipFormatFunction / rangeSelector for Multiline Chart #95462Hi Hristo,
unfortunately, the issue is still open (at least for my challenge
).
Please checkout the link referenced within my last post and checkout issues A) and B)…I think these once a quite traceable
with my description.Many thanks!
Michael
August 14, 2017 at 7:43 am in reply to: toolTipFormatFunction / rangeSelector for Multiline Chart toolTipFormatFunction / rangeSelector for Multiline Chart #95453Hi there,
here is another example provided by a jqwidget staff member that outlines the issue:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_events_range_selector.htm?lightAs you can experience
A) toolTip is only shown for the ‘blue-line’ chart, and not for the ‘green-area’ chart….
B) rangeSelector covers only data of the ‘blue-line’…think of the situation where ‘blue-line’ has no data, but ‘green’-area..
You wouldn’t zoom into that part as you assume there are no data at all!Thus, my proposal is to have all drawn lines, etc. in the chart section also reflected into the rangeSelector area…may the option dataField must be adaopted to take one or more data series…
Kr, Michael
August 14, 2017 at 5:15 am in reply to: JSON data vs. series definition JSON data vs. series definition #95452resolved by just adding any potential name at datafiels setting…
August 14, 2017 at 5:12 am in reply to: variable source + data extraction variable source + data extraction #95451issue solved meanwhile;
A) data appropriate prepared at data extraction from sql db
B) that resolved the charting issue, tooAugust 12, 2017 at 4:29 pm in reply to: variable source + data extraction variable source + data extraction #95448again…some adaptations:
delivered json format:
data3.php: [{"Sensor":"test","Date":"2017-08-01","Counter":"12"},{"Sensor":"test","Date":"2017-08-05","Counter":"12"}]code that prepares data for charting:
var sensorData = []; var sDataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function() { var records= sDataAdapter.records; for (var i = 0; i < records.length; i++) { sensorData.push( { [records[i]['Sensor']]:records[i]['Counter'], 'Date':records[i]['Date']} ); } });sensorData: [{“current”:”12″,”Date”:”2017-08-01″},{“water”:”30″,”Date”:”2017-08-05″}
Now, there is a problem when charting as no lines are drawn!
code in use:
`var settings = {
title: “TEST”,
showLegend: true,
source: sensorData,
xAxis:
{
dataField: ‘Date’
},
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘stackedline’,
source: sensorData,
series: [
{ dataField: ‘water’, displayText: ‘Water’}
]
{
type: ‘stackedline’,
source: sensorData,
series: [
{ dataField: ‘current’, displayText: ‘Current’}
]
}]
};// setup the chart
$(‘#chartContainer’).jqxChart(settings);HiPaul,
have you resolved your issue?
Can you please post your solution cause I am facing the same challenge regarding the json format.
Many thanks!
MichaelAugust 12, 2017 at 11:40 am in reply to: variable source + data extraction variable source + data extraction #95446…just did some search in the forum and stumbled across:
$(document).ready(function () { var source = { datatype: "json", url: 'data4.php' }; <strong>var adapter = new $.jqx.dataAdapter(source); adapter.dataBind(); console.log(adapter);</strong> });This shows me that within recordsid are the data I am striving for!
But I do not know to access them, respectively to get get them assigned to another variable…an console.log(adapter.recordids) causes an empty array…a.jqx.dataAdapter {_source: {…}, _options: {…}, records: Array(0), _downloadComplete: Array(0), _bindingUpdate: Array(0), …}
—–snip——-
recordids
:
Array(6)
0
:
{sensor1: “12”, Date: “2017-08-01”}
1
:
{sensor1: “12”, Date: “2017-08-05”}
2
:
{sensor1: “30”, Date: “2017-08-05”}
3
:
{sensor2: “12”, Date: “2017-08-01”}
4
:
{sensor2: “12”, Date: “2017-08-05”}
5
:
{sensor2: “30”, Date: “2017-08-05”——-snip——-
August 8, 2017 at 10:09 am in reply to: JSON data vs. series definition JSON data vs. series definition #95356Hello Peter,
well, thinking about that approach left me with the question:How to setup up such data structure outlined in your example when I would retrieve data according to the code example below?
As your can see I left one datafield with questions marks as it it according to my data example ‘flexible’, but equivalent to the
names KEITH, GEORGE,…<script type="text/javascript"> $(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'Date', type: 'date'}, { name: '??????'} ], url: 'data4.php' };and data4.php provides data that way:
[
{”gas”:”12″,”Date”:”2017-08-01″},{“gas”:”12″,”Date”:”2017-08-05″},
{”current”:”30″,”Date”:”2017-08-05″},{”gas”:14,”Date”:”2017-08-01″},
{”water”:”12″,”Date”:”2017-08-05″},{”water”:”30″,”Date”:”2017-08-05″}
]Kr,
MichaelNovember 30, 2014 at 11:36 am in reply to: JSON data not processed, chart remains blank JSON data not processed, chart remains blank #63537Hello,
I resolved the issue as follows:I put the php code, that fetches the data from the mysql data directly into the html code (main file).
In tghe javascript code part of the html code I json_encoded the hash array and stored it in local variable, further
bind to localdata.
Please check it out, I marked the relevant code in bold:(Still, I have no idea why a dedicated php file that fetches mysql data and does a json_encode does not work.
Seems data does not find a way to the html-file)Kr,
Michael<!DOCTYPE html> <html lang="en"> <head> <?php include('connect.php'); $tables = array('Sen01DHT22','Sen02DHT22','Sen03DHT22','Sen04DHT22','Sen05DHT22','Sen06DHT22'); $connection = mysql_connect($hostname,$username,$password); if (!$connection) { die('Could not connect: ' . mysql_error()) } mysql_set_charset('utf8', $connection); $db = mysql_select_db($database,$connection); if (!$db) { die('Could not connect: ' . mysql_error()) } $query = "SELECT * FROM $tables[0] ORDER BY Zeitpunkt LIMIT 0,150"; <strong>while ( $row = mysql_fetch_array( mysql_query($query), MYSQL_ASSOC ) ) { $T[] = array( 'Zeitpunkt' => $row['Zeitpunkt'], 'T' => $row['T'] ); }</strong> mysql_close($connection); ?> <title id='Description'>This example demonstrated how to populate the jqxChart with DHT22 sensor data from MySQL Database</title> <link rel="stylesheet" href="../jquery/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jquery/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../jquery/jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var theme = 'classic'; <strong> var Sen01Data = <?php echo json_encode($T, JSON_PRETTY_PRINT) ?>;</strong> var source = { datatype: "json", datafields: [ { name: 'Zeitpunkt', type: 'date'}, { name: 'T'} ], <strong> localdata: Sen01Data</strong> };November 25, 2014 at 11:27 am in reply to: JSON data not processed, chart remains blank JSON data not processed, chart remains blank #63276Hello Dimitar,
you are right, but the 3 timestamps on the very top are resulting fromecho $row['Zeitpunkt'].” “.$row['T'].”<br>”;)while the array you’ve posted in the result of the JSON echo:
echo json_encode($T);…I googled some threads where the same error may be due to the character set. It should be utf-8 for JSON.
Could it be that the character set used for the mysql table does not match?Kr,
Michael -
AuthorPosts