Working with Charts and Reports

bipp Tutorial

Chart Settings

Each chart type can be customized using the available settings. Click the to open the Settings for your report.

Table

Table Chart

Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Nav Bar Show or hide the pagination or navigation bar on top of the data grid. Values: Yes/No
Serial Numbers Select if serial numbers should be shown for rows.
Grand Total Show a row for grand totals at the end of the grid or chart.
Transpose Column Provides pivot view for the data where the aggregate columns are transposed to rows.
Highlight

Bar

Bar Chart

Orientation Orientation of the chart. Values: Horizontal or Vertical.
Y-Axis Range Used to limit the range of the Y-Axis. The chart is cropped to fit into the defined Left and Right ranges. Values: Yes/No. Min and max of range.
X Axis / Y Axis Labels Display labels as Horizontal, 45 Deg or Vertical.
Stack Bars Stack multiple dimensions in the same bar using different colors.
Auto Scale Automically scale the chart based on the values.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Zoom Slider Display a zoom slider so the user can zoom in on the X Axis.
Show Legend Display a legend.
Scroll Legend Enable scrolling for long legends.
Reference Line Include one or more reference lines for specific values, define a label to be displayed along the line, select the color and type of the line. Values: Yes/No with the option to choose value, label, color and line type when Yes is selected.
Color Palette Select palette for displaying charts graphs or maps.

Line

Line Chart

Orientation Orientation of the chart. Values: Horizontal or Vertical.
Y-Axis Range Used to limit the range of the Y-Axis. The chart is cropped to fit into the defined Left and Right ranges. Values: Yes/No. Min and max of range.
X Axis / Y Axis Labels Display labels as Horizontal, 45 Deg or Vertical.
Stack Bars Stack multiple dimensions in the same bar using different colors.
Auto Scale Automically scale the chart based on the values.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Zoom Slider Display a zoom slider so the user can zoom in on the X Axis.
Show Legend Display a legend.
Scroll Legend Enable scrolling for long legends.
Reference Line Include one or more reference lines for specific values, define a label to be displayed along the line, select the color and type of the line. Values: Yes/No with the option to choose value, label, color and line type when Yes is selected.
Color Palette Select palette for displaying charts graphs or maps.

Scatter

Scatter Chart

Orientation Orientation of the chart. Values: Horizontal or Vertical.
Y-Axis Range Used to limit the range of the Y-Axis. The chart is cropped to fit into the defined Left and Right ranges. Values: Yes/No. Min and max of range.
X Axis / Y Axis Labels Display labels as Horizontal, 45 Deg or Vertical.
Stack Bars Stack multiple dimensions in the same bar using different colors.
Auto Scale Automically scale the chart based on the values.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Zoom Slider Display a zoom slider so the user can zoom in on the X Axis.
Show Legend Display a legend.
Scroll Legend Enable scrolling for long legends.
Reference Line Include one or more reference lines for specific values, define a label to be displayed along the line, select the color and type of the line. Values: Yes/No with the option to choose value, label, color and line type when Yes is selected.
Color Palette Select palette for displaying charts graphs or maps.

Area

Area Chart

Orientation Orientation of the chart. Values: Horizontal or Vertical.
Y-Axis Range Used to limit the range of the Y-Axis. The chart is cropped to fit into the defined Left and Right ranges. Values: Yes/No. Min and max of range.
X Axis / Y Axis Labels Display labels as Horizontal, 45 Deg or Vertical.
Stack Bars Stack multiple dimensions in the same bar using different colors.
Auto Scale Automically scale the chart based on the values.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Zoom Slider Display a zoom slider so the user can zoom in on the X Axis.
Show Legend Display a legend.
Scroll Legend Enable scrolling for long legends.
Reference Line Include one or more reference lines for specific values, define a label to be displayed along the line, select the color and type of the line. Values: Yes/No with the option to choose value, label, color and line type when Yes is selected.
Color Palette Select palette for displaying charts graphs or maps.

Pie

Pie Chart

Type Type of Pie Chart. Values: Pie, Doughnut
Percent on Chart Show percentage on the chart.
Percent on Tooltip Show percentage on the tooltip.
Orientation Orientation of the legend. Values: Horizontal or Vertical.
Color Palette Select palette for displaying charts graphs or maps.

Metric

Id
Total Amount
Number of Columns Number of columns to split the sheet screen into when displaying the selected columns as a metric.
Text Font Size Font Size of Text/Data. Values: Range 1 to 100
Label Font Size Font Size of Label. Values: Range 1 to 100
Spacing between Rows Spacing between Label and Text. Values: Range 1 to 100
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Border Show/Hide border around each metric.
Background Use transparent background or default background.
Reverse Show label under the value when reversed.
Fill Space Select Yes to merge any empty columns in the last row after distributing data points available amongst number of columns selected.
Label Display a label.
Conditional Formatting Apply conditional formatting.

GridChart

Custom Column Width
Fill Container Select if chart should fill the width of the container.
Limit Column Width Select if column width for all columns should be limited/optimized.
Measures Scrollable Select if horizontal scroll should be available.
Show Serial Number Select if serial number should be shown for rows.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Parsed Format
Pivot Header On Top
Show Header Background Select to display a header background.
Grand Total Show a row for grand totals at the end of the grid or chart.
Table Tooltip Show a tooltip for the table.
Fixed Bar Width
Vertically Centered Text Select to vertically center text within the grid.
Horizontal Legend Select to display a legend horizonally on the chart.
Inverted Ticks Select to use inverted ticks.
Data Labels Show or hide the exact column value on the chart as a label.
Font Size Select the size for the Data Label.
Grand Total Show a grand total row and/or column.

Funnel

Legend Display a legend.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Orientation Orientation of the legend. Values: Horizontal or Vertical.
Color Palette Select palette for displaying charts graphs or maps.

Boxplot

Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Fill Box Use solid boxes in the plot.
Split Area Shades every other column (X Axis) or row (Y Axis) to improve readability.
Orientation Orientation of the legend. Values: Horizontal or Vertical.
Zoom Slider/Data Zoom Display a zoom slider so the user can zoom in on the X Axis.
Mark Line Show a mark line on the graph. When enabled, select the Type for the mark line: Average, Min or Max.
Mark Point Show a mark point on the graph. When enabled, select the Type for the point: Average, Min or Max and the Symbol to use: Circle, Rectangle, Round Rectangle, Triangle, Diamond, Pin or Arrow.
Color Palette Select palette for displaying charts graphs or maps.

Gauge

Show Label Display the labels around the gauge. Labels are set by the Gauge Range.
Show Detail Display the values for the selected Dimension and Measure.
Gauge Range Select the Min Value and Max Value for the gauge. The range is equally distributed around the gauge. Enable Show Label to display the range.
Color 1 the upper number for the first color segment.
Color 2 the upper number for the second color segment.
Color 3 the upper number for the third color segment. If this number is less than the Max Value a fourth segment color is used.
Color Palette Select palette for displaying charts graphs or maps.

In this example, the range is 0-100. Color 1 starts at Min Value and stops at 30. Color 2 is 30 to 60, Color 3 is 60-90. A fourth segment is added for 90 to Max Value.

Gauge Color Example

HeatMap

Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Legend Display a legend.
Split Area Shades every other column and row to improve readability.
Access Pointer Display the access pointer to highlight the column and row of the cursor position.
X Axis / Y Axis Labels Display labels as Horizontal, 45 Deg or Vertical.
Orientation Orientation of the legend. Values: Horizontal or Vertical.
Color Palette Select palette for displaying charts graphs or maps.

Bullet

Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Label Display the label on the graph.
Tooltip Display a tooltip when hovering over data.
Color Palette Select palette for displaying charts graphs or maps.

Bubble

Bubble Size Select the bubble size: Small, Medium or Large.
Tooltip Display a tooltip when hovering over data.
Access Pointer Display the access pointer to highlight the column and row of the cursor position.
X Axis / Y Axis Labels Display labels as Horizontal, 45 Deg or Vertical.
Color Palette Select palette for displaying charts graphs or maps.

Sparkline

Legend Display a legend.
Chart Type Select the chart type for the data representation: Line, Bar, Circle, Area, Point, Rect, Rule, Square or Tick.
Color Palette Select palette for displaying charts graphs or maps.

TreeMap

Column Name Display the column name on the Chart and/or Tooltip.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Breadcrumb Display the breadcrumb at the bottom of the heat map.
Color Palette Select palette for displaying charts graphs or maps.

Map

Geo Map Maps data containing locations (Country-City or Latitude-Longitude) with associated measures. The map uses different colors or shades based on the value of the measure mapped. The location and value are displayed as a tooltip as you hover over regions where data is mapped.
Scatter Map Maps data containing locations with associated measures in a scatter type of visualization.
Network Map Maps data containing two sets of locations to visualize the network path from source to destination. This type of a map can be generated without a measure column.
Path Map Visualizes the path traversed by a particular entity based on the touch points identified by the location coordinates (latitude, longitude). The entity itself can be identified by marking it as the Segment column. Origin and Destination set the endpoints. This type of a map can be generated without a measure column. Here is an example of a segmented path map where the column Device Id has been used for segmentation.
Lat Lng Mode Use latitude/longitude mode for Scatter, Network or Path maps.
Set Dimension & Measure Different map types have different options. Options include: Country, City, Size, Segment, Origin, Destination, Measure, Longitude, Latitude and Color.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Color Palette Select palette for displaying charts graphs or maps.

gMap

Data that includes dimensions based on Country + City or Latitude + Longitude can be visualized by using the gmap visualization. This uses Google maps in the background.

Choropleth Map Maps data containing locations (Country-City or Latitude-Longitude) with associated measures. This example shows the visualization for the data on a gMap - Geo Map. The map uses different colors or shades based on the value of the measure mapped.

The location and value are displayed as a tooltip as you hover over regions where data is mapped.
Scatter Map Maps data containing locations with associated measures in a scatter type of visualization.
Network Map Maps data containing two sets of locations to visualize the network path from source to destination. This type of a map can be generated without a measure column.
Path Map Visualizes the path traversed by a particular entity based on the touch points identified by the location coordinates (latitude, longitude). The entity itself can be identified by marking it as the Segment column. Origin and Destination set the endpoints. This type of a map can be generated without a measure column. Here is an example of a segmented path map where the column Device Id has been used for segmentation.
Marker Map Adds push pin markers to a Choropleth map.
Lat Lng Mode Use latitude/longitude mode for Scatter, Network or Path maps.
Set Dimension & Measure Different map types have different options. Options include: Country, City, Size, Segment, Origin, Destination, Measure, Longitude, Latitude and Color.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.
Color Palette Select palette for displaying charts graphs or maps.

Graph

Node Type Select the node type for the graph: Box or Dot.
Select/Change Source Select the dimension to use for the source.
Select/Change Target Select the dimension to use for the target.
Select/Change Value Select the dimension to use for the value.
Auto Format Format numbers to use K for thousands, M for Millions and so on. For example: 2450 appears as 2.45K, 5870000 appears as 5.87M.

Custom

Extensions enable you to design custom visualizations for your data and upload them to bipp. You can use the extensions with the Custom chart type. Extensions are created as plug-in JavaScript files using the bipp Extensions API.