M.App Enterprise Discussions

Discuss topics with other M.App Enterprise Product pioneers and experts to get the most out of it.
Showing results for 
Search instead for 
Do you mean 
Reply
Highlighted
Contributor
Posts: 32
Registered: ‎05-31-2016

custom date filter with html display in AV

[ Edited ]

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

Highlighted
Technical Evangelist
Posts: 1,374
Registered: ‎09-11-2015

Re: custom date filter with html display in AV

Hi Panca,

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

 

 

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial

Highlighted
Contributor
Posts: 32
Registered: ‎05-31-2016

Re: custom date filter with html display in AV

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

click error.JPG

 

Thanks

 

Regards

 

 

Highlighted
Technical Evangelist
Posts: 1,374
Registered: ‎09-11-2015

Re: custom date filter with html display in AV

[ Edited ]

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

Capture.PNG

Jan Neumann
Post Sales Engineer Web Applications
Hexagon Geospatial