Indicators

17 Nov 201719 minutes to read

Indicators simply indicates the current status of the pointer. Indicators are in several formats such as in shape format, textual format and image format.

Setting Dimension

• You can enable indicators by setting showIndicators to ‘true’ in scale collection. The height and width property for the indicators are used to specify the area allocated to the indicator for the width and height respectively.
• You can use the position collection to position the indicators along X and Y axis. X specifies horizontal position in indicators whereas Y specifies vertical position in indicators. Indicators are of several types such as, dimensions like circle, rectangle, rounded rectangle, text and image. By using the type property it can be applied. For image type imageUrl property is used.

JS

@(Html.EJ().LinearGauge("LinearGauge1").EnableAnimation(false).Value(78)



//Adding frame object

.Frame(frm=>frm.BackgroundImageUrl("../images/gauge/Gauge_linear_light.png"))



//Adding scale collection

.Scales(s =>

{

    s.Width(0).Maximum(300).MinorIntervalValue(5)

    .BackgroundColor("transparent").MajorIntervalValue(30)

    .Border(border=>border.Color("transparent").Width(0))

    .ShowIndicators(true).ShowBarPointers(false)

    .Length(310)

    .Position(position => { position.X(51).Y(50); })



    //Adding marker pointer collection

    .MarkerPointers(mp =>

    { mp.Length(10).MarkerDistanceFromScale(12)

    .Width(10).MarkerBackgroundColor("Grey").Add();

    })



    //Adding tick collection

    .Ticks(tic =>

    {

        tic.Type(TickType.MajorInterval).Width(2).Color("#8c8c8c")

        .DistanceFromScale(distance => distance.X(7).Y(0)).Add();

        tic.Type(TickType.MinorInterval).Color("#8c8c8c").Width(1)

        .Height(6).DistanceFromScale(distance => distance.X(7).Y(0)).Add();

    })



    //Adding indicator collection

    .Indicators(indicator =>

    {

        indicator.Type(IndicatorType.Circle).Height(10)

        .Width(10).Position(position => position.X(55).Y(100)).Add();

    })

    .Add();

}))

Execute the above code to render the following output.

State Ranges

State ranges are used to specify the indicator behavior in the certain region. startValue and endValue are used to set the range bound for the pointer. Whenever the pointer crosses the specified region, the indicator attributes are applied for the ranges.

JS

@(Html.EJ().LinearGauge("LinearGauge1").EnableAnimation(false).Value(78)



//Adding frame object

.Frame(frm=>frm.BackgroundImageUrl("../images/gauge/Gauge_linear_light.png"))



//Adding scale collection

.Scales(s =>

{

    s.Width(0).Maximum(300).MinorIntervalValue(5)

    .BackgroundColor("transparent").MajorIntervalValue(30)

    .Border(border=>border.Color("transparent").Width(0))

    .ShowIndicators(true).ShowBarPointers(false)

    .Length(310).ShowRanges(true)

    .Position(position => { position.X(51).Y(50); })



    //Adding marker pointer collection

    .MarkerPointers(mp =>

    { mp.Length(10).MarkerDistanceFromScale(12)

    .Width(10).MarkerBackgroundColor("Grey").Add();

    })



    //Adding ticks collection

    .Ticks(tic =>

    {

        tic.Type(TickType.MajorInterval).Width(2).Color("#8c8c8c")

        .DistanceFromScale(distance => distance.X(7).Y(0)).Add();

        tic.Type(TickType.MinorInterval).Color("#8c8c8c").Width(1)

        .Height(6).DistanceFromScale(distance => distance.X(7).Y(0)).Add();

    })



    //Adding indicator collection

    .Indicators(indicator =>

    {

        indicator.Height(10).Width(10).Type(IndicatorType.Circle)

        .Position(position => position.X(55).Y(100))



        //Adding state range collection

        .StateRanges(sr=>{



            sr.StateRangeBackgroundColor("#02A258").StateRangeStartValue(0)



            .StateRangeEndValue(200).StateRangeBorderColor("#02A258")



            .Add();



            sr.StateRangeBackgroundColor("Grey").StateRangeStartValue(200)



            .StateRangeEndValue(300).StateRangeBorderColor("Grey")



            .Add();



        }).Add();

    })

    //Adding range collection

    .Ranges(range =>

    {

        range.StartWidth(5).EndWidth(5).StartValue(0)

        .EndValue(200).RangeBackgroundColor("#94C361")

        .Border(border => border.Width(1).Color("#94C361")).Add();

        range.StartWidth(5).EndWidth(5).StartValue(200)

        .EndValue(250).RangeBackgroundColor("#F9CF67")

        .Border(border => border.Width(1).Color("#F9CF67")).Add();

        range.StartWidth(5).EndWidth(5).StartValue(250)

        .EndValue(300).RangeBackgroundColor("#F89B83")

        .Border(border => border.Width(1).Color("#F89B83")).Add();

    })

    .Add();

}))

Execute the above code to render the following output.

Color and Appearance

The backgroundColor and borderColor sets the appearance behavior for the indicators. You can apply this only if it lies within the state ranges. Otherwise default behavior will be applied.

JS

@(Html.EJ().LinearGauge("LinearGauge1").EnableAnimation(false).Value(78)



//Adding frame object

.Frame(frm=>frm.BackgroundImageUrl("../images/gauge/Gauge_linear_light.png"))



//Adding scale object

.Scales(s =>

{

    s.Width(0).Maximum(300).MinorIntervalValue(5)

    .BackgroundColor("transparent").MajorIntervalValue(30)

    .Border(border=>border.Color("transparent").Width(0))

    .ShowIndicators(true).ShowBarPointers(false)

    .Length(310)

    .Position(position => { position.X(51).Y(50); })



    //Adding marker pointer collection

    .MarkerPointers(mp =>

    { mp.Length(10).MarkerDistanceFromScale(12)

    .Width(10).MarkerBackgroundColor("Grey").Add();

    })



    //Adding ticks collection

    .Ticks(tic =>

    {

        tic.Type(TickType.MajorInterval).Width(2).Color("#8c8c8c")

        .DistanceFromScale(distance => distance.X(7).Y(0)).Add();

        tic.Type(TickType.MinorInterval).Color("#8c8c8c").Width(1)

        .Height(6).DistanceFromScale(distance => distance.X(7).Y(0)).Add();

    })



    //Adding indicator collection

    .Indicators(indicator =>

    {

        indicator.Type(IndicatorType.Circle).Height(10)

        .Width(10).Position(position => position.X(55).Y(100))

        .StateRanges(sr =>

        {

            sr.StateRangeEndValue(100)

            .StateRangeStartValue(0)

            .StateRangeBackgroundColor("#91B64E")

            .StateRangeBorderColor("#91B64E").Add();

        }).Add();

    })

    .Add();

}))

Execute the above code to render the following output.

Font options

The basic font options available for the textual type indicators in the Linear Gauge such as Size, font style and font family are achieved by the properties size, fontStyle and fontFamily.

JS

@(Html.EJ().LinearGauge("LinearGauge1").EnableAnimation(false).Value(78)



//Adding frame object

.Frame(frm=>frm.BackgroundImageUrl("../images/gauge/Gauge_linear_light.png"))



//Adding scale collection

.Scales(s =>

{

    s.Width(0).Maximum(300).MinorIntervalValue(5)

    .BackgroundColor("transparent").MajorIntervalValue(30)

    .Border(border=>border.Color("transparent").Width(0))

    .ShowIndicators(true).ShowBarPointers(false)

    .Length(310).ShowRanges(true)

    .Position(position => { position.X(51).Y(50); })



    //Adding marker pointer collection

    .MarkerPointers(mp =>

    { mp.Length(10).MarkerDistanceFromScale(12)

    .Width(10).MarkerBackgroundColor("Grey").Add();

    })



    //Adding tick collection

    .Ticks(tic =>

    {

        tic.Type(TickType.MajorInterval).Width(2).Color("#8c8c8c")

        .DistanceFromScale(distance => distance.X(7).Y(0)).Add();

        tic.Type(TickType.MinorInterval).Color("#8c8c8c").Width(1)

        .Height(6).DistanceFromScale(distance => distance.X(7).Y(0)).Add();

    })



    //Adding indicator collection

    .Indicators(indicator =>

    {

        indicator.IndicatorFont(font=>

        font.Size("12px").FontStyle("Bold").FontFamily("Arial"))

        .Type(IndicatorType.text)

        .IndicatorTextLocation(position => position.X(55).Y(100))



        //Adding state range collection

        .StateRanges(sr=>{



        sr.StateRangeStartValue(0).StateRangeEndValue(200)

        .StateRangeText("Safe").StateRangeTextColor("#94C361")

        .Add();



        sr.StateRangeStartValue(200).StateRangeEndValue(250)

        .StateRangeText("Caution").StateRangeTextColor("#F9CF67")

        .Add();

        sr.StateRangeStartValue(250).StateRangeEndValue(300)

        .StateRangeText("Danger").StateRangeTextColor("#F89B83")

        .Add();



        }).Add();

    })



    //Adding range collection

    .Ranges(range =>

    {

        range.StartWidth(5).EndWidth(5).StartValue(0)

        .EndValue(200).RangeBackgroundColor("#94C361")

        .Border(border => border.Width(1).Color("#94C361")).Add();

        range.StartWidth(5).EndWidth(5).StartValue(200)

        .EndValue(250).RangeBackgroundColor("#F9CF67")

        .Border(border => border.Width(1).Color("#F9CF67")).Add();

        range.StartWidth(5).EndWidth(5).StartValue(250)

        .EndValue(300).RangeBackgroundColor("#F89B83")

        .Border(border => border.Width(1).Color("#F89B83")).Add();

    })



    .Add();

}))

Execute the above code to render the following output.

Multiple Indicator

You can set multiple indicators in a single Linear Gauge by adding an array of indicator objects. Refer the following code example for multiple indicator functionality.

JS

@(Html.EJ().LinearGauge("LinearGauge1").EnableAnimation(false).Value(78)



//Adding frame object

.Frame(frm=>frm.BackgroundImageUrl("../images/gauge/Gauge_linear_light.png"))



//Adding scale collection

.Scales(s =>

{

    s.Width(0).Maximum(300).MinorIntervalValue(5)

    .BackgroundColor("transparent").MajorIntervalValue(30)

    .Border(border=>border.Color("transparent").Width(0))

    .ShowIndicators(true).ShowBarPointers(false)

    .Length(310).ShowRanges(true)

    .Position(position => { position.X(51).Y(50); })



    //Adding marker pointer collection

    .MarkerPointers(mp =>

    { mp.Length(10).MarkerDistanceFromScale(12)

    .Width(10).MarkerBackgroundColor("Grey").Add();

    })



    //Adding ticks collection

    .Ticks(tic =>

    {

        tic.Type(TickType.MajorInterval).Width(2).Color("#8c8c8c")

        .DistanceFromScale(distance =>distance.X(7).Y(0)).Add();

        tic.Type(TickType.MinorInterval).Color("#8c8c8c").Width(1)

        .Height(6).DistanceFromScale(distance => distance.X(7).Y(0)).Add();

    })



    //Adding ranges collection

    .Ranges(range =>

    {

        range.StartWidth(5).EndWidth(5).StartValue(0)

        .EndValue(200).RangeBackgroundColor("#94C361")

        .Border(border => border.Width(1).Color("#94C361")).Add();

        range.StartWidth(5).EndWidth(5).StartValue(200)

        .EndValue(250).RangeBackgroundColor("#F9CF67")

        .Border(border => border.Width(1).Color("#F9CF67")).Add();

        range.StartWidth(5).EndWidth(5).StartValue(250)

        .EndValue(300).RangeBackgroundColor("#F89B83")

        .Border(border => border.Width(1).Color("#F89B83")).Add();

    })



    //Adding indicator collection

    .Indicators(indicator =>

    {

        //Adding indicator 1

        indicator.Height(10).Width(10)

        .Type(IndicatorType.Circle)

        .Position(position => position.X(35).Y(100))

        .StateRanges(sr=>{



        sr.StateRangeStartValue(0).StateRangeEndValue(200)

        .StateRangeBackgroundColor("#02A258").StateRangeBorderColor("#02A258")

        .Add();



        sr.StateRangeStartValue(200).StateRangeEndValue(300)

        .StateRangeBackgroundColor("Grey").StateRangeBorderColor("Grey")

        .Add();



        }).Add();



        //Adding indicator 2

        indicator.Height(10).Width(10)

        .Type(IndicatorType.Circle)

        .Position(position => position.X(75).Y(100))

        .StateRanges(sr =>

        {

            sr.StateRangeStartValue(0).StateRangeEndValue(200)

            .StateRangeBackgroundColor("Grey").StateRangeBorderColor("Grey")

            .Add();

            sr.StateRangeStartValue(200).StateRangeEndValue(300)

            .StateRangeBackgroundColor("#02A258").StateRangeBorderColor("#02A258")

            .Add();

        }).Add();

    })

    .Add();

}))

Execute the above code to render the following output.