M.App Enterprise Discussions

[PancaIR]

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

[jan.neumann]

Hi Panca,

Please check developer tools console if there appears any error message after you click the button.

[PancaIR]

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

click error.JPG ‏25 KB

[jan.neumann]

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):