Chapter 9. Going Further with Highcharts

So far, we have covered different chart types that Highcharts offers as well as their combinations. We have also covered Highcharts APIs and its events that allow us to program interactive charts dynamically. In this chapter, we will cover different techniques to work with data that are essential when developing apps or websites with Highcharts.

Preprocessing data from different file types

When working with a large amount of data, it's not feasible to put all of it on the page itself. Instead, the data is retrieved from an external source such as a file, database, or an API. Before using this data with Highcharts, it's crucial to process it so that it can be plotted correctly. This process of fetching the data and formatting it correctly before it can be plotted is called preprocessing.

In the current section, we will take a look at preprocessing data from a number of file formats, including CSV, XML, and JSON. We will also look at JavaScript libraries that make working with these formats easier and also provide a handful of methods to achieve different tasks rather quickly.

Preprocessing data from a CSV file

Comma Separated Values or Character Separated Values (CSV) is a common format to store tabular data in plain text. It contains records, each in its own row. These records contain fields separated by a character, usually a comma...

Preprocessing data from a database using PHP's PDO class

When working with large applications, data is usually saved in databases rather than static files. This data is retrieved by a server-side language to be served to the client. Further, Highcharts runs only on the client side and is completely independent of the technology that is used at the server side. Hence, any server-side language can be used to dynamically generate HTML and JavaScript to produce charts with Highcharts.

In this section, we will use a database to store data and a server-side language (PHP) to retrieve that data. Due to the vast variety of databases available today, we will use PHP's PDO class that is a consistent interface to access twelve different types of databases; MySQL is one of them. The advantage of using this interface is that we can use the same functions to issue queries and fetch data, regardless of the type of database we use. You can find more about PDO at http://php.net/manual/en/intro.pdo.php.

The...

Updating charts using Ajax

The retrieval of data from the server can be either by data-push or data-pull technologies. Since these topics are outside the scope of this book, we will limit ourselves to basic Ajax techniques. With Ajax, we can update a chart without the need to reload the whole page. This feature can be used to update charts when new data becomes available on the server.

In the following example, we will use Ajax to get data and update an already initialized chart at the click of a button. Contrary to the previous example, we will not mix our PHP and JavaScript code in this case, but rather will keep them in two separate files for better maintainability and readability.

We will use the same database and the same data as the previous example for the purpose of elaboration. Initially, our chart will be loaded with some random data. This can be considered as an initial state with the chart showing old data. As soon as an event occurs (in this case, a click), the client (browser...

Exporting Highcharts into other formats

Highcharts provides a module to export charts into various image formats. There can be two possibilities when considering the export server, that is, to use Highcharts' official exporting server or set up your own server. We will use the export module to export our charts into various formats using the Highcharts CDN.

To enable exporting, the exporting.js file must be included after the highcharts.js file. It can be found in the Highcharts-4.x.x/js/modules folder and can also be included directly from http://code.highcharts.com/modules/exporting.js.

To enable simple exporting, we need to set exporting.enabled to true in our chart configuration object:

$( '...' ).highcharts({
  ...
  exporting: {
    enabled: true
  },
  ...
});

By doing so, a button with a drop-down menu appears at the top-right corner of the chart:

The drop-down menu contains various options to export charts into formats including PNG, JPEG, PDF, and SVG.

You can alter various properties...

Summary

In the concluding chapter, we learned various techniques to work with Highcharts data and data preprocessing. We looked at loading data from various file formats and formatting it to be plotted with Highcharts. We also learned to interact with a database using a server-side programming language to retrieve data and dynamically plot charts with Ajax. In the final section of this chapter, we learned about Highcharts' export module that can be used to export Highcharts into various file formats.

I hope that this book proved useful in your journey of learning Highcharts. We have covered numerous topics in this book, essential ones as well as the new features, which come packed with the new version of Highcharts, such as 3D charts, heat maps, and gauges. From basic chart types to their derivatives along with their combinations, everything has been explained in plain language to help you grasp the concepts easily. As for intermediate techniques, we have explored Highcharts APIs and events...