{"id":16791,"date":"2023-08-17T11:03:24","date_gmt":"2023-08-17T11:03:24","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16791"},"modified":"2023-08-17T15:37:39","modified_gmt":"2023-08-17T15:37:39","slug":"linear-gauge-for-typing-speed-test","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/08\/17\/linear-gauge-for-typing-speed-test\/","title":{"rendered":"Creating Dynamic Linear Gauge for Real-Time Typing Speed Test Data Visualization: Using JavaScript"},"content":{"rendered":"

\"Linear<\/a>From clocks to weight scales, speedometers to thermostats, and even the battery charge icon on your phone, Gauge Charts are widely used to represent a value on a scale or range, providing a clear visual indication of the represented measurement. Gauges can be circular<\/a> or linear<\/a>, and in this article, our focus will be on the latter style. I will guide you on how to create a cool linear gauge using JavaScript.<\/p>\n

Specifically, we will explore the demonstration of linear gauges using an example of a real-time typing speed test. Throughout the article, we will delve into the structure of linear gauges, discuss styling options, explore how they can be connected to data, and show how you can easily build your Linear Gauges using JavaScript in just a matter of minutes. By the end of the tutorial, you’ll have an awesome example of a linear gauge used to dynamically illustrate typing speed test results or whichever data you want.<\/p>\n

So, let’s dive in and elevate your web-based interactive data visualization<\/a> game!<\/p>\n

<\/p>\n

Linear Gauge Preview<\/h2>\n

Behold a preview of our JS linear gauge-based typing speedometer, a captivating visualization we will build together in this tutorial.<\/p>\n

\"\"<\/p>\n

1. Creating a Basic Linear Gauge Chart<\/h2>\n

First, we\u2019ll go through the steps to quickly create a basic Linear Gauge chart using JavaScript. Let’s get started!<\/p>\n

1.1. Make a Simple HTML Page<\/h3>\n

Every web page starts with an HTML scaffold, and so does our demo.<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=UTF-8\/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>Typing Speed Test<\/title>\r\n    <style>\r\n      html,\r\n      body,\r\n      #container {\r\n        width: 100%;\r\n        height: 100%;\r\n        margin: 0;\r\n        padding: 0;\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
Our linear gauge will be put in a div<\/code> provided with the ID container<\/strong>. In the head<\/code> tag, I\u2019ve included the style<\/code> tag with the rules for this element\u2019s width and height, as well as margin and padding, which you can adjust to fit your needs.<\/p>\n
1.2. Connect JavaScript Charting Library<\/h3>\n
Now that our HTML page with a container is all set, it’s time to integrate the JavaScript charting library of our choice into the mix.<\/p>\n
For this tutorial, I am using AnyChart JS Charts<\/a>, which provides excellent support for linear gauges, allowing us to create stunning interactive charts with its pre-built capabilities effortlessly.<\/p>\n
To connect the charting library, we need to add the necessary scripts to the head<\/code> section of our HTML file. Specifically, we’ll include two lightweight modules<\/a> required to work with linear gauges.<\/p>\n
<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-linear-gauge.min.js\"><\/script><\/code><\/pre>\n
1.3. Code JS Linear Gauge<\/h3>\n
Now comes the exciting part: write some JavaScript code to bring our linear gauge to life!<\/p>\n
1.3.1. Build Foundation<\/h4>\n
Before we dive into the magical world of interactive gauges, let’s ensure a smooth sailing experience by setting up a main function that waits for the document to be fully loaded before executing the JavaScript charting code.<\/p>\n
<script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The following JS code will be placed right here.\r\n  });\r\n<\/script><\/code><\/pre>\n
Now that we’ve got it in place, it’s time to create the main chart object. We\u2019ll be using the anychart.gauges.linear()<\/code> function, which does exactly what it says: creates a linear gauge chart.<\/p>\n
var gauge = anychart.gauges.linear();<\/code><\/pre>\n
To make things look just the way we want, we’ll specify the layout of our gauge as horizontal<\/strong> using the layout()<\/code> method on the chart variable.<\/p>\n
gauge.layout(\"horizontal\");<\/code><\/pre>\n
1.3.2. Load Data<\/h4>\n
It’s time to breathe life into our linear gauge chart by adding some data. In the near future, when we have our live typing speed test tool up and running, this chart will showcase real-time data. But for now, let’s have some fun with placeholder values. We’ll use the data()<\/code> method on the gauge variable and set the value to, say, 18<\/strong>.<\/p>\n
gauge.data([18]);<\/code><\/pre>\n
1.3.3. Configure Scale and Axis<\/h4>\n
Let’s shape the behavior of the gauge by defining its scale and axis. This will give us control over the value\u2019s display.<\/p>\n
To begin, we’ll set up the scale for the chart, specifying the minimum value (-2<\/strong>) and the maximum value (30<\/strong>). Additionally, we’ll set the interval between ticks to 2<\/strong> so our chart will display ticks at each step of two units.<\/p>\n
var scale = gauge.scale();\r\nscale.minimum(-2);\r\nscale.maximum(30);\r\nscale.ticks().interval(2);<\/code><\/pre>\n
Now that we have our scale all sorted, let’s focus on configuring the axis. We’ll give it a gentle 5%<\/strong> offset, ensuring it perfectly aligns with the gauge. As for its orientation, we’ll choose bottom<\/strong> so the axis appears at the bottom.<\/p>\n
var axis = gauge.axis(0);\r\naxis.offset(\"5%\");\r\naxis.orientation(\"bottom\");<\/code><\/pre>\n
1.3.4. Set Scale Bar<\/h4>\n
It’s time to add a touch of elegance to our linear gauge with some nice scale bars! It’s like giving the chart a fancy ruler to measure its enchanting powers. Let’s get started!<\/p>\n
First, we’ll create a scale bar using the scaleBar()<\/code> method, and since it’s the first scale bar, we’ll pass\u00a00<\/strong> as the parameter.<\/p>\n
var scaleBar = gauge.scaleBar(0);<\/code><\/pre>\n
Now, let’s paint the scale bar a beautiful color using the fill()<\/code> method. Why not grace this example with the charming shade of lightBlue 0.9<\/strong>?<\/p>\n
scaleBar.fill(\"lightBlue 0.9\");<\/code><\/pre>\n
We can utilize the width()<\/code> method to determine the scale bar’s width. In our example, we’ll set it to 5%<\/strong>.<\/p>\n
scaleBar.width(\"5%\");<\/code><\/pre>\n
1.3.5. Add Pointer<\/h4>\n
Now, let’s add an essential element of any linear gauge \u2014 the pointer. It will indicate and visualize the data on the gauge scale. See how to bring it to life.<\/p>\n
To begin, we’ll create a marker pointer by calling gauge.marker(0)<\/code>, designating it as the first marker:<\/p>\n
var pointer = gauge.marker(0);<\/code><\/pre>\n
Now, it’s time to sprinkle some color on the pointer! We’ll use the color()<\/code> method and set its value to black:<\/strong><\/p>\n
pointer.color(\"black\");<\/code><\/pre>\n
To ensure that the pointer plays nicely with other chart elements, we can use the zIndex()<\/code> method. For this case, we’ll set its stacking order to 1<\/strong>.<\/p>\n
pointer.zIndex(1);<\/code><\/pre>\n
1.3.6. Draw Gauge<\/h4>\n
It’s time to bring our JavaScript linear gauge to life with just a few more touches.<\/p>\n
We\u2019ll use the container()<\/code> method to specify the ID of the HTML element that will proudly hold the gauge.<\/p>\n
gauge.container(\"container\");<\/code><\/pre>\n
Now, the moment we’ve been waiting for: initiating the drawing of the resulting JS-based linear gauge To do this, we’ll call the draw()<\/code> method on the gauge variable:<\/p>\n
gauge.draw();<\/code><\/pre>\n
And just like that, the magic unfolds! Our web page is now adorned with a basic JavaScript Linear Gauge chart, complete with a delightful scale bar, finely marked ticks, and an alluring pointer. Check it out below and, with the full code, on the Playground<\/a>.<\/p>\n