Highcharts - Environment Setup

Advertisements

Previous Page
Next Page  

In this chapter, we will discuss how to set up the Highcharts library to be used in web application development.

Highcharts requires jQuery as a dependency. First, we will install the jQuery library and then the Highcharts library.

Install jQuery

There are two ways to use jQuery.

  • Download − Download it locally from jQuery.com and use it.

  • CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, Google host. This means using CDN moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it will not have to be re-downloaded.

Using Downloaded jQuery

Include the jQuery JavaScript file in the HTML page using the following script −

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

Using CDN

We are using the CDN versions of the jQuery library throughout this tutorial.

Include the jQuery JavaScript file in the HTML page using the following script −

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Install Highcharts

The following are the two ways to use Highcharts.

  • Download − Download it locally from highcharts.com and use it.

  • CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers; in this case, the Highcharts host - Code.Highcharts.Com.

Using Downloaded Highcharts

Include the Highcharts JavaScript file in the HTML page using the following script −

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

Using CDN

We are using the CDN versions of the Highcharts library throughout this tutorial.

Include the Highcharts JavaScript file in the HTML page using the following script −

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
Advertisements