In this chapter, we will learn about chart types that are different from the commonly used ones and use different configuration options. These include angular gauge, solid gauge, VU meter, waterfall chart, pyramid chart, funnel chart, and finally, a heat map. To be specific, we will cover the following topics:
Creating and configuring an angular gauge
Plot a solid gauge chart
Create a VU meter
Plotting and funneling pyramid charts
Drawing a heat map—a new chart type introduced in Highcharts 4
Angular gauge charts are also known as speedometers and dials. They are great to use on dashboards, especially when the plotted data is being fetched in real time. These charts don't contain the x axis, but instead, they contain only one value axis, that is, the y axis. Anything provided for the x axis will not be drawn on the chart.
In the following example, we will plot a simple angular gauge chart to take a look at the configuration options it offers:
$( '#chart_container' ).highcharts({
chart: {
type: 'gauge'
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: {
title: {
text: 'km/h'
},
min: 0,
max: 200
},
series: [{
name: 'Speed',
data: [120]
}]
});Nothing much is going on here as we declared the chart type to be gauge. Then, for the pane component, we defined its start and end angles at -150 and 150, respectively. This will create a simple gauge chart as...
A VU meter is the same as an angular gauge but, instead of having a full circle-like shape, it's more like an arc. All the configuration options that we learned for the angular gauge chart apply to the VU meter as well.
In the following example, we will create a simple VU meter to plot the global emission of CO2 in the year 2012:
$( '#chart_container' ).highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: 'none'
},
title: {
text: 'Global CO<sub>2</sub> Emission in 2012 (in billion metric tons)',
useHTML: true
},
pane: {
startAngle: -45,
endAngle: 45,
background: {
backgroundColor: 'none',
borderColor: 'none'
},
size: 400,
center: ['50%', '60%']
},
tooltip: {
enabled: false
},
plotOptions: {
gauge: {
dial: {
radius: '95%'
}
}
},
yAxis: {
min: 0,
max: 16,
tickInterval: 2,
tickPosition: 'outside',
minorTickInterval: 0,
labels: ...Solid gauges were introduced in Highcharts 4 and they are similar to angular gauges, except that they use solid colors to display the value. This color responds to the value on the y axis, and we can define the colors that correspond to different value ranges in yAxis.stops in an array.
Consider the following example in which we will configure a solid gauge:
$( '#chart_container' ).highcharts({
chart: {
type: 'solidgauge'
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -90, endAngle: 90,
background: {
backgroundColor: 'none',
borderColor: '#aaa',
innerRadius: '100%',
outerRadius: '60%',
shape: 'arc'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -40,
borderWidth: 0,
useHTML: true
}
}
},
tooltip: {
enabled: false
},
yAxis: {
title: {
text: 'km/h',
align: 'low',
x: -15
},
stops...A waterfall chart displays the cumulative effect of the values. Each data point is accumulated on top of the previous data point or subtracted from the previous data point if the value is negative. This creates a flying bricks appearance due to the suspension of columns in midair.
Waterfall charts are most suitable in finance where one needs to visualize the cumulative effect of several positive and negative values.
In the following example, we will plot the budget breakdown of the London 2012 Olympics by the expense area:
$( '#chart_container' ).highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Budget of London 2012 Olympics'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'US million dollars'
}
},
tooltip: {
valueSuffix: ' Million USD'
},
series: [{
name...A pyramid chart is triangular in shape and divided into sections, with each data point representing a section. Because of the triangular shape, these sections are not equal in width, and hence the width doesn't necessarily represent the value of each data point. They are useful to show data that needs to be shown in a particular hierarchy.
To plot pyramid and funnel charts, the highcharts-4.x.x/js/modules/funnel.js script is required.
We will take the data from the previous example to plot a pyramid chart of the London 2012 Olympics budget breakdown:
$( '#chart_container' ).highcharts({
chart: {
type: 'pyramid',
marginLeft: -10
},
title: {
text: 'Budget of London 2012 Olympics'
},
series: [{
name: 'Budget',
data: [
['Venues', 4607],
['Olympic Village', 1919],
['CT operations', 1776],
...The funnel chart is usually used to represent different stages of a sales process. Being shaped like a funnel, it's divided into different sections with each section representing a process stage. The top section represents the initial stage with most number of clients, while the bottom section is the final stage. Sections become narrower as we go down to the next stage, representing a drop in the number of clients, hence forming the shape of a funnel.
In the following example, we will take a look at how we can create a simple funnel chart:
$( '#chart_container' ).highcharts({
chart: {
type: 'funnel',
marginLeft: -10
},
title: {
text: 'Representing a Typical Sales Project'
},
plotOptions: {
series: {
neckWidth: '25%',
neckHeight: '35%'
}
},
series: [{
name: 'Budget',
data: [
...Heat maps were added in Highcharts in Version 4. A heat map displays data in a graphical format using colors and color ranges. Each value is contained in a matrix and is assigned a mid-tone color among extreme colors based on its value. This creates a visual representation of values in the map.
The data points are given in the form of an array that contains three elements. The first two elements are zero-index-based position coordinates in the matrix, and the third element is the actual value of the data point.
Be sure to include the highcharts-4.x.x/js/modules/heatmap.js file before you continue with the example.
In the following example, we will plot the monthly climate data for Toronto with the help of a heat map by utilizing its various configuration options:
$( '#chart_container' ).highcharts({
chart: {
type: 'heatmap'
},
title: {
text: 'Monthy Temperature Statistics - Toronto'
},
subtitle: {
text: 'Source: <a href=...In this chapter, we explored different Highcharts types. We first learned about different gauges, including the angular gauge, solid gauge, and VU meter. We modified their appearance, including their pane and background, by utilizing their different configuration options. Then we explored waterfall, pyramid, and funnel charts. At the end, we learned about heat maps, a new chart type added to Highcharts Version 4.
This concludes our journey exploring chart types that come with Highcharts. In the next chapter, we will begin working with the theming API to overhaul the appearance of our charts.
© 2014 Packt Publishing Limited All Rights Reserved
