Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (64)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (153)DocIO  (23)Essential JS 2  (85)Essential Studio  (174)File Formats  (29)Flutter  (123)JavaScript  (187)Microsoft  (113)PDF  (67)React  (62)Succinctly series  (128)Syncfusion  (610)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (120)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (400)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (11)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (312)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (224)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (17)Web  (375)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Build a Progress Bar in JavaScript Using a Linear Gauge

How to Build a Progress Bar in JavaScript Using a Linear Gauge

The Syncfusion JavaScript Linear Gauge control is primarily used to show gauge-ish values like temperatures, quantities, speed—numbers on a linear scale across a range. In this sample, we wanted to see if we could make a package delivery timeline or progress bar. The finished sample is in GitHub.

The following image shows a simple linear gauge from our online samples. The larger tick marks display values, and there is a pointer with a text label.JavaScript Progress Bar

This sample is mildly interesting, but it’s not quite right to indicate shipping status (the unit of measurement should be a percentage, at least). To fix it, we take advantage of the customizations allowed in the Syncfusion API.

In our GitHub sample, we made a basic shipping status bar, but it was a little boring. So, we put it on the bottom of the sample page (linear3) and led with more interesting options. Balloons are always fun, so we made the others with balloons!

We demonstrate different looks across the three gauges. Each gauge is linear with max = 150 and min = 0. We defined four markers at 0, 50, 100, and 150 to represent four stages. We used the marker pointer and took advantage of the color property to show finished, unfinished, and current values:

  • NotStarted: Stage has not been reached or started.
  • Current: Where the package is located now.
  • Finished: When the package has reached the destination.
public FinishedColor: string = '#f2a92f';
public NotStartedColor: string = '#eeeeee';
public CurrentActionColor: string = '#79564e';

To make the samples interactive, we added a numeric text box with a spinner. Users can change the value and see it reflected in the gauges.JavaScript number box

The numerictextbox change event calls the positionChange function. Within the positionChange function, we are changing colors for the pointer and range, as well as the image for each pointer. Changing all this is how the users see progression. There are six cases in this function and only four values on the gauge. Since we defined three colors for each marker (NotStarted, Current, and Finished), we had to handle NotStarted and Finished for the first point and the last point, respectively.

public positionChange(args: ChangeEventArgs) {
  switch (args.value) {
    case 0:
      this.updatePointerImage( this.NotStartedPointer, this.NotStartedPointer, this.NotStartedPointer, this.NotStartedPointer );
      this.updatePointerColor( this.NotStartedColor, this.NotStartedColor, this.NotStartedColor, this.NotStartedColor );
      this.updateRangeColor( this.NotStartedColor, this.NotStartedColor, this.NotStartedColor );
      break;
    case 1:
      this.updatePointerImage( this.CurrentActionPointer, this.NotStartedPointer, this.NotStartedPointer, this.NotStartedPointer );
      this.updatePointerColor( this.CurrentActionColor, this.NotStartedColor, this.NotStartedColor, this.NotStartedColor );
      this.updateRangeColor(this.NotStartedColor, this.NotStartedColor, this.NotStartedColor);
      break;
    case 2:
      this.updatePointerImage( this.FinishedPointer, this.CurrentActionPointer, this.NotStartedPointer, this.NotStartedPointer );
      this.updatePointerColor( this.FinishedColor, this.CurrentActionColor, this.NotStartedColor, this.NotStartedColor );
      this.updateRangeColor(this.FinishedColor, this.NotStartedColor, this.NotStartedColor);
      break;
    case 3:
      this.updatePointerImage( this.FinishedPointer, this.FinishedPointer, this.CurrentActionPointer, this.NotStartedPointer );
      this.updatePointerColor( this.FinishedColor, this.FinishedColor, this.CurrentActionColor, this.NotStartedColor );
      this.updateRangeColor(this.FinishedColor, this.FinishedColor, this.NotStartedColor);
      break;
    case 4:
      this.updatePointerImage(this.FinishedPointer, this.FinishedPointer, this.FinishedPointer, this.CurrentActionPointer );
      this.updatePointerColor(this.FinishedColor, this.FinishedColor, this.FinishedColor, this.CurrentActionColor );
      this.updateRangeColor(this.FinishedColor, this.FinishedColor, this.FinishedColor);
      break;
    case 5:
      this.updatePointerImage( this.FinishedPointer, this.FinishedPointer, this.FinishedPointer, this.FinishedPointer );
      this.updatePointerColor( this.FinishedColor, this.FinishedColor, this.FinishedColor, this.FinishedColor );
      this.updateRangeColor(this.FinishedColor, this.FinishedColor, this.FinishedColor);
      break;
    default:
      break;
  }
}

The default axis labels are numbers. This makes sense, as a gauge is meant to show numbers. We took the render event for the axis labels and used it to change the labels to text.

//Provides label name for each stage
public axisLabelRender(args: IAxisLabelRenderEventArgs):void {
  if (args.value === 0) {
    args.text = 'Stage 1';
  } else if (args.value === 50) {
    args.text = 'Stage 2';
  } else if (args.value === 100) {
    args.text = 'Stage 3';
  } else if (args.value === 150) {
    args.text = 'Stage 4';
  } else {
      //prevents rendering of default label for second axis
    args.cancel = true;
  }
}
<ejs-lineargauge id="linear1" #gauge1 height="200px" title="Stage Progression" orientation="Horizontal"
      (axisLabelRender)="axisLabelRender($event)">

First gauge

Since the Linear Gauge control can have multiple axes, we created a second one to make the balloons float above the gauge. This lets us keep the first axis as circles with checks. You are free to put markers anywhere on this axis you wish; we just chose to keep them synchronized.JavaScript Linear Gauge with Checkbox

<!-- second axis to add images in the UI for each stage-->
<e-axis minimum="200" maximum="350" [line]='axisline' [minorTicks]="minorTick" [majorTicks]="majorTick">
    <e-pointers>
        <e-pointer type="Marker" markerType="Image" value="200" offset="-10" [imageUrl]="Stage1" height=50 width=50>
        </e-pointer>
        <e-pointer type="Marker" markerType="Image" value="250" offset="-10" [imageUrl]="Stage2" height=50 width=50>
        </e-pointer>
        <e-pointer type="Marker" markerType="Image" value="300" offset="-10" [imageUrl]="Stage3" height=50 width=50>
        </e-pointer>
        <e-pointer type="Marker" markerType="Image" value="350" offset="-10" [imageUrl]="Stage4" height=50 width=50>
        </e-pointer>
    </e-pointers>
</e-axis>

Second gauge

We set the markers to be images and put balloons on them, using only one axis. These balloons could have been offset, but then the gauge wouldn’t be a flat line. You can play with the sample to make this happen though.JavaScript Linear Gauge with image in the tracker

<e-pointers>
    <e-pointer type="Marker" markerType="Image" value="0" [imageUrl]="Stage1" height=30 width=30></e-pointer>
    <e-pointer type="Marker" markerType="Image" value="50" [imageUrl]="Stage2" height=30 width=30></e-pointer>
    <e-pointer type="Marker" markerType="Image" value="100" [imageUrl]="Stage3" height=30 width=30></e-pointer>
    <e-pointer type="Marker" markerType="Image" value="150" [imageUrl]="Stage4" height=30 width=30></e-pointer>
</e-pointers>

Third gauge

Here is the actual shipping status progress bar. We decided not to show a marker for the point value 100 (the third stage). This gives the idea of the package being in transit with no particular location defined. We also changed the stage names so that they made sense.Progress made out of linear gauge

This is a simple example of how one Syncfusion control can be customized. We put a lot of effort into making our controls flexible. If you have any questions about how to create a control, ask us in the comment section below or through our support forums, support portal, or feedback portal. We may be able to create a sample. This is how we grow our suite of products. We look forward to your suggestions!

GitHub reference

You can check out our full example of how to build a JavaScript progress bar.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top