Forum Discussion

vkokorin's avatar
vkokorin
Regular Visitor
9 years ago

How can I get the data?

Hello, guys. Help me, please. I have this default code in file visual.ts:

module powerbi.extensibility.visual {

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

        constructor(options: VisualConstructorOptions) {
            console.log('Visual constructor', options);
            this.target = options.element;
            this.updateCount = 0;
        }

        public update(options: VisualUpdateOptions) {
            console.log('Visual update', options);
            this.target.innerHTML = `<p>Update count: <em>${(this.updateCount++)}</em></p><br>`;
        }
    }
    
}

And this default code in file capabilities.json:

{
    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],
    "dataViewMappings": [
        {
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    },
                    "dataReductionAlgorithm": {
                        "top": {}
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        }
                    ]
                }
            }
        }
    ]
}

What I have to do to get any data in visualization? I need just get the data.

3 Replies

  • v-chuncz-msft's avatar
    v-chuncz-msft
    Community Support

    vkokorin,

     

    Based on my research, you will need to fill the update method by defining your own visualTransform function that will allow you to convert DataView into a view model your visual will use.

    • vkokorin's avatar
      vkokorin
      Regular Visitor

      You mean something like this?

          function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
              let dataViews = options.dataViews;
              let defaultSettings: BarChartSettings = {
                  enableAxis: {
                      show: false,
                  }
              };
              let viewModel: BarChartViewModel = {
                  dataPoints: [],
                  dataMax: 0,
                  settings: <BarChartSettings>{}
              }; 
      
              if (!dataViews
                  || !dataViews[0]
                  || !dataViews[0].categorical
                  || !dataViews[0].categorical.categories
                  || !dataViews[0].categorical.categories[0].source
                  || !dataViews[0].categorical.values)
                  return viewModel;
      
              let categorical = dataViews[0].categorical;
              let category = categorical.categories[0];
              let dataValue = categorical.values[0];
      
              let barChartDataPoints: BarChartDataPoint[] = [];
              let dataMax: number;
      
              let colorPalette: IColorPalette = host.colorPalette;
              let objects = dataViews[0].metadata.objects;
              let barChartSettings: BarChartSettings = {
                  enableAxis: {
                      show: getValue<boolean>(objects, 'enableAxis', 'show', defaultSettings.enableAxis.show),
                  }
              }
              for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
                  let defaultColor: Fill = {
                      solid: {
                          color: colorPalette.getColor(category.values[i] + '').value
                      }
                  }
      
                  barChartDataPoints.push({
                      category: category.values[i] + '',
                      value: dataValue.values[i],
                      color: getCategoricalObjectValue<Fill>(category, i, 'colorSelector', 'fill', defaultColor).solid.color,
                      selectionId: host.createSelectionIdBuilder()
                          .withCategory(category, i)
                          .createSelectionId()
                  });
              }
              dataMax = <number>dataValue.maxLocal;
      
              return {
                  dataPoints: barChartDataPoints,
                  dataMax: dataMax,
                  settings: barChartSettings,
              };
          }
      • v-chuncz-msft's avatar
        v-chuncz-msft
        Community Support

        vkokorin,

         

        Well that's it! You can see the function is invoked.

                public update(options: VisualUpdateOptions) {
                    let viewModel: BarChartViewModel = visualTransform(options, this.host);