topic Date Range Custom visual in Developer

Date Range Custom visual

chotu27 — Mon, 06 Nov 2017 03:58:00 GMT

Hi All,

i am building date range visual as similar to the one which we have in power bi. Can anyone help me where can i find the source code for Date visual Slicer. Can i also know how the slicer in power bi accepting date visual and showing it's range?

Power bi date rangeOutput Expecting

Re: Date Range Custom visual

v-chuncz-msft — Tue, 07 Nov 2017 07:55:46 GMT

@chotu27,

Check this post and take a look at https://github.com/Microsoft/PowerBI-Visuals/#building-a-slicer-visual.

Re: Date Range Custom visual

chotu27 — Tue, 07 Nov 2017 14:57:32 GMT

@v-chuncz-msft

Hey I know about this post and sample slicer code .But i need to know how the date display is working in slicer visual when we put date field in to it?

@v-viig Can you please help me on this above discussion ?

Re: Date Range Custom visual

v-viig — Thu, 09 Nov 2017 07:42:55 GMT

Source code of native Slicer isn't public anymore.

Slicer accepts dates as an array of dates. Slicer applies a filter once user selects any range.

After that, Power BI filters data for all of visuals on the same report page.

Please let me know if you any extra questions.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

chotu27 — Tue, 14 Nov 2017 15:00:22 GMT

Hi Ignat,

Thank you for the reply, Can i know what npm packages are used for Date Range?

Re: Date Range Custom visual

v-viig — Tue, 14 Nov 2017 18:40:34 GMT

You can use powerbi-visuals-tools and powerbi-models to create a date range slicer.

Please also take a look at powerbi-visuals-sampleslicer that describes how to make a slicer as a custom visual.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

chotu27 — Thu, 23 Nov 2017 17:53:25 GMT

Hi Ignat

I am trying to include the date range calender using an external JS framework called daterangepicker. I have included its scripts and typing scripts from external sources. But I am not able to invoke the functions in the framework as provided in its specifications.

Could you please help me with how to invoke it or help me with an idea which would pop a calender on the custom visual on click on an element within the box. Attached are the snippets of what m trying to include.

//sampleslicer.ts
$('input[name="datefilter"]').daterangepicker({
                      autoUpdateInput: false,
                      locale: {
                          cancelLabel: 'Clear'
                      }
                  });
                
                  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
                      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
                  });
                
                  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
                      $(this).val('');
                  });
//tsconifg.json

 "files": [
    "node_modules/@types/daterangepicker/index.d.ts",
    "node_modules/@types/jquery/index.d.ts",
    "node_modules/@types/jqueryui/index.d.ts"
]

//package.json

 "externalJS": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/nouislider/distribute/nouislider.js",
    "node_modules/moment/moment.js",
    "node_modules/d3/d3.min.js",
    "node_modules/daterangepicker/daterangepicker.js"
]

What i need here is an idea to implement a calender with custom functionalities in my visual. Could you help with an idea to do that ? Thanks alot for your patience

Re: Date Range Custom visual

v-viig — Fri, 24 Nov 2017 08:52:49 GMT

Could you please share the full code of your custom visual?

I'd like to debug it.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

chotu27 — Sun, 26 Nov 2017 17:56:17 GMT

@v-viig

Hi Ignat,

can you check my full code sent in private message .

Re: Date Range Custom visual

v-viig — Mon, 27 Nov 2017 12:57:41 GMT

You can take a look at working example here.

Please note that the issue was related not to installing jQuery and Datepicker libraries.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

Robbief — Tue, 28 Nov 2017 13:50:30 GMT

I need this in my life...... Will it be a free visual?

Re: Date Range Custom visual

chotu27 — Fri, 01 Dec 2017 14:43:51 GMT

Hi @v-viig

I saw the working example and calendar is displaying but the date selection is not working like selectionID and filtering .Inorder to achieve it , do I need to create Selection manager for this date Visual? If so can i get any sample codes

Re: Date Range Custom visual

v-viig — Mon, 04 Dec 2017 09:12:46 GMT

You should use Advanced Filter API (sample visual).

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

chotu27 — Fri, 08 Dec 2017 16:32:23 GMT

Hi Ignat,

@v-viig

I tired it in several ways to implement single date picker selectionID's in calendar but none of them are working. I need Single Date calendar Picker visual in my project it's very important for me , Can you tell me where can i get the single date selection Visual or else just create sample selection iD in calendar then i will go ahead with it.

@please help me

I can select single date In "This" option avilable in relative date slicer but it will be very hard for the users to select this option and look at.

Re: Date Range Custom visual

v-viig — Mon, 11 Dec 2017 12:51:08 GMT

Hello @chotu27

I'm not sure that understand the requirement well.

Do you need a single input box that opens the calendar? Is that correct?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

chotu27 — Mon, 11 Dec 2017 13:22:14 GMT

Hi Ignat @v-viig

Thanks for the response yes i need single input box in which it should be only able to select single date from the calendar .

Note : It's Not about the range selection

Re: Date Range Custom visual

v-viig — Tue, 12 Dec 2017 10:34:10 GMT

Hello @chotu27

You might take a look at the sample date picker here.

I suppose that the sample code will meet your requirements.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Date Range Custom visual

richbenmintz — Thu, 19 Apr 2018 18:30:08 GMT

Thank you for the sample code, are you able to provide a sample where the daterangepicker is used? I would like to be able to select a range but cannot get the daterangepicker to be visible without the container property being set, this property is not available in the daterangepicker.

Thanks,

Re: Date Range Custom visual

Anonymous — Tue, 07 May 2019 09:38:55 GMT

@v-viig @chotu27 I downloaded this code and looking forward to implementing in the same way as my business requirement is like this. I am running the code and it is compiling successfully but in console, it is giving me an error, jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker is not a function. In details view -------------Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker is not a function
at HTMLDocument.<anonymous> (<anonymous>:30954:65)
at might throw (<anonymous>:17494:36)
at process (<anonymous>:17536:19) .

Any idea how to fix this error. I didn't change package.json versions of any library. Globally installed pbiviz 3.0.12.

@chotu27 Did you face a similar issue?

Re: Date Range Custom visual

Anonymous — Wed, 23 Feb 2022 09:36:44 GMT

Hello, i downloaed the source code but does not working....i need this component if you have please