jQuery UI Widgets › Forums › Chart › toolTipFormatFunction / rangeSelector for Multiline Chart
Tagged: chart, javascript chart, jquery chart, jqwidgets chart
This topic contains 8 replies, has 2 voices, and was last updated by mim 7 years, 1 month ago.
Viewing 9 posts - 1 through 9 (of 9 total)
-
Author
-
Hi,
kindly asking for help!Issues:
A) A toolTip info is only displayed for one of three lines!
B) The area in the rangeSelector chart displays only one lines, can this be changed so that all series areas displayed there?
C)
toolTip is coded via a toolTipCustomFormatFn function. Here, I do not know to handle
‘</b><br />Pulses:’ + dataItem.current + ‘</DIV>’; the dataItem variable as normally it should be
dataItem.current or dataItem.water or dataItem.gas…depending whether dataItem.<> is defined of not…The following data is input to the chart (extract):
[{“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″},{“water”:”7″,”Date”:”2017-08-08 20:20:00″},{“water”:”10″,”Date”:”2017-08-06 00:00:00″}]That is 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 source = { datatype: "json", datafields: [ { name: 'Date', type: 'date'}, { name: 'water', type: 'int'}, { name: 'current', type: 'int'} ], 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.<strong>current </strong>+ '</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: 'water', 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' } ] }, ] }; // 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>Many thanks,
MichaelHi 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
Hello Kr, Michael,
Thank you for the interest.
I assume that this case has been resolved?
If you need additional help feel free to contact us.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi 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
…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
Hello Michael,
I tested the example below and it seems to work fine, it shows both lines in the ToolTip:
<!DOCTYPE HTML> <html lang="en"> <head> <title id='Description'>JavaScript Chart with Range Column Series example</title> <meta name="description" content="This is an example of JavaScript Chart with Range Column Series." /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../../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 = [ { "month": "08/01/2017", "min": -1.9, "max": 3.7, "avg": 0.2 }, { "month": "08/02/2017", "min": -0.9, "max": 5.9, "avg": 1.1 }, { "month": "08/03/2017", "min": 0.8, "max": 9.8, "avg": 4.9 }, { "month": "08/04/2017", "min": 4.1, "max": 13.9, "avg": 8.7 }, { "month": "09/04/2017", "min": 8.0, "max": 18.4, "avg": 13.1 }, { "month": "10/01/2017", "min": 11.3, "max": 22.2, "avg": 16.6 }, { "month": "10/07/2017", "min": 13.3, "max": 25.3, "avg": 18.4 }, { "month": "11/01/2017", "min": 13.0, "max": 24.4, "avg": 17.6 }, { "month": "11/11/2017", "min": 10.3, "max": 20.8, "avg": 14.3 }, { "month": "11/21/2017", "min": 6.6, "max": 14.9, "avg": 9.2 }, { "month": "11/30/2017", "min": 2.1, "max": 8.4, "avg": 4.2 }, { "month": "12/31/2017", "min": -0.5, "max": 4.5, "avg": 21.5 } ]; 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>(created example is with testing purpose data)
Unfortunately, the RangeSelector shows only one datafield.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi 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>Hello Michael,
Thank you for the response.
This happens because I mapped the data that I use to your datafields.
You should do a few changes on your DataAdapter’s source:var source = { datatype: "json", datafields: [ { name: 'Date', type: 'date' }, { name: 'water', type: 'int' }, { name: 'current', type: 'int' } ], localdata: data };Another thing is that your data structure is with other consistency. It will be better if all records have the three datafields – ‘Date’, ‘water’, ‘current’.
One option is to usebeforeLoadCompletecallback to collect them with common points.
Also, another approach that I would like to suggest you is this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_line_series_array.htm?lightBest Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi 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
-
AuthorPosts
Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.