1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Javscript GanttChart - Create PowerBI Custom Visual PBIVIZ

Javscript GanttChart - Create PowerBI Custom Visual PBIVIZ

Hi,

I'd like to create a custom Power BI Visual using the PBIVIZ api tooling by Microsoft.  develop-power-bi-visuals

Following is my attempt at modifying the standard solution and adding the ej2-gantt control per the following code extract and attached solution.  

I can get data to show per the following screenshot.  However, I can't get any styling or interactivity to come through.  I think it is due to the sand-boxed environment that PowerBI uses which does not allow syncfusion Javascript to run.

Do you have any examples where syncfusion controls have been used to create a PowerBI custom visual, or do you have any hints on what I can try on my example?

Image_3629_1707367175679 

"use strict";

import powerbi from "powerbi-visuals-api";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

import "./../style/visual.less";

import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;

import { VisualFormattingSettingsModel } from "./settings";

import { Gantt, Selection } from "@syncfusion/ej2-gantt";

import { projectNewData } from './data-source';

// Registering Syncfusion license key
import { registerLicense } from "@syncfusion/ej2-base";

registerLicense(
  "ORg4AjUWIQA/Gnt2UVhiQlVPd11dXmJWd1p/THNYflR1fV9DaUwxOX1dQl9nSXxTcURhXH1beHNSQ2k="
);

export class Visual implements IVisual {
    private target: HTMLElement;
    private updateCount: number;
    private textNode: Text;
    private formattingSettings: VisualFormattingSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.formattingSettingsService = new FormattingSettingsService();

        this.target = options.element;

        this.updateCount = 0;
        if (document) {

            // Create the div element to contain the gantt chart
            const div_gantt_container: HTMLElement = document.createElement('div');

            // Set its ID
            div_gantt_container.id = "gantt-container";

            // Set styles directly using the style property
            div_gantt_container.style.overflow = "hidden";
            div_gantt_container.style.height = "100%";
            div_gantt_container.style.width = "100%";
            div_gantt_container.style.display = "flex";
            div_gantt_container.style.flexGrow = "1";

            this.target.appendChild(div_gantt_container);
           
            Gantt.Inject(Selection);
            const gantt: Gantt = new Gantt({
                dataSource: projectNewData,
                height: "100%",
                width:"100%",
                gridLines: 'Both',
   
                enableVirtualization: true,
                enableTimelineVirtualization: true,
                allowFiltering:true,
                allowSorting:true,
                allowSelection:true,
               
                taskFields: {
                  id: "TaskID",
                  name: "TaskName",
                  startDate: "StartDate",
                  endDate: "EndDate",
                  duration: "Duration",
                  progress: "Progress",
                  dependency: "Predecessor",
                  child: "subtasks",
                },
                treeColumnIndex: 1,
                columns: [
                  { field: "TaskID", width: 80 },
                  { field: "TaskName", headerText: "Name", width: 250 },
                  { field: "StartDate" },
                  { field: "EndDate" },
                  { field: "Duration" },
                  { field: "Predecessor" },
                  { field: "Progress" },
                ],
                labelSettings: {
                  leftLabel: "TaskName",
                },
                projectStartDate: new Date("03/24/2019"),
                projectEndDate: new Date("07/06/2019"),
              });
              gantt.appendTo("#gantt-container");

        }
    }

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);

        console.log('Visual update', options);
        // if (this.textNode) {
        //     this.textNode.textContent = (this.updateCount++).toString();
        // }
    }

    /**
     * Returns properties pane formatting model content hierarchies, properties and latest formatting values, Then populate properties pane.
     * This method is called once every time we open properties pane or when the user edit any format property.
     */
    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }

}

Attachment: pBIGanttSample_844b94c0.zip

6 Replies
GW Greg Wruck February 11, 2024 08:06 PM UTC

I have been continuing to investigate this issue and it seems to be related to the loading of the stylesheet for the control.

If I add the following code to the visual.less file, the style sheet will be included with the webpack process and will be available in the rendered output. 

@import (less) '../../[solution name]/node_modules/@syncfusion/ej2-gantt/styles/material.css' ;

However when I inspect the styles for the rendered html element, it does not recognise the imported style sheet.

I experimented with adding the link to the style sheet via cdn in the header of the custom visual, and I did find a couple times that the visual did render correctly.  However, unfortunately I did not save the solution and I can't seem to reproduce it now - but at least it seems that it is possible to do.

Has anyone been able to shed any light on this problem?




AG Ajithkumar Gopalakrishnan Syncfusion Team February 13, 2024 03:22 PM UTC

Hi Greg,

We apologize for any inconvenience this may have caused. We are checking the reported problem by preparing sample with PowerBI and we will share information about the sample within two days, on or before Feb 15-2024.

Regards,

Ajithkumar G


GW Greg Wruck February 13, 2024 07:34 PM UTC

Thanks, that would be appreciated.  It would be great if we can get this to work.


AG Ajithkumar Gopalakrishnan Syncfusion Team February 15, 2024 02:16 PM UTC

Hi Greg,

We suspect that the issue may cause some dependent themes related to Gantt Chart has not been referred properly. So we suggest to refer the below documentation link

Individual component reference: https://ej2.syncfusion.com/angular/documentation/gantt/getting-started#adding-css-reference

Or else use below   https://ej2.syncfusion.com/documentation/gantt/getting-started#import-the-syncfusion-css-styles  (Refer whole theme)

CDN reference: https://ej2.syncfusion.com/angular/documentation/appearance/overview#cdn-direct-referral

Power BI document: https://support.syncfusion.com/kb/article/9464/how-to-integrate-datepicker-into-power-bi-application-in-javascript#creating-ccustom-vvisual

After following above reference still faced issue,  share us the details like CSS reference file, Screenshot to validate further.

Regards,

Ajithkumar G


GW Greg Wruck February 16, 2024 02:13 AM UTC

Thanks very much for this response - it is exactly what I needed.  This is the first time I've tried to use the javascript / typescript controls and I didn't realise that I had to import so many css modules for the gantt chart.  Once I imported the full list shown in your getting started reference into the visual.less file, the visual rendered correctly.

Thanks also for the link to the knowledge base.  I actually looked for something like that article and didn't find it, so thanks for sending the link.

I note that there are 4 or 5 errors in the article so that it doesn't actually work straight from the screen, but I was able to get it going by making a few changes.  I suspect that the pbiviz interfaces might have changed since the article was written.  It might be helpful if Syncfusion reviewed and updated the kb article (I'd be happy to have a first go if you send me a link to the md file).



AG Ajithkumar Gopalakrishnan Syncfusion Team February 16, 2024 02:04 PM UTC

Hi Greg,

We will modify the KB as per suggestion and we will let you know once kb refreshed. Until then we appreciate your patience.

Regards,

Ajithkumar G


Loader.
Up arrow icon