topic Problem with Selection in custom visualization in Developer

Problem with Selection in custom visualization

as7 — Thu, 12 Jan 2017 10:43:57 GMT

I am developing custom Visual in typescript and want to make dropdown having respected data in it.

Ok with Visual Creation, But having problem to implement Selection ID with the data append to my visual.Whenever i use selection ID with data, then my visual fails to load data in it. Please help me with this , regarding selection in custom visual.

My code in Visual.ts file is given below:-

module powerbi.extensibility.visual {
    //Array to store URL
    interface imageViewModel {
        
        URL: imageDataPoint[];
      
    };
    //Declare URL as string
    interface imageDataPoint {
        imageUrl: string;
        selectionId: ISelectionId;

        
        
    };
    //Data from Power BI to imageViewModel    
    function visualTransform(options: VisualUpdateOptions, host: IVisualHost): imageViewModel {
                let dataViews = options.dataViews;
                let viewModel: imageViewModel = {
                                                    URL: []
                                                    
                                                 };
       if (!dataViews
           || !dataViews[0]
           || !dataViews[0].categorical
           || !dataViews[0].categorical.categories
           || !dataViews[0].categorical.categories[0].values)
                    return viewModel;
                let imageData = dataViews[0].categorical;
                if (imageData) {
                    var imageElement = imageData.categories;
           

           if (imageElement && imageElement.length > 0) {

               for (var i = 0, catLength = imageElement.length; i < catLength; i++) {
                   var k = 0;

                   viewModel.URL.push({
                       imageUrl: <string>imageElement[0].values[i],
                       selectionId: host.createSelectionIdBuilder()
                           .withMeasure(imageElement[0].values[i])
                           .createSelectionId()
                      })
                  

               }
               
               
           }
       }
    

       return viewModel;
    }
    export class Visual implements IVisual {
        
        private image: d3.Selection<SVGElement>;
          
        private host: IVisualHost;        
        private selectionManager: ISelectionManager;
        
                   
       

        static Config = {
            xScalePadding: 0.1,
            solidOpacity: 1,
            transparentOpacity: 0.5
         };
       
        //Element initialization
        constructor(options: VisualConstructorOptions) {
            

            this.image = d3.select(options.element).append("select");
                               
        }

        //Any change tu visualization executes this upadate function
        public update(options: VisualUpdateOptions)  {
            
            let selectionManager = this.selectionManager;
            let viewModel: imageViewModel = visualTransform(options, this.host);
                       
            var zoomFlag = 0;
           
            let divPop = this.image.selectAll('option').data(viewModel.URL);

            divPop.enter().append('option').text(function (d) { return d.imageUrl; });

            
            divPop.exit().remove();
                     
            
            
         
        }
        
       
        public destroy(): void {
            //TODO: Perform any cleanup tasks here
        }
    }
}

Re: Problem with Selection in custom visualization

KumarDarmesh — Tue, 17 Jan 2017 10:06:57 GMT

What is the purpose for dropdowning? What does the visual do actually

Re: Problem with Selection in custom visualization

as7 — Tue, 17 Jan 2017 10:17:03 GMT

I want visual to have start time and end time inputs . that's why i thinking of having drop down in both , so that it contain 01,02,03 hrs and so on. So, when user select start time 01 hrs and end time 02 hrs , then data filter according to this time period.

and if any visual available in power BI for this type of need then please tell me, otherwise please help.

Re: Problem with Selection in custom visualization

KumarDarmesh — Mon, 06 Feb 2017 05:48:58 GMT

Why not creating a calendar table in hours and slicer the hours then?

Re: Problem with Selection in custom visualization

as7 — Mon, 06 Feb 2017 06:19:52 GMT

Thanks for your suggestion.

How can I create calendar table in hours as i have created calendar table for date purpose but how can i put time in it and bifurcate it to hours. It will be very helpful if you can show the DAX for it.

Re: Problem with Selection in custom visualization

Eric_Zhang — Mon, 06 Feb 2017 08:38:56 GMT

@as7

You can try

calendar table in hours =
SELECTCOLUMNS (
    ADDCOLUMNS (
        CROSSJOIN (
            CALENDAR ( "2016-01-01", "2017-12-31" ),
            SELECTCOLUMNS (
                ADDCOLUMNS ( CALENDAR ( "2016-01-01", "2016-01-24" ), "DAY", DAY ( [Date] ) ),
                "DAY", [DAY]
            )
        ),
        "dateTime", [Date]
            + IF ( [DAY] = 24, 0, [DAY] )
                / 24
    ),
    "Date", [Date],
    "dateTime", [dateTime]
)

Re: Problem with Selection in custom visualization

as7 — Mon, 06 Feb 2017 12:11:39 GMT

thanks.

But, my requirement is to have a time slicer that can slice my data from one time to other time . and power BI dosen't have such time slicer.

Re: Problem with Selection in custom visualization

Eric_Zhang — Wed, 08 Feb 2017 07:27:39 GMT

@as7

Do you want to slice a time window like '02:00' to '15:00' for all days? If so, there's some workaround by creating proper lookup tables and measures.

Check a similar thread Specify custom date periods with predefined date periods. The difference is, you have to create start time and end time and filter the data with them, rather than start date and end date in that link.

Re: Problem with Selection in custom visualization

as7 — Wed, 08 Feb 2017 09:16:16 GMT

Thanks for this help. But can you please tell me how can i make a table with range of time only not date.

Because Calendar() function is taking date only.