Advanced Excel – Thermometer

Advanced Excel – Thermometer Chart ”; Previous Next Thermometer chart is a visualization of the actual value of well-defined measure, for example, task status as compared to a target value. This is a linear version of Gauge chart that you will learn in the next chapter. You can track your progress against the target over a period of time with a simple rising Thermometer chart. What is a Thermometer Chart? A Thermometer chart keeps track of a single task, for example, completion of work, representing the current status as compared to the target. It displays the percentage of the task completed, taking target as 100%. A Thermometer chart looks as shown below. Advantages of Thermometer Charts Thermometer chart can be used to track any actual value as compared to the target value as percentage completed. It works with a single value and is an appealing chart that can be included in dashboards for a quick visual impact on % achieved, % performance against the target sales target, % profit, % work completion, % budget utilized, etc. If you have multiple values to track the actuals against the targets, you can use Bullet chart that you will learn in a later chapter. Preparation of Data Prepare the data in the following way − Calculate the Actual as a percentage of the actual value as compared to the target value. Target should always be 100%. Place your data in a table as given below. Creating a Thermometer Chart Following are the steps to create a Thermometer chart − Step 1 − Select the data. Step 2 − Insert a Clustered Column chart. As you can see, the right Column is Target. Step 3 − Click on a Column in the chart. Step 4 − Click the DESIGN tab on the Ribbon. Step 5 − Click the Switch Row/ Column button. Step 6 − Right click on the Target Column. Step 7 − Select Format Data Series from the dropdown list. Step 8 − Click on Secondary Axis under SERIES OPTIONS in the Format Data Series pane. As you can see, the Primary Axis and the Secondary Axis have different ranges. Step 9 − Right click on the Primary Axis. Select Format Axis from the dropdown list. Step 10 − Type the following in Bounds under AXIS OPTIONS in the Format Axis pane − 0 for Minimum. 1 for Maximum. Repeat the steps given above for the Secondary Axis to change the Bounds to 0 and 1. Both the Primary Axis and Secondary Axis will be set to 0% – 100%. As you can observe, the Target Column hides the Actual Column. Step 11 − Right click on the visible Column, i.e. Target. Step 12 − Select Format Data Series from the dropdown list. In the Format Data Series pane, select the following − No fill under the FILL option. Solid line under the BORDER option. Blue under the Color option. Step 13 − In Chart Elements, deselect the following − Axis → Primary Horizontal. Axis → Secondary Vertical. Gridlines. Chart Title. Step 14 − Right click on the Primary Vertical Axis. Step 15 − Select Format Axis from the dropdown list. Step 16 − Click TICK MARKS under the AXIS OPTIONS in the Format Axis pane. Step 17 − Select the option Inside for Major type. Step 18 − Right click on the Chart Area. Step 19 − Select Format Plot Area from the dropdown list. Step 20 − Click Fill & Line in the Format Plot Area pane. Select the following − No fill under the FILL option. No line under the BORDER option. Step 21 − Resize the Chart Area to get the Thermometer shape for the chart. You got your Thermometer chart, with the Actual Value as against Target Value being shown. Step 22 − You can make this Thermometer chart more appealing with some formatting. Insert a Rectangle shape superimposing the blue rectangular part in the chart. In the Format Shape options, select the following − Gradient fill for FILL. Linear for Type. 1800 for Angle. Set the Gradient stops at 0%, 50% and 100%. For the Gradient stops at 0% and 100%, choose the color black. For the Gradient stop at 50%, choose the color white. Insert an oval shape at the bottom. Format the oval shape with the same options as of rectangle. The result will be as shown below − Your aesthetic Thermometer chart is ready. This will look good on a dashboard or as a part of a presentation. Print Page Previous Next Advertisements ”;

Highcharts – Tree Maps

Highcharts – Tree Maps ”; Previous Next Tree Map charts are used to draw tree map type charts. In this section, we will discuss the different types of Tree Maps. Sr.No. Chart Type & Description 1 Tree Map Tree Map with color axis. 2 Tree Map with Levels Tree Map with Levels. 3 Large Tree Map Large Tree Map. Print Page Previous Next Advertisements ”;

Highcharts – Useful Resources

Highcharts – Useful Resources ”; Previous Next The following resources contain additional information on Highcharts. Please use them to get more in-depth knowledge on this. Python Programming Certification 2024 Most Popular  9 Courses     1 eBooks Tutorialspoint More Detail Artificial Intelligence and Machine Learning Certification 2024 Most Popular  7 Courses     1 eBooks Tutorialspoint More Detail Java Certification 2024 Best Seller  7 Courses     1 eBooks Tutorialspoint More Detail Print Page Previous Next Advertisements ”;

Highcharts – Pie Charts

Highcharts – Pie Charts ”; Previous Next Pie charts are used to draw pie based charts. In this section, we will discuss the different types of pie based charts. Sr.No. Chart Type & Description 1 Basic Pie Basic pie chart. 2 Pie with Legends Pie chart with Legends. 3 Donut Chart Donut Chart. 4 Semi circle Donut Semi circle Donut chart. 5 Pie with drill down Pie chart with drill down capability. 6 Pie chart with gradient Pie chart with gradient fill. 7 Pie chart with monochrome Pie chart with monochrome fill. Print Page Previous Next Advertisements ”;

Highcharts – Discussion

Discuss Highcharts ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Highcharts – Scatter Charts

Highcharts – Scatter Charts ”; Previous Next Scatter charts are used to draw scatter based charts. In this section, we will discuss the different types of scatter based chart(s). Sr.No. Chart Type & Description 1 Scatter Chart Scatter Chart. Print Page Previous Next Advertisements ”;

Highcharts – Quick Guide

Highcharts – Quick Guide ”; Previous Next Highcharts – Overview Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. It supports a wide range of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics. Features of Highcharts Library Let us now discuss a few important features of the Highcharts Library. Compatability − Works seemlessly on all major browsers and mobile platforms like android and iOS. Multitouch Support − Supports multitouch on touch screen based platforms like android and iOS.Ideal for iPhone/iPad and android based smart phones/ tablets. Free to Use − Open source and is free to use for non-commercial purpose. Lightweight − highcharts.js core library with size nearly 35KB, is an extremely lightweight library. Simple Configurations − Uses json to define various configurations of the charts and very easy to learn and use. Dynamic − Allows to modify chart even after chart generation. Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts. Configurable tooltips − Tooltip comes when a user hovers over any point on a chart. Highcharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically. DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories. Export − Export chart to PDF/ PNG/ JPG / SVG format by enabling export feature. Print − Print chart using web page. Zoomablity − Supports zooming chart to view data more precisely. External data − Supports loading data dynamically from server. Provides control over data using callback functions. Text Rotation − Supports rotation of labels in any direction. Supported Chart Types Highcharts library provides the following types of charts − Sr.No. Chart Type & Description 1 Line Charts Used to draw line/spline based charts. 2 Area Charts Used to draw area wise charts. 3 Pie Charts Used to draw pie charts. 4 Scatter Charts Used to draw scattered charts. 5 Bubble Charts Used to draw bubble based charts. 6 Dynamic Charts Used to draw dynamic charts where user can modify charts. 7 Combinations Used to draw combinations of variety of charts. 8 3D Charts Used to draw 3D charts. 9 Angular Gauges Used to draw speedometer type charts. 10 Heat Maps Used to draw heat maps. 11 Tree Maps Used to draw tree maps. In our subsequent chapters, we will discuss each type of above mentioned charts in details with examples. Licence Highcharts is open source and is free to use for non-commercial purpose. In order to use Highcharts in commercial projects, follow the link − License and Pricing Highcharts – Environment Setup 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> Highcharts – Configuration Syntax 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

Highcharts – Bar Charts

Highcharts – Bar Charts ”; Previous Next Bar charts are used to draw area based charts. In this section, we will discuss the different types of bar based charts. Sr.No. Chart Type & Description 1 Basic Bar Basic bar chart. 2 Stacked Bar Bar chart having bar stacked over one another. 3 Negative Stacked area Bar chart with negative stack. Print Page Previous Next Advertisements ”;

Highcharts – Column Charts

Highcharts – Column Charts ”; Previous Next Column charts are used to draw column based charts. In this section, we will discuss the different types of column based charts. Sr.No. Chart Type & Description 1 Basic Column Basic column chart. 2 Column with negative values Column chart having negative values. 3 Stacked column Chart having column stacked over one another. 4 Stacked and Grouped column Chart with column in stacked and grouped form. 5 Column with stacked percentage Chart with stacked percentage. 6 Column with rotated labels Column Chart with rotated labels in columns. 7 Column with drilldown Column Chart with drill down capability. 8 Column with fixed placement Column Chart with fixed placement. 9 Data defined in HTML table Column Chart using Data defined in HTML table. 10 Column Range Column Chart using ranges. Print Page Previous Next Advertisements ”;

Highcharts – Dynamic Charts

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 ”;