Chapter 6. Gauge, Polar, and Range Charts

In this chapter, we will learn how to create a gauge chart step by step. A gauge chart is very different from other Highcharts graphs. We will explore the new settings by plotting something similar to a twin-dials Fiat 500 speedometer. After that, we will review the structure of the polar chart and its similarity with other charts. Then, we will move on to examine how to create a range chart by using examples from the previous chapter. Finally, we will use a gauge chart to tweak the radial gradient in stages to achieve the desired effect. In this chapter, we will cover the following topics:

• Plotting a speedometer gauge chart

• Demonstrating a simple solid gauge chart

• Converting a spline chart to a polar/radar chart

• Plotting range charts with market index data

• Using a radial gradient on a gauge chart

Loading gauge, polar, and range charts

In order to use any gauge, polar, and range type charts, first we need to include an additional file, highcharts-more.js, provided in the package:

 <script type="text/javascript" 
     src="http://code.highcharts.com/highcharts.js"></script>
 <script type="text/javascript" 
     src="http://code.highcharts.com/highcharts-more.js"></script>

Plotting a speedometer gauge chart

Gauge charts have a very different structure compared to other Highcharts graphs. For instance, the backbone of a gauge chart is made up of a pane. A pane is a circular plot area for laying out chart content. We can adjust the size, position, and background of the pane. Once a pane is laid out, we can then put the axis on top of it. Highcharts supports multiple panes within a chart, so we can display multiple gauges (that is, multiple gauge series) within a chart. A gauge series is composed of two specific components—a pivot and a dial.

Another distinct difference in gauge charts is that the series is actually one dimensional data: a single value. Therefore, there is only one axis, the y axis, used in this type of chart. The yAxis properties are used the same way as other series type charts which can be on a linear, datetime, or logarithmic scale, and it also responds to the tickInterval option and so on.

Plotting a twin dials chart – a Fiat 500 speedometer...

Plotting the solid gauge chart

Highcharts provides another type of gauge chart, solid gauge, which has a different presentation. Instead of having a dial, the chart background is filled with another color to indicate the level. The following is an example derived from the Highcharts online demo:

The principle of making a solid gauge chart is the same as a gauge chart, including the pane, y axis and series data, but without the dial setup. The following is our first attempt:

            chart: {
                renderTo: 'container',
                type: 'solidgauge'
            },
            title: ....,
            pane: {
               size: '90%',
                background: {
                    innerRadius: "70%",
                    outerRadius: "100%"
                }
            },
            // the value axis
            yAxis: {
                min: 0,
                max: 200,
                title: {
                    text: 'Speed'
                }
            },
     ...

Converting a spline chart to a polar/radar chart

Polar (or radar) charts are generally used to spot data trends. They have a few differences from line and column type charts. Even though they may look like pie charts, they have nothing in common with them. In fact, a polar chart is a round representation of the conventional two-dimensional charts. To visualize it another way, it is a folded line or a column chart placed in a circular way with both ends of the x axis meeting.

Again, we need to include highcharts-more.js in order to plot a polar chart. The following screenshot illustrates the structure of a polar chart:

There are very few differences in principle, and the same also applies to the Highcharts configuration. Let's use our very first example of a browser usage chart in Chapter 1, Web Charts, and turn it into a radar chart. Recalling the browser line chart, we made the following:

To turn the line chart into a polar chart, we only need to set the chart.polar option to true, which transforms...

Plotting range charts with market index data

Range charts are really line and column type charts presenting a series of data in range. The set of range type series can be arearange, areasplinerange, and columnrange. These series expect an array of three data points, x, y min, y max, in the data option or array of y min, y max if xAxis.cateogries has already been specified.

Let's use our past examples to see whether we can make an improvement to the range charts. In Chapter 2, Highcharts Configurations, we have a five-series graph showing the monthly data of Nasdaq 100: open, close, high, low, and volume, as shown in the following screenshot:

With the new range series, we sort the series data and merge the Monthly High and Monthly Low columns into a column range series, and the Open and Low columns into an area spline range series, as follows:

            series: [{
              type: 'columnrange',
              name: 'High & Low',
              data: [ [ 2237.73, 2336.04 ], 
        ...

Using a radial gradient on a gauge chart

The radial gradient setting is based on SVG. As its name implies, a radial gradient is color shading radiating outwards in a circular direction. Therefore, it requires three properties to define the gradient circle—cx, cy, and r. The gradient circle is the outermost circle for shading, such that no shading can go outside of this.

All the gradient positions are defined in ratio values between zero and one with respect to their containing elements. The cx and cy options are at the x, y center position of the outermost circle, whereas r is the radius of the outmost circle. If r is 0.5, it means the gradient radius is half the diameter of its element, the same size as the containing pane. In other words, the gradient starts from the center and goes all the way to the edge of the gauge. The stop offsets option works the same way as the linear gradient: the first parameter is the ratio position in the gradient circle to stop the shading. This controls the...

Summary

In this chapter, we learned about gauge, polar, and range charts. An extensive step-by-step demonstration showed how to plot a complex speedometer by utilizing most of the gauge options. We also demonstrated the differences between polar, column, and line charts with respect to principle and configuration. We used range charts to improve past chapter examples and study the subtle differences they insert into the chart. Finally, we explored how to define radial gradients by tweaking the options in stages.

In the next chapter, we will learn the structure of a bubble chart by recreating it from an online sport chart. Then, we will briefly discuss the properties of a box plot chart by transforming data from a spider chart, following with presenting the F1 race data with an error bar chart.