Chapter 2. Column and Bar Charts

In the previous chapter, we discussed Highcharts and its features. We also took a look at the files that come with the package and then constructed a simple column chart to get started with Highcharts development.

In this chapter, we will examine column and bar charts more thoroughly and utilize the Highcharts API to make a variety of charts with different configuration options. To be more specific, in this chapter, we will:

  • Take an overview of column charts
  • Stack basic column charts to make data visually more understandable
  • Learn how to configure charts to drill down to more detailed charts
  • Adjust ticks and other chart elements
  • Create bar charts
  • Configure bar charts with negative stacks

Introducing column charts

Column charts are the most common type of charts. They have categories organized horizontally on the x axis (for example, time) and data is placed vertically on the y axis. They are useful for illustrating the difference between the data of each category.

Consider the London Olympics 2012 medal table, in which the top five countries are as follows:

Rank

Country

Gold

Silver

Bronze

Total

1

United States

46

29

29

104

2

China

38

27

23

88

3

Great Britain

29

17

19

65

4

Russian Federation

24

26

32

82

5

South Korea

13

8

7

28

The preceding list shows the gold, silver, and bronze medals won by the top five countries. The last column shows the total number of medals won by the respective country. We will plot this data into a column chart for a more meaningful visualization:

  1. Create a new blank HTML file that includes the jQuery and highcharts.js scripts. You can also copy the HTML code from the example in the previous chapter. Note that the chart container element has the value of the id attribute of medal_table:
    <div id="medal_table" style="width: 600px; height: 450px;"></div>
  2. Place the following code in your <script></script> tags or the external JavaScript file if you are using one:
    (function() {
  $( '#medal_table' ).highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Olympics 2012 Medal Table'
    },
    subtitle: {
      text: 'Source: http://www.bbc.com/sport/olympics/2012/medals/countries'
    },
    xAxis: {
      title: {
        text: 'Countries'
      },
      categories: ['United States', 'China', 'Russian Federation', 'Great Britain', 'South Korea']
    },
    yAxis: {
      title: {
        text: 'Number of total medals'
      }
    },
    series: [{
      name: 'Medals',
      data: [104, 88, 82, 65, 28]
    }]
  });
})();

    The preceding code will produce the following column chart:

    Introducing column charts

The preceding chart shows the total number of medals earned by each country. By referring to the total medal count, we include the numbers of gold, silver, and bronze medals.

In the previous example, we gave a subtitle to the chart using the subtitle property that points towards the source of the plotted data. The subtitle will appear below the main chart title. Also, note that both the x axis and y axis have their respective titles given to them via the title property. By hovering over each column, you can see the tooltip showing the category name (in this case, the country) and the value representing the data point.

The tooltip for the Great Britain series is as follows:

Introducing column charts

The preceding example shows the simplicity of the Highcharts configuration structure, which follows a hierarchical pattern. Each top-level component receives its own set of configuration objects comprising of its properties and their respective values. We will look at these additional properties in just a moment, but let's first modify the preceding chart to show multiple series.

Using the official documentation of Highcharts

By the end of this example, you might be willing to learn more about Highcharts components and their properties. For that purpose, the Highcharts website includes a robust documentation section that provides information about all the functionalities that Highcharts offers. This includes Highcharts components and their properties, methods, and events. You can find the Highcharts documentation at http://api.highcharts.com/highcharts.

The documentation presents information about Highcharts components and their properties in a hierarchical manner, thus making it a lot easier to find a specific property or method for a component.

Detailed documentation is accompanied by code examples in JS Fiddle that you can modify on the fly and see the results instantly.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.162.37