Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anschi
Frequent Visitor

How to use Google Charts in a custome visual in Power BI

Hi everyone!

I want to create a custome visual in Power Bi. The visual should look like this:

Anschi_0-1667558569097.png

Thats the HTML to this Chart above:

 

<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">

 	google.charts.load('current', {'packages':['bar']});
    	google.charts.setOnLoadCallback(drawChart);
        
 	function drawChart() {
              var data = google.visualization.arrayToDataTable([
             	['X-Axis Timeline', 'Things', 'Stuff'],
                 [0, 0, 0],    [1, 10, 5],   [2, 23, 15],  [3, 17, 9],   [4, 18, 10],  [5, 9, 5],
                 [6, 11, 3],   [7, 27, 19],  [8, 33, 25],  [9, 40, 32],  [10, 32, 24], [11, 35, 27],
                 [12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
                 [18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
                 [24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
                 [30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
                 [36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
                 [42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
                 [48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
                 [54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
                 [60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
                 [66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
             ]);
             
		var options = {
                 chart: {
                     title: 'Things vs Stuff'
                 }};

            var chart = new google.charts.Bar(document.getElementById('barchart_material'));
             chart.draw(data, options);
        }
</script>
<body>
    <div id="barchart_material" style="width: 900px; height: 900px;"></div>
  </body>

</html>

 

 

I followed this tutorial (How to create a custom visual in Power BI using Google Charts (goodwin.dev))and copied this code section into my visual.ts file. Unfortunately, it doesn't work. In VSCode, calling the GoogleCharts.Load() function does not work.

 

"use strict";

import { GoogleCharts } from 'google-charts';
import powerbi from "powerbi-visuals-api";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import "./../style/visual.less";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import { VisualFormattingSettingsModel } from "./settings";

export class Visual implements IVisual {
    private target: HTMLElement

    constructor(options: VisualConstructorOptions) {
      
        this.target = options.element;
      
    }
   
    public update(options: VisualUpdateOptions) {


        GoogleCharts.Load(() => {

            const data = new GoogleCharts.api.visualization.DataTable()
            data.addColumn('number', 'X-Axis Timeline')
            data.addColumn('number', 'Things')
            data.addColumn('number', 'Stuff')
            data.addRows([
                [0, 0, 0],    [1, 10, 5],   [2, 23, 15],  [3, 17, 9],   [4, 18, 10],  [5, 9, 5],
                [6, 11, 3],   [7, 27, 19],  [8, 33, 25],  [9, 40, 32],  [10, 32, 24], [11, 35, 27],
                [12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
                [18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
                [24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
                [30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
                [36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
                [42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
                [48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
                [54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
                [60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
                [66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
            ])
            const options = {
                chart: {
                    title: 'Things vs Stuff'
                },
                hAxis: {
                    title: 'Time'
                },
                vAxis: {
                    title: 'Popularity'
                },
                legend: {
                    position: 'bottom'
                }
                
            }
          

           const chart = new GoogleCharts.api.visualization.BarChart(this.target);
           
            chart.draw(data, options);
        })

        
    }

}

 

 

Thus, the visual in Power Bi always remains empty. Does anyone know a solution?

3 REPLIES 3
Anschi
Frequent Visitor

Hi @v-shex-msft,

I've looked at the tutorials in the links several times, but they don't help me with my problem. I have the npm package for Google Charts installed. With this command:


npm i google-charts

 

You can find the installed packet in the project in the node_modules folder. it's called google charts.

Anschi_1-1668078922780.png

 

if you open this folder and the file googleCharts.esm.js opens it says at the top that it was last updated in 2018. it may be that this package is simply outdated and therefore no longer works ???

 

Anschi_0-1668078881485.png

 

Anschi
Frequent Visitor

@v-shex-msft hello?

v-shex-msft
Community Support
Community Support

Hi @Anschi,

I think these may be related to your environment settings, you can refer to the following link to confirm if you have installed all prerequisite contents.

Learn how to develop your own Power BI visual using the circle card visual as an example - Power BI ...

Setting up an environment for developing a Power BI visual - Power BI | Microsoft Learn

Regards,
Xiaoxin Sheng

Community Support Team _ Xiaoxin
If this post helps, please consider accept as solution to help other members find it more quickly.

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.