Forum Discussion

delphine_g's avatar
delphine_g
Regular Visitor
2 years ago
Solved

Is it possible to use Chart.JS to create a Power BI Custom visual ?

Hello,
I would like to use the Chart.JS library to create my visual. To do this, I referred to this tutorial:

https://medium.com/@jatin7gupta/adding-external-js-libraries-powerbi-custom-visuals-9b0b9a7d4ae
But when I execute pbiviz start, the visual is completely blank.
So I wanted to know if it is possible to use Chart.JS to develop a custom visual and if so, how can I fix my code to display the visual?

Need Help
Tutorial Requests
  • gdelpuenteCinec's avatar
    gdelpuenteCinec
    2 years ago

    you should import the library

    import {Chart} from 'chart.js';

    create a private properties for the Visual class

    private myChart: Chart;

    and then at the end of your code change that chart constant to

    var ctx = 'canvasId';
        if(this.myChart)
            this.myChart.destroy();
        this.myChart = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
.....
})

     with your graph configuration

4 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    2 years ago

    Hello,

     

    Of course it is possible to use external libraries like Chart.JS to create a Power BI Custom Visual and regarding the article you provided, there is a code sample that shows how to do that.

     

    Could you please provide use the code you used in your visual Class and also what is your data role/mapping?

     

    It seems that the example in the Medium article is using the default data role/mapping and only update the constructor and the update methods of the visual so it should be easy to reproduce so tell us what you have done and we will find how to help you 

    • delphine_g's avatar
      delphine_g
      Regular Visitor
      2 years ago

      Hello,
      Thank you for your answer.
      Here's the Datarole/Mapping I used :

      "dataRoles": [
        {
            "displayName": "Categories",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Right Values",
            "name": "right_value",
            "kind": "Measure"
        },
        {
            "displayName": "Left Values",
            "name": "left_value",
            "kind": "Measure"
        }
    ],
"dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "right_value": {
                        "max": 1
                    },
                    "left_value": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    },
                    "dataReductionAlgorithm": {
                        "top": {}
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "right_value"
                            }
                        },
                        {
                            "bind": {
                                "to": "left_value"
                            }
                        }
                    ]
                }
            }
        }
    ],

       And this is the code I used for my visual Class :

      export class Pyramid implements IVisual {
    private target: HTMLElement;
    private updateCount: number;

    constructor(option : VisualConstructorOptions) {
        console.log('Visual constructor', option);
            this.target = option.element;
            this.updateCount = 0;
            if (typeof document !== "undefined") {
                const new_p: HTMLElement = document.createElement("div");
                const can: HTMLElement = document.createElement("canvas");
                can.setAttribute("id", "canvasId");
                new_p.appendChild(can);
                this.target.appendChild(new_p);
            }
        
    }
    public update(option : VisualUpdateOptions) {
        const extracted_data = [] ;   
        if(option.dataViews 
            && option.dataViews[0] 
            &&  option.dataViews[0].categorical
            &&  option.dataViews[0].categorical.categories
            &&  option.dataViews[0].categorical.values
            ) {               
        const categoricalData = option.dataViews[0].categorical;
        const category = categoricalData.categories[0] ;
        const right_value = categoricalData.values[0]; 
        const left_value = categoricalData.values[1]; 

        for (let i = 0; i< category.values.length; i++){
            extracted_data.push({
                category: category.values[i],
                rvalue: right_value.values[i], //blue values
                lvalue: left_value.values[i] , //red values
            });
        }}
        
        const labels = extracted_data.map(dataPoint => dataPoint.category);
        const data = {
          labels: labels,
          datasets: [{
            label: 'Right Data',
            data: extracted_data.map(dataPoint => dataPoint.rvalue),            
            borderColor: '#33B0FF',
            backgroundColor: '#33B0FF',
            borderWidth: 1
          },
          {
            label: 'Left Data',
            data: extracted_data.map(dataPoint =>  dataPoint.lvalue * -1),            
            borderColor: '#FF33BD',
            backgroundColor: '#FF33BD',            
            borderWidth: 1
          }]
        };
            let d = (<any>window).Chart;

            const chart = {
                type: 'bar',
                data: data,
                options: {
                  inexAxis : 'y',
                  scales: {
                    x: {
                      stacked: true
                    },
                    y: {
                      beginAtZero: true,
                      stacked: true
                    }
                  }
                },
              };
    }
}

      Can you help me to find what's wrong here please ?

      • gdelpuenteCinec's avatar
        gdelpuenteCinec
        Helper I
        2 years ago

        you should import the library

        import {Chart} from 'chart.js';

        create a private properties for the Visual class

        private myChart: Chart;

        and then at the end of your code change that chart constant to

        var ctx = 'canvasId';
        if(this.myChart)
            this.myChart.destroy();
        this.myChart = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
.....
})

         with your graph configuration