01-22-2020 03:00 PM - edited 01-22-2020 03:01 PM
hi all
in M.App Enterprise Analyzer view we try to create some date filter with button in HTML display chart, the idea is to filter data by today, yesterday, this month, and last mont
we have a some code in functional attribute for the filter like below
if (rowId === 0) { window.rangeutil = class DateRangeUtilities { static getRangeToday() { return this.getRangeSpecificDate(new Date()); } static getRangeYesterday() { var yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1); yesterday = this.resetTime(yesterday); var yesterdayMax = new Date(yesterday); yesterdayMax.setDate(yesterdayMax.getDate() + 1); yesterdayMax.setMilliseconds(-1); return this.getRangeCustom(yesterday, yesterdayMax); } static getRangeSpecificDate(date) { var newDate = new Date(date); newDate = this.resetTime(newDate); var newDateMax = new Date(newDate); newDateMax.setDate(newDateMax.getDate() + 1); newDateMax.setMilliseconds(-1); return this.getRangeCustom(newDate, newDateMax); } static getRangeThisMonth() { var date = new Date(); var y = date.getFullYear(); var m = date.getMonth(); var minMonth = new Date(y, m, 1); var maxMonth = new Date(y, m + 1, 1); maxMonth.setMilliseconds(-1); return this.getRangeCustom(minMonth, maxMonth); } static getRangeLastMonth() { var date = new Date(); var y = date.getFullYear(); var m = date.getMonth(); var minMonth = new Date(y, m - 1, 1); var maxMonth = new Date(y, m, 1); maxMonth.setMilliseconds(-1); return this.getRangeCustom(minMonth, maxMonth); } static resetTime(date) { var y = date.getFullYear(); var m = date.getMonth(); var d = date.getDate(); return new Date(y, m, d); } static getRangeCustom(date, date2) { return dc.filters.RangedFilter(date, date2); } } }
and we have code in html display like below
<style type="text/css"> .myButton { margin-left: 5px; display: table; height:24px; width: 220px; } </style> <div style="margin-left:lOpx; margin-top:5px"> <div class="smallCommandButton myButton" onclick="var range = rangeutil. getRangeToday (); Analyzer.findStageModel() .widgets[l].getChart() .filter(range);dc.redrawAll();"> <span>Hari ini</span> </div> <div class="smallCommandButton myButton" onclick="var range = rangeutil. getRangeYesterday (); Analyzer.findStageModel() .widgets[l].getChart() .filter(range);dc.redrawAll();"> <span>Kemarin</span> </div> <div class="smallCommandButton myButton" onclick="var range = rangeutil. getRangeThisMonth (); Analyzer.findstageModel() .widgets[l].getchart() .filter(range);dc.redrawAll();"> <span>Bulan ini</span> </div> <div class="smallCommandButton myButton" onclick="var range = rangeutil.getRangeLastMonth(); Analyzer.findStageModel() .widgets[l].getChart() .filter(range);dc.redrawAll();"> <span>Bulan kemarin</span> </div> </div>
after we apply and try to click the button nothing happens, does anyone know how to make it work
thanks,
regards
01-23-2020 06:06 AM
Hi Panca,
Please check developer tools console if there appears any error message after you click the button.
01-27-2020 11:42 PM
Hello Jan
yes there is an error, sorry I was not that proficient with js but I tried a number of ways such as the dropdownlist but still the same did not happen when clicked, I have not been able to how to correlate wit Functional attribute
this the error in DevTols
Thanks
Regards
01-28-2020 11:41 PM - edited 01-28-2020 11:41 PM
The error 'l is not defined' simply means that there doesn't exist a variable or function named 'l' JS custom code.
In the example above, you have
widgets[l]
while it should be 1 (the index of the appropriate chart)
widgets[1]
Please note that the sample above has this value hardcoded. The number must reference to the Date chart type ('dateLineChart'). I used this number after checking the existing chart using Analyzer.findStageModel().widgets in the browser developer tools console (key F12):