Cara menggunakan plotly gauge chart python

Business Intelligence (BI) is a set of resources and technologies used in business environments to transform data into knowledge. Its main objective is to improve the productivity and performance of every organization. BI relies on Key Performance Indicators Dashboards (KPI Dashboards).

A KPI Dashboard is a visual display of the operational and strategic information that managers and decision-makers need to evaluate their current process and to fix issues that may affect the business performance.

KPI dashboards must be simple to look at, navigate, and understand. Indicators providing information about a single quantitative measurement are usually used to represent the main metrics involved in business critical data. Therefore, indicators must be present on KPI dashboards.

Plotly includes a trace named Indicator with two gauge types: angular and bullet. Let’s analyze them separately.

Angular Gauge charts (Speedometer charts, Dial charts) visually indicate whether a quantitative measurement is below, within, or above a given range of numerical values. There are different layouts, the most frequent looks like the speedometer of a vehicle with a pointer or needle moving on a radial scale. Another classical layout includes a circular arc with a shaded bar inside it.

The number of ranges is variable (three, four, five), each one of them is identified with a certain color. For example: red, yellow, and green are used to represent alarm, caution, and satisfactory, or to represent low performance, normal performance, and high performance. Indicators usually include a target or threshold value represented by a vertical line with a different color than the ranges of values. This threshold value can be a benchmark, a previous value to be exceeded, or an objective to be achieved.

For the angular gauge chart in this article, the Plotly trace is go.Indicator() and the corresponding parameters are: domain to indicate the extent of the figure; title for the text over the gauge; value to indicate the numerical value to display; and mode = “gauge + number” to draw an a circular arc with the measured value.

The most important parameter is gauge with the following attributes: shape to set the shape (angular or bullet); steps to set the ranges and their corresponding colors; bar to indicate the color and thickness of the shaded bar. For the threshold value, we must indicate color, width, thickness, and value. If we want to indicate the scale around the circular arc, we must include the axis attribute. We formatted the numbers that appeared in the scale through a D3.format function.

So this is the code for an angular gauge chart:

In this gauge we decided to display the difference between the measured value and the reference value with an annotation inside a circle instead of the standard procedure (mode = “gauge + number + delta”):

The following figure displays an angular gauge chart with three sectors: S1 from 0 to 25, color red, low performance; S2 from 25 to 50, color yellow, normal performance; S3 from 50 to 100, color green, high performance. The measured value is set at 45 and encoded with a black curved bar. The objective to be achieved is set to 60 and indicated with an orange line. The measured value and its difference with the reference value are highlighted with big numbers.

Angular gauge charts are very simple graphics with an intuitive sequence of colors that provide a clear and easy way to understand the message even for non-specialized audiences.

They have some disadvantages: 1.- they take up a lot of physical space; 2.- they may omit key information; 3.- they do not portray the business context; 4.- they may confuse audiences with red-green color blindness. Always keep these disadvantages in mind to avoid a poor storytelling.

This type of figure shares with angular gauges the conceptual idea of providing information on a single numerical measure by comparing it against a reference value. The chart shows two to five ranges or sectors, differentiated by distinct colors, indicating qualitative values such as poor, average, and excellent.

Bullet charts include a central narrow linear bar that encodes the performance measure and a perpendicular line that encodes the reference measure. They have a quantitative scale along a linear axis with equispaced ticks.

For the bullet chart in this article, the Plotly trace is go.Indicator() and the corresponding parameters are: domain to indicate the extent of the figure; title for the text at the left of the figure; value to indicate the measured value. In contrast to the previous example, we show the difference between the measured value and the reference value using the standard procedure: mode = “gauge + number + delta”.

The most important parameters are gauge and delta. gauge has the following attributes: ‘shape’ : ‘bullet’ for drawing a horizontal bullet chart; axis to indicate the range of the linear scale; bar to indicate the color and thickness of the shaded linear bar; steps to set the ranges and their corresponding colors. For the threshold value, we must indicate color, width, thickness, and value. bordercolor and borderwidth are included to improve the final appearance of the figure.

The delta parameter requires a reference value, a position ("top" | "bottom" | "left" | "right" ). Finally, increasing and decreasing set the color and symbol for the number that indicates the difference between the measured value and the reference.

So this is the code for a bullet chart:

The following figure displays a bullet chart with five sectors: S1 from 0 to 20, color light green, good pollution level; S2 from 20 to 40, color green-yellow, moderate pollution level; S3 from 40 to 60, color yellow, sensitive groups pollution level; S4 from 60 to 80, color orange, unhealthy pollution level; S5 from 80 to 100, color red, dangerous pollution level. The measured value is set at 66 and encoded with a black linear bar. The dangerous level, not to be achieved, is set to 75 and indicated with a blue vertical line. The measured value and its difference with the reference value (60) are shown at the right of the figure. As the measure value is higher than the reference, the increasing attribute of the delta parameter indicates that difference with a red upwardly oriented triangle.

Bullet charts are also simple and easy to understand. They take up less physical space than angular gauge charts and their format is less distracting to audiences. However, as with the previous ones, they do not provide the full story and context that managers and decision-makers sometimes need to support better business decisions.