Giter Club home page Giter Club logo

powerbi-visuals-bulletchart's Introduction

powerbi-visuals-bulletchart

BuildCoverage Status

A bullet chart that includes four orientations and a few customization options. Use to feature a single measure against a qualitative range.

Bullet chart screenshot

Overview

Bullet chart serves as a replacement for dashboard gauges and meters. Bullet charts were developed to overcome the fundamental issues of gauges and meters.

The bullet chart features a single, primary measure (for example, current year-to-date revenue), compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good. The qualitative ranges are displayed as varying intensities of a single hue to make them discernible by those who are color blind and to restrict the use of colors on the dashboard to a minimum.

Bullet charts may be horizontal or vertical, and may be stacked to allow comparisons of several measures at once.

The Bullet chart consists of 5 primary components:

  • Text label: Your chart caption which defines what your chart is about and the unit of measurement.
  • Quantitative Scale: Measures the value of your metric on a linear axis.
  • The Featured Measure: The bar that displays the primary performance measure (eg: Revenue YTD).
  • Comparative Measure: The measure against which you want to compare your featured measure (eg: Target revenue).
  • Qualitative Scale: The background fill that encodes qualitative ranges like bad, satisfactory, and good.

See also Bullet chart at Microsoft Office store

powerbi-visuals-bulletchart's People

Contributors

alekssavelev avatar avisander avatar dependabot[bot] avatar eugeneelkin avatar ignatvilesov avatar microsoft-github-policy-service[bot] avatar mulyukovaidar avatar mvgaliev avatar pbicvbot avatar uve avatar vtkalek avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

powerbi-visuals-bulletchart's Issues

powerbi.extensibility.utils is always undefined

Good day.

Maybe this is stupid question, but I spent a low of time on this, and still didn`t resolve the issue.

I`m trying to make this sample work but when I downloaded it and used

npm install -save

After this I used

pbiviz start .

When I try to run this, it doesnt work. In console Im always catching the same error:

VM9635:24937 Uncaught TypeError: Cannot read property 'dataview' of undefined
at :24937:69
at :25013:11
at :25014:7
at Object. (:25015:3)
at Object. (:26041:30)
at webpack_require (:35:30)
at :99:18
at Window. (:102:10)
at :27655:20
at Object.i [as injectJsCode] (VM9320 visualhostcore.min.js:2)

image

What can be a reason of this problem?

This is my pbiviz.json:

{
"visual": {
"name": "BulletChart",
"displayName": "Bullet Chart 1.8.1",
"guid": "BulletChart1443347686880",
"visualClassName": "BulletChart",
"version": "1.8.1",
"description": "A bullet chart that includes four orientations and a few customization options. Use to feature a single measure against a qualitative range.",
"supportUrl": "https://community.powerbi.com",
"gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-bulletchart"
},
"apiVersion": "1.13.0",
"author": {
"name": "Microsoft",
"email": "[email protected]"
},
"assets": {
"icon": "assets/icon.png"
},
"externalJS": [
"node_modules/lodash/lodash.min.js",
"node_modules/d3/d3.js",
"node_modules/powerbi-visuals-utils-typeutils/lib/index.js",
"node_modules/moment/min/moment.min.js",
"node_modules/globalize/lib/globalize.js",
"node_modules/globalize/lib/cultures/globalize.culture.en-US.js",
"node_modules/powerbi-visuals-utils-svgutils/lib/index.js",
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
"node_modules/powerbi-visuals-utils-formattingutils/lib/index.js",
"node_modules/powerbi-visuals-utils-interactivityutils/lib/index.js",
"node_modules/powerbi-visuals-utils-chartutils/lib/index.js",
"node_modules/powerbi-visuals-utils-colorutils/lib/index.js",
"node_modules/powerbi-visuals-utils-tooltiputils/lib/index.js"
],
"style": "style/bulletChart.less",
"capabilities": "capabilities.json"
}

And tsconfig.json:

{
"compilerOptions": {
"allowJs": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES5",
"sourceMap": true,
"out": "./.tmp/build/visual.js",
"declaration": true
},
"files": [
".api/v1.13.0/PowerBI-visuals.d.ts",
"node_modules/powerbi-visuals-utils-typeutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-formattingutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-interactivityutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-svgutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-chartutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-colorutils/lib/index.d.ts",
"node_modules/powerbi-visuals-utils-tooltiputils/lib/index.d.ts",
"node_modules/powerbi-models/dist/models-noexports.d.ts",
"src/dataInterfaces.ts",
"src/settings.ts",
"src/columns.ts",
"src/visualLayout.ts",
"src/visual.ts"
]
}

Thank you in advance!

In Power BI Service, bullet charts change vertical alignment

Hi, I noticed that when i publish a report to PBI service:

  • If the Bullet Chart has a title: after finishing loading the page, all bullet charts in the page automatically move down a bit inside the visualization container (resulting in misalignment in the report)

  • If the Bullet Chart has no title: everything is ok, until you interact with a slicer. Then, all Bullet Charts automatically move down.

Other than that, the viz is extremely useful.

Thanks,
Andrea

Wrong colours with none Default Theme

Use a none-default color theme in Power BI, then for this visual do a format for "Colors" and "Axis". Select a color from the theme and you will see: the applied color is not the same as the selected color.

Add Data label option for all data points and provide a place holder for more tooltips.

If we have multiple KPI in the tool, the visual looks good. But as we could not see the actual data value for a given KPI. it is been difficult for reading the visual. so please add the value of all the data points and given an option to show along with x-axis values or not.

Give a place holder to show more TOOL TIPS as in other visuals.

New TOOLTIP REPORT Page support also.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.