Version

Adding igBulletGraph to an HTML Page

Topic Overview

Purpose

This topic demonstrates, with code examples, how to add the igBulletGraph™ control to an HTML page.

Required background

The following topics are prerequisites to understanding this topic:

  • igBulletGraph Overview: This topic provides conceptual information about the igBulletGraph™ control including its main features, minimum requirements, and user functionality.

In this topic

This topic contains the following sections:

Adding igBulletGraph to an HTML Page – Conceptual Overview

To add igBulletGraph control to a web page requires an HTML element, a div to serve as the base for instantiation. The basic configuration of igBulletGraph requires providing values for its dimensions - width and height.

Requirements

The following table summarizes the requirements for using the igBulletGraph control.

Required Resources Description What you need to do…
jQuery and jQuery UI JavaScript resources Ignite UI for jQuery™ is built on top of the following frameworks: Add script references to both libraries in the <head> section of your page.
General igBulletGraph JavaScript Resources The igBulletGraph control depends on functionality distributed across several files in the Ignite UI for jQuery Library. You can load the required resources in one of the following ways:
  • Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page.
  • Load the required resources manually. You need to use the dependencies listed in the table below.
  • Load the two combined files, containing the logic for all data visualization controls from the Ignite UI for jQuery package - infragistics.core.js, infragistics.dv.js and infragistics.encoding.js (optional).
The following table lists the Ignite UI for jQuery library dependencies related to the igBulletGraph control. These resources need to be referred to explicitly if you chose not to use igLoader or the combined files.
JS Resource Description
infragistics.util.js
infragistics.util.jquery.js 		Ignite UI for jQuery utilities
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_jquerydom.js
infragistics.dv_core.js
infragistics.dv_geometry.js 		A shared library for data visualization components
infragistics.ui.widget.js Base igWidget for all Ignite UI for jQuery widgets.
infragistics.bulletgraph.js The igBulletGraph control
infragistics.ui.bulletgraph.js The igBulletGraph widget
Add one of the following:
  • A reference to igLoader
  • A reference to all the required JavaScript files (listed in the table on the left).
  • A reference to the combined files and optionally to the file containing the encodings.

Steps

Following are the general conceptual steps for adding igBulletGraph to an HTML Page.

  1. Creating the target element for storing the igBulletGraph control.
  2. Instantiating the igBulletGraph control.
  3. Configuring the basic rendering options.
  4. Configuring the scale.
  5. Adding performance bar.
  6. Configuring the comparative marker.
  7. Adding comparative ranges.

Adding igBulletGraph to an HTML Page – Procedure

Introduction

This procedure adds an instance of igBulletGraph to an HTML page and configures its dimensions, its scale and adds a performance bar, comparative marker and three comparative ranges to it.

The procedure presumes the required resources are added to the header of the HTML page, so it instantiates the igBulletGraph control in the document ready event to prevent any errors due to DOM being not fully loaded.

Preview

The following screenshot is a preview of the result.

Prerequisites

To complete the procedure, you need the required JavaScript and CSS files referenced on the HTML page.

In HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/modules/infragistics.ui.bulletgraph.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <!-- Bullet Graph Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_geometry.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.bulletgraph.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.bulletgraph.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Steps

Follow these steps to add an igBulletGraph to an HTML page.

  1. Create the target element for storing the igBulletGraph control.

    Create a <div> element within the HTML body on which to instantiate the igBulletGraph control.

    In HTML:

     <body>
     <!-- Target element for the igBulletGraph -->
       <div id="bulletGraph"></div>
 </body>

  2. Instantiate the igBulletGraph control.

    Use the selector of the target element defined in step 1 to instantiate the igBulletGraph control.

    In HTML:

     <script type="text/jscript">
     $(function () {                        
               $("#bulletGraph").igBulletGraph({
         });
         });
 </script>

  3. Configure the basic rendering options.

    When instantiating the igBulletGraph, configure the width and height options.

    In HTML:

     $("#bulletGraph").igBulletGraph({
     width: "300px",
     height: "70px"
 });

  4. Configure the scale.

    In order to customize the values of the scale, you need to set its minimumValue and maximumValue properties. In this example, the scale will start at 5 and end at 55.

    In HTML:

     $("#bulletGraph").igBulletGraph({
     width: "300px",
     height: "70px",
     minimumValue: "5",
     maximumValue: "55"
 });

    The changed scale is shown on the following screenshot:

  5. ​Add performance bar.

    The primary measure of the igBulletGraph is visualized by its performance bar. Its value is managed by the value property setting. For this example, set the value property to 35.

    In HTML:

     $("#bulletGraph").igBulletGraph({
     …
     value:"35"
 });

  6. Configure the comparative marker.

    To position the comparative measure marker on the scale is managed by the value of the targetValue property. For this example, set the targetValue property to 43.

    In HTML:

     $("#bulletGraph").igBulletGraph({
     …
     targetValue:"43"
 });

    The following screenshot displays what the igBulletGraph control would look so far in the procedure.

  7. Add comparative ranges.

    In order to compare the value displayed by the performance bar against some meaningful range(s) of values, these comparative ranges need to be displayed on the scale. Comparative ranges are managed by ranges property within which several individual ranges can be defined, each of which having its own starting and ending values (startValue and endValue) and color (brush).

    For this example, configure 3 comparative ranges, each of a different shade of gray, starting at the 0, 15, and 30 tick marks of the scale, respectively.

    In HTML:

     $("#bulletGraph").igBulletGraph({
     …
     ranges: [{
         name: 'range1',
         startValue: 0,
         endValue: 15,
         brush: '#DCDCDC'
     },
     {
         name: 'range2',
         startValue: 15,
         endValue: 30,
         brush: '#A9A9A9'
     },
     {
         name: 'range3',
         startValue: 30,
         endValue: 55,
         brush: '#808080'
     }
     ]
 });

    The final look of the graph is presented below.

Full code

Following is the full code for this procedure.

In HTML:

<!DOCTYPE html>
<html>
<head>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui.js"></script>
    <!-- Bullet Graph Required JavaScript Files -->
    <script src="../../igniteui/js/modules/infragistics.util.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.util.jquery.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_collections.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ext_ui.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_core.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.dv_geometry.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.widget.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.bulletgraph.js" type="text/javascript"></script>
    <script src="../../igniteui/js/modules/infragistics.ui.bulletgraph.js" type="text/javascript"></script>
        <script type="text/jscript">
        $(function () {             
            $("#bulletGraph").igBulletGraph({
                width: "300px",
                height: "70px",
                minimumValue: "5",
                maximumValue: "55",
                value:"35",
                targetValue:"43",
                ranges: [{
                    name: 'range1',
                    startValue: 0,
                    endValue: 15,
                    brush: '#DCDCDC'
                },
                {
                    name: 'range2',
                    startValue: 15,
                    endValue: 30,
                    brush: '#A9A9A9'
                },
                {
                    name: 'range3',
                    startValue: 30,
                    endValue: 55,
                    brush: '#808080'
                }
                ]
            });
        });
    </script>
</head>
<body>
    <!-- Target element for the igBulletGraph -->
      <div id="bulletGraph"></div>
</body>
</html>

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following sample provides additional information related to this topic.

  • Basic Configuration: This sample demonstrates a simple configuration of the igBulletGraph control.

View on GitHub