The Microsoft Power BI visuals project provides high quality data visualization that you can use to extend Power BI. The project contains over 30 visualization types, the framework to run them, and the testing infrastructure that enables you to build high quality visualizations.
Switch branches/tags
Clone or download
Pull request Compare This branch is 1357 commits ahead, 1 commit behind avontd2868:master.
Latest commit bc09de8 Oct 29, 2018

README.md

Microsoft Power BI visuals plus custom visuals by MAQ Software

The Microsoft Power BI visuals project provides high quality data visualizations that you can use to extend Power BI. The project contains over 30 visualization types plus custom visuals by MAQ Software, the framework to run them, and the testing infrastructure that enables you to build high quality visualizations. The framework provides all the interfaces you need to integrate fully with Power BI's selection, filtering, and other UI experiences. The code is written in TypeScript so it's easier to build and debug. Everything compiles down to JavaScript and runs in modern web browsers. The visuals are built using D3 but you can use your favorite technology like WebGL, Canvas, or SVG. This gives you everything you need to build custom visualizations for Power BI.

Custom Visuals



Circular Gauge by MAQ Software Linear Gauge by MAQ Software Brick Chart by MAQ Software
Circular Gauge
Illustrates progress toward
goals in either a pie or
donut chart format. One color
illustrates current progress,
the other displays the
target. The percentage
displayed on the report
tracks progress against the
target. Text size and ring
size are customizable.







App Source URL
Linear Gauge
Create at-a-glance
visualization to compare your
progress against identified
goals and warning zones. This
visual allows you to include
multiple data points. The
component provides the
ability to illustrate trend
details such as monthly or
year-to-date completion
rates. The pointer notes
targets, and the colored bar
shows the current progress
toward those goals. Best
suited for showing progress as
compared to a target.

App Source URL
Brick Chart
Consists of 100 squares that
are colored according to the
percentage breakdown of
datasets. Hovering your mouse
over a square brings up a
tooltip. The tooltip
indicates which dataset the
color represents and the
percentage value of the
category. An optional legend
above the chart identifies
which datasets correspond
with which colors. You may
tailor the legend's title,
size, and color. They may also
customize the chart's width
and height.
App Source URL


Trading Chart by MAQ Software Bowtie Chart by MAQ Software Horizontal Funnel by MAQ Software
Stock Chart
Displays significant stock
price points as colored
vertical bars. Low and high
price values are represented
by grey bars. Open and close
price values are shown as
either red or green bars,
which are superimposed over
the low and high values. If a
stock's price drops, the bar
is red; if the price rises
the bar is green. Prices are
listed on the vertical axis
and time increments are
listed on the horizontal
axis. The ranges for prices
and time increments are
customizable.
App Source URL
Bowtie Chart
Displays the categorization of
an aggregated value by
branching out smooth
interpolated nodes. The
thickness of the branch
indicates the weight of the
category. You can display a
half bowtie or full bowtie by
providing the source category
or the source and destination
categories, respectively.







App Source URL
Horizontal Funnel
Allows you to visualize
customizable primary measure
as colored bars. You can use
Horizontal Funnel to display
a variety of metrics
including sales stages, time,
or geographic locations. A
second customizable value is
displayed beneath the colored
bars, allowing users the
ability to track an
additional metric against the
primary measure. The
component includes the option
to create a tool tip, which
you may tailor to fit
specific needs.

App Source URL


Ring Chart by MAQ Software JSON Grid by MAQ Software Thermometer by MAQ Software
Donut Chart
Represents data as slices,
where sizes are relative to
data. The size of each slice
is determined by the slice
value relative to the sum of
the values of all slices.
Each data series that you
plot in the chart adds a ring
to the chart. The rings have
different colors for easy
representation of the data
slices in the chart.
Key features:
1. Ability to turn on
animation to focus on
specific slices. The
animation visually pulls
slices out of the ring chart.
2. Dynamic indicator displayed
along with the summary at the
center of ring. Threshold
values define the color and
direction of the indicator.
3. Ability to display primary
and secondary measures in
legends with indicators.
4. Ability to showcase
multiple data fields in
tooltips.
App Source URL
Grid
Easy to use control with
pagination, sorting, and GET
Rest API call functionality.
Grid allows you to add a
paginated grid to a report
and specify the default sort
column and sort order for the
grid. It also allows you to
call an API on any additional
column if further processing
needs to be done.
Want to have a grid with a
pagination feature? Want to
have a grid which supports
calling APIs?
If yes, you can use Grid Power
BI custom visual.












App Source URL
Thermometer
Shows a graphical
representation of a value
against a threshold. Allows
you to configure threshold
values and render data per
the threshold. Thermometer is
a good way to represent data
when you have the actual
value and the target value
(maximum threshold).



















App Source URL


Text Wrapper by MAQ Software KPI Column by MAQ Software KPI Grid by MAQ Software
Text wrapper
Wraps a static text string
(statement) along with a
dynamic text field value. The
dynamic field value updates
according to the selected
filter/slicer, keeping the
static text intact. The user
needs to provide the static
string, which will be
appended as ": <>" after
the dynamic field value in
the visual, resulting in the
final value in the
visual as: "<> : <>"























App Source URL
KPI Column
Column chart where each column
behaves as an indicator when
compared with a line. Column
color updates dynamically
based on the difference in
column height and respective
target line value. Adding
common threshold value exists
for all columns. For upcoming
values, the same target line
can be used for forecasting
and the column is displayed
in a translucent color to
indicate forecasted values.























App Source URL
KPI Grid
Display data in hierarchical
order, with options to
separate categories and
illustrate trends.
Effortlessly track
productivity and performance.
The grid displays key data in
hierarchical order.
Use arrows to illustrate KPI
trends over time, such as
year-to-year or
quarter-to-quarter. You
specify the time periods,
making it easy to gauge
performance according to
internal deadlines and
benchmarks.
KPI Grid includes the option
to place separators between
certain columns. Using this
feature, you can visually
draw out categories that you
would like to compare or
emphasize.
With KPI Grid's numerous
formatting choices, you can
customize your text,
background, and units. Tailor
the look and feel of your
visual by updating rows'
background colors or text
size and color. Easily call
attention to headers and
totals by creating first and
last rows that are visually
distinct from the rest of the
grid.
App Source URL


Journey Chart by MAQ Software Dynamic Tooltip by MAQ Software Rotating Tile by MAQ Software
Journey Chart
Transforms dense statistical
data into clear networks of
categories and relationships.
Reveal connections in your
data with a storytelling
visual. In this intuitive
graph, nodes represent
categories and vertices
represent relationships
between categories. The
bigger the node or vertex, the
larger the value.
Journey Chart's customizable
node colors make it easy for
viewers to distinguish
between categories. Users can
also enable text labels and
tooltips for each node to
provide additional
information, such as a
category's title and value.
The color and size of text
labels are adjustable. The
option to enable a legend
gives you the opportunity to
clarify complex graphs that
describe many types of data
and categories.
You can use the visual for
numerous scenarios, including:
1. Explaining a process' flow
2. Uncovering underlying
patterns
3. Highlighting subcategories
stemming from a single source
4. Showing the connectedness
of key categories
App Source URL
Dynamic Tooltip
Increase your audience's
understanding of your data by
adding tooltips to your
visuals. Most tooltips
display static information or
images. With this visual, you
can display data fetched from
a separate source. This
allows you to create a
tooltip that does not require
constant adjustment. When
your data changes, the tooltip
changes too.
Dynamic Tooltip also works
well with static statements.
If you would like to add some
helpful information for your
audience, simply enter your
text into the display field.
The decimal points, type of
display units, and the
tooltip's icon image are all
customizable.














App Source URL
Rotating Tile
Automatically flipping tile
with a set frequency that can
be used to display different
KPIs. Useful when multiple
KPIs or metrics need to be
displayed using minimal space
on report.
Each flip of the rotating tile
can have a new value based on
number of KPIs that needs to
be displayed. Based on the
space requirements of the
report, the tile can be
rotated either on horizontal
axis or vertical axis. For
better visibility and to
ensure the end user can
browse the tile data
conveniently, a timer can be
set for the flip delay.
Additionally, Rotating Tile
has an option to provide a 3D
effect.
Rotating Tile has size and
color formatting options for
label, title, text fonts,
background, and borders.










App Source URL


Rotating Chart by MAQ Software Quadrant Chart by MAQ Software Cylindrical Gauge by MAQ Software
Rotating Chart
Automatically flipping chart
with a set frequency to
display different KPIs with
each flip. This horizontal
bar chart rotates on the
horizontal axis to showcase
multiple KPIs with each flip
or rotation. Rotating Chart
is useful when multiple KPIs
or metrics sliced by
categories are to be
displayed. It uses minimal
space, thus saving room on the
report or dashboard.
Each flip can have a new value
based on the number of KPIs
that need to be displayed.
For better visibility and to
ensure the end user can
browse the visual data
conveniently, a timer can be
set for the visual for the
flip or rotation delay.
Rotating Chart has size and
color formatting options for
label, title, text fonts,
background, and borders.



App Source URL
Quadrant Chart
Represent data in separate
quadrants to show
distribution of data and
items that share common
traits. This visual is useful
for plotting data that
contains three measures using
an X-axis, a Y-axis, and a
bubble size that represents
the value of the third measure.
The formatting options below
are provided for the visual:
1. Set color of each bubble.
2. Legends setting: on/off,
position, title, color and
text size.
3. Formatting option for
quadrants and quadrant lines:
four Quadrant names, X-Axis
division line, Y-Axis
division line and
Dotted/solid.
4. Formatting option for
X-Axis: title, title text,
labels, display units and
decimal points.
5. Formatting option for
Y-Axis: title, title text,
labels, display units and
decimal points.
App Source URL
Rotating Chart
Tracks current values against
a target with an intuitive 3D
cylinder visual. The
cylindrical gauge's fill line
gives users an easy way to
understand how actual values
weigh against a target
capacity. The tool is useful
for evaluating inventory,
fuel, or other repository levels.
Features:
1. Actual value display. For
added clarity, the fill
line's actual value is listed
below the cylinder.
2. Tick marks. Users may
adjust or disable this
feature. By default, tick
values are enabled, with the
minimum set to 0 and the
maximum set to 100.
3. Max threshold definition.
Users may include a maximum
threshold to see whether the
actual value is over capacity.
4. Scroll bar. When height
restrictions limit how much
of the gauge is visible, a
vertical scroll bar allows
users to navigate up and down.
App Source URL


Dot Plot by MAQ Software Funnel with Source by MAQ Software Histogram with points by MAQ Software
Dot Plot Chart
Displays distribution using
dots across multiple
categories. This statistical
chart consists of data points
(bubbles) plotted on an XY
axis, distributed over a
desired set of values. The
size of the bubble represents
magnitude; color represents
the type of category. Dot
Plot enables users to view
data through multiple parent
categories and child sub-categories.
Dot Plot supports selection,
partial highlighting, multi
selection, legends, tooltips,
displaying different color
bubbles for different
categories, and all other
default formatting options
available in Power BI. Users
can modify bubble size,
orientation of the chart,
X-axis and Y-axis text,
background and start the
axis from a specified value.
App Source URL
Funnel with Source
Funnel with Source, as the
name suggests, showcases the
funnel journey of any metric/
data point. The visual can
help visualizing count of any
metric of interest over
various stages along with the
source of entry or entry
channel of the data point
through which it reaches the
funnel. For example, in the
case of sales journey data,
this visual displays the
channel through which any
lead enters the funnel and
then the corresponding
journey through the various
stages of sales cycle. We can
also filter data based on the
selection of channel and on
the selection of any stage of
the sales journey.
Cross visual filter is also
supported by this visual.


App Source URL
Histogram
Combines benefits of showing
point distribution along with
actual values. The following
formatting options are
provided in this visual:
1. Show or hide points in the
chart
2. Show or hide histogram bars
3. Show or hide X-axis
4. Show or hide Y-axis-right
5. Show or hide Y-axis-left
(Y-axis of histogram)
6. Show or hide grid lines













App Source URL


KPI Ticker by MAQ Software Venn Diagram by MAQ Software Box and Whisker by MAQ Software
KPI Ticker
Automatically flipping visual
that allows you to view
various metrics along with
trend indicators. KPI Ticker
allows you to configure a set
of metrics that will be shown
in rotation. It also allows
you to specify trend
indicators that show the
percentage or value drop or
increase. Suitable for
applications that focus on
key metrics and the metric
value increase or decrease.
Visually attractive with
ability to change colors of
tiles and trend indicators.



















App Source URL
Venn Diagram
Venn diagram displays all
possible logical relations
between a collection of
datasets, each typically
represented as a circle. Each
circle (set) is a collection
of objects or array of data
that all have something in
common. When multiple circles
(sets) overlap, it is known
as the intersection - this is
where data that has all the
qualities that the
overlapping sets have. Each
circle can have their
distinguishing name and color
to differentiate from other
circle or sets. Labeling of
each circle helps in knowing
its individual or intersected
region's value. The same
information is also visible by
hovering on any of the
regions.












App Source URL
Box and Whisker
Box and whisker charts are
most commonly used in
statistical analysis like
comparing medical trial
results or teachers' test
scores et. al. It consists of
two parts - the main body
called the Box and the thin
vertical lines coming out of
the Box called Whiskers. The
first quartile forms the
bottom and the third quartile
forms the top of the Box. The
Whiskers connect the minimum
and the maximum values to the
Box. In addition to showing
median, first and third
quartile and maximum and
minimum values, the Box and
Whisker Chart is also used to
depict Mean, Standard
Deviation and Quartile Deviation.
While other Power BI Box plots
have the capability to
display these statistics
data, Box Plot by MAQ
Software provides more
details and clarity of the
figures by providing more
user controls and
capabilities to suit the
exact needs of the use case
like ability to add parent
axis and flip visual
horizontally or vertically
based on reporting requirement.
App Source URL


Gantt Chart by MAQ Software Slope Chart by MAQ Software Dumbbell Chart by MAQ Software
Gantt Chart
Gantt Chart is used for
scheduling and management of
task. While an ordinary Gantt
Chart just displays the basic
details like task id or name
and their schedules, Gantt
Chart by MAQ Software
provides more details of the
task by providing a grid
where one can view more data
related to the task and can
display the hierarchy of data
category. Also, data can be
sorted based on any data point
of the task.
For example, take case of
project management, while
other visuals will just
provide project id/name,
start time, end time and
current status, this visual
can provide additional
details (data points) apart
from the mentioned such as
duration of project, owner of
the project along with KPIs
such as 'priority' etc. on a
grid as separate columns
inside the visual itself.
Apart from additional
information about the
project, this visual let the
user view project hierarchy
(i.e.) tasks under any
project and their progress.
User can sort the project/task
based on their data points as
present on the grid column.
The visual lets you configure
the detailing of information
as per requirement. Other
formatting features can
represent information in a
way that best tells the story
of your data.
App Source URL
Slope Chart
Slope Chart allows users to
analyze trends in data at a
glance. This visual is useful
for comparing interactions
between two data points based
on time or other user-chosen
parameters. Slope Chart
places primary emphasis on
end points by focusing on the
difference between the start
and end values.
Key features include:
1. The ability to display
trends across various
indicators.
2. Quick comparison of
indicator growth or loss
across categories.
3. Easy interaction with many
data points using the zoom
functionality.
4. Quick downloading of an
image of the chart with the
capture image widget.
R package dependencies (auto
installed): plotly and ggplot2



















App Source URL
Dumbbell chart
Dumbbell Chart helps users
analyze changes in critical
data. This visual is an
excellent choice for
illustrating the change
between two data points and
comparing the distances
between them. Dumbbell Chart
gets its name thanks to its
resemblance to a gym weight.
The visual consists of a
dual-axis combination chart,
where one axis is marked by a
circle and the other is
marked by a line that spans
data points provided by the
user.
Key features include:
1. The ability to display the
performance of multiple
indicators.
2. The ability to compare the
growth or loss of indicators
across various categories.
3. Easy interaction with many
data points using the zoom
functionality.
4. Quick downloading of an
image of the chart with the
capture image widget.
R package dependencies (auto
installed): plotly and ggplot2













App Source URL


Forecast using Neural Network by
MAQ Software
Clustering using OPTICS by
MAQ Software
Data Insights by
MAQ Software
Forecast using Neural Network by MAQ Software
Forecast the future values
based on the historical data
by employing Neural Network
algorithm for time series
forecasting. Forecasting is
useful for a variety of
professions spread over
numerous fields, be it
budget, sales, demand or
inventory. Better forecasts
of future lead to better and
more well-informed decisions.
Forecasting using Neural
Network implements an
‘Artificial Neural Network’
to learn from observed data
over a time to predict the
values of future.
It employs a single layer feed
forward network with lagged
inputs to deal with time
series values.
Key features include:
1. Ability to use years or
distinct numerical values in
place of Date/Date&Time
field. (The visual will work
for both numerical series
i.e. years/numbers and proper
Date/Time values).
2. Ability of hover tooltips
and highlighting a portion of
the plot.
3. Capability to manually
adjust the parameters of the
learning model.
R package dependencies (auto
installed): Forecast, plotly,
zoo, xts
App Source URL
Clustering using OPTICS by MAQ Software
Analyse a given dataset based
on OPTICS algorithm and
identifies clusters in your
data. The algorithm works on
density based clustering, so
you can also identify
individual points that don’t
belong to any of the groups.
You can also perform
hierarchical clustering on
your data to identify more
closely-knit groups within
larger groups. This visual
also allows you to adjust the
clustering parameters to
control hierarchy depth and
cluster sizes.
Key features include:
1. Ability to identify
outliers based on convex hull
plots.
2. Data is scaled and
pre-processed automatically
so no need to do so externally.
3. Add your own dataset for
tooltips.
4. Ability to identify sub
clusters/hierarchal clusters
in your data.
5. Ability of hover tooltips
and zoom effects.
6. Capability to manually
adjust the parameters of the
clustering model.
7. No need to define the
number of clusters.
R package dependencies (auto
installed): Dbscan, plotly,
ggplot2
App Source URL
Data Insights by MAQ Software
Data Insights by MAQ Software
allows users to view data
in multiple formats and
quickly narrow data results.
Users can switch between
horizontal bar, vertical bar,
brick, or tabular formats. With
Data Insights by MAQ Software,
users can easily explore
data, select specific data,
and view selected data
in the format that best
fits individual business needs.

Key features:
1. Display data in bar, brick,
and tabular formats.
2. Custom text and background
colors.
3. Tooltips with additional insights.

Business applications:
1. Display multiple sales
KPIs simultaneously.
2. Shift between multiple KPIs
or reporting periods by
changing the axis base.












App Source URL


PowerBI Visual Tools (pbiviz) - Installation

Before you can get started you'll need to install the tools. This should only take a few seconds.

Dependencies

Before you can run (or install) the command line tools you must install NodeJS.

Installation

Npm Version Npm Downloads
To install the command line tools simply run the following command

npm install -g powerbi-visuals-tools

To confirm it was installed correctly you can run the command without any parameters which should display the help screen.

pbiviz

Server certificate setup

To enable live preview visual assets need to be served on a trusted https server so before you can start you need to install an ssl certificate which will allow visual asssets to load in your web browser. This is a one time setup.

Enable developer visual

To view/test your visual in PowerBI you need to enable the development visual and then you can add it to any report.

Running the visuals in this repository

Select the visual you want to run. Navigate to the root of visual project (the directory containing pbiviz.json). Simply run the following commands

#This will install modules listed in package.json
npm install 

#This will install type definitions listed in typings.json
typings install 

#To run the visual
pbiviz start

That's it you are good to go. You can see that the visual is running.

Copyrights

Copyright (c) 2018 Microsoft and MAQ Software

See the LICENSE file for license rights and limitations (MIT).