Highcharts – Angular Gauges ”; Previous Next Angular Gauges charts are used to draw meter/gauge type charts. In this section, we will discuss the different types of Angular Gauges charts. Sr.No. Chart Type & Description 1 Angular Gauge Angular Gauge Chart. 2 Solid Gauge Solid Gauge Chart. 3 Clock Clock. 4 Gauge with dual axes Gauge Chart with dual axes. 5 VU Meter VU Meter Chart. Print Page Previous Next Advertisements ”;
Highcharts – 3D Charts ”; Previous Next 3D charts are used to draw 3-dimensional charts. In this section, we will discuss the different types of 3D charts. Sr.No. Chart Type & Description 1 3D Column 3D Column Chart. 2 3D Column with null 3D Column Chart with null and 0 values. 3 3D Column with stacking 3D Column Chart with stacking and grouping. 4 3D Pie 3D Pie Chart. 5 3D Donut 3D Donut Chart. Print Page Previous Next Advertisements ”;
Highcharts – Dynamic Charts ”; Previous Next Dynamic charts are used to draw data based charts where data can change after rendering of chart. In this section, we will discuss the different types of dynamic chart. Sr.No. Chart Type & Description 1 Spline updating each second Spline Chart updating each second. 2 Click to add a point Chart with point addition capability. Print Page Previous Next Advertisements ”;
Highcharts Tutorial PDF Version Quick Guide Resources Job Search Discussion Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Highcharts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on. This tutorial will teach you the basics of Highcharts. There are chapters discussing all the basic components of Highcharts with suitable examples. Audience This tutorial is designed for Software Professionals who are willing to learn Highcharts in simple and easy steps. This tutorial will give you an understanding of the Highcharts concepts and after completing this tutorial you will be at an intermediate level of expertise from where you can take yourself to a higher level of expertise. Prerequisites Before proceeding with this tutorial, you need to be familiar with JavaScript, HTML, CSS, and any text editor. Print Page Previous Next Advertisements ”;
Highcharts – Combinations ”; Previous Next Combination charts are used to draw mixed charts; for example, bar chart with pie chart. In this section, we will discuss the different types of combinations charts. Sr.No. Chart Type & Description 1 Column, Line and Pie Chart with Column, Line and Pie. 2 Dual Axes, Line and Column Chart with Dual Axes, Line and Column. 3 Multiple Axes Chart having Multiple Axes. 4 Scatter with regression line Scatter chart with regression line. Print Page Previous Next Advertisements ”;
Highcharts – Configuration Syntax ”; Previous Next In this chapter, we will showcase the configuration required to draw a chart using the Highcharts API. Step 1: Create HTML Page Create an HTML page with the jQuery and Highcharts javascript libraries. HighchartsTestHarness.htm <html> <head> <title>Highcharts Tutorial</title> <script src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script> <script src = “https://code.highcharts.com/highcharts.js”></script> </head> <body> <div id = “container” style = “width: 550px; height: 400px; margin: 0 auto”></div> <script language = “JavaScript”> $(document).ready(function() { }); </script> </body> </html> Here the container div is used to contain the chart drawn using Highcharts library. Step 2: Create Configurations Highcharts library uses very simple configurations using json syntax. $(”#container”).highcharts(json); Here json represents the json data and configuration which the Highcharts library uses to draw a chart within the container div using the highcharts() method. Now, we will configure the various parameters to create the required json string. title Configure the title of the chart. var title = { text: ”Monthly Average Temperature” }; subtitle Configure the subtitle of the chart. var subtitle = { text: ”Source: WorldClimate.com” }; xAxis Configure the ticker to be displayed on the X-Axis. var xAxis = { categories: [”Jan”, ”Feb”, ”Mar”, ”Apr”, ”May”, ”Jun” ,”Jul”, ”Aug”, ”Sep”, ”Oct”, ”Nov”, ”Dec”] }; yAxis Configure the title, plot lines to be displayed on the Y-Axis. var yAxis = { title: { text: ”Temperature (xB0C)” }, plotLines: [{ value: 0, width: 1, color: ”#808080” }] }; tooltip Configure the tooltip. Put suffix to be added after value (y-axis). var tooltip = { valueSuffix: ”xB0C” } legend Configure the legend to be displayed on the right side of the chart along with other properties. var legend = { layout: ”vertical”, align: ”right”, verticalAlign: ”middle”, borderWidth: 0 }; series Configure the data to be displayed on the chart. Series is an array where each element of this array represents a single line on the chart. var series = [ { name: ”Tokyo”, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: ”New York”, data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: ”Berlin”, data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: ”London”, data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; Step 3: Build the json data Combine all the configurations. var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; Step 4: Draw the chart $(”#container”).highcharts(json); Example Consider the following example to further understand the Configuration Syntax − highcharts_configuration.htm Live Demo <html> <head> <title>Highcharts Tutorial</title> <script src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script> <script src = “https://code.highcharts.com/highcharts.js”></script> </head> <body> <div id = “container” style = “width: 550px; height: 400px; margin: 0 auto”></div> <script language = “JavaScript”> $(document).ready(function() { var title = { text: ”Monthly Average Temperature” }; var subtitle = { text: ”Source: WorldClimate.com” }; var xAxis = { categories: [”Jan”, ”Feb”, ”Mar”, ”Apr”, ”May”, ”Jun”, ”Jul”, ”Aug”, ”Sep”, ”Oct”, ”Nov”, ”Dec”] }; var yAxis = { title: { text: ”Temperature (xB0C)” }, plotLines: [{ value: 0, width: 1, color: ”#808080” }] }; var tooltip = { valueSuffix: ”xB0C” } var legend = { layout: ”vertical”, align: ”right”, verticalAlign: ”middle”, borderWidth: 0 }; var series = [{ name: ”Tokyo”, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: ”New York”, data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: ”Berlin”, data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: ”London”, data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] } ]; var json = {}; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.legend = legend; json.series = series; $(”#container”).highcharts(json); }); </script> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;
Highcharts – Heat Maps ”; Previous Next Heat Map charts are used to draw heat map type charts. In this section, we will discuss the different types of Heat Maps. Sr.No. Chart Type & Description 1 Heat Map Heat Map. 2 Large Heat Map Large Heat Map. Print Page Previous Next Advertisements ”;
Highcharts – Line Charts ”; Previous Next Line charts are used to draw line/spline based charts. In this section, we will discuss the different types of line and spline based charts. Sr.No. Chart Type & Description 1 Basic line Basic line chart. 2 With data labels Chart with data labels. 3 Ajax loaded data, clickable points Chart drawn after retrieving data from server. 4 Time series, zoomable Chart with time series. 5 Spline with inverted axes Spline chart having inverted axes. 6 Spline with symbols Spline chart using symbols for heat/rain. 7 Spline with plot bands Spline chart with plot bands. 8 Time data with irregular intervals Chart of a large set of time based data. 9 Logarithmic axis Chart depicting the logarithmic axis. Print Page Previous Next Advertisements ”;
Highcharts – Environment Setup ”; Previous Next 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> Print Page Previous Next Advertisements ”;