Example of Creating a Speedometer with a Wizard

To execute the example, add links to the following files:

Add the following code in the BODY tag:

<div id="example" style="display: inline; float: left;"></div>
<div id="speedometer" style="display: inline; float: left; "></div>

Within the SCRIPT tag add a code to create a speedometer with a wizard:

<script type="text/javascript">
    PP.resourceManager.setResourceList(["GaugeMaster", "PP"]);
    PP.resourceManager.setRootResourcesFolder("resources/");
    PP.setCurrentCulture(PP.Cultures.ru);
    var speedometer, master;
    var speedsettings = {  
        ParentNode: "speedometer",
        Width: 250,
        Height: 150,
        BaseWidth: 220,
        BaseHeight: 135,
        CenterPosition: "110, 107",
        Center: {
            PPType: PP.Ui.CircleMarker,
            Size: 4,
            BorderEnabled: false,
            Background: {
                PPType: PP.LinearGradientBrush,
                StartPoint: "0, 0",
                EndPoint: "1, 1",
                GradientStops: {
                    GradientStop: [{
                        Color: "#ff4333",
                        Offset: 0.1
                    }, {
                        Color: "#ff190b",
                        Offset: 0.5
                    }, {
                        Color: "#9f0505",
                        Offset: 0.9
                    }]
                }
            }
        },
        CenterLabel: {
            Offset: 0,
            Font: {
                Color: "#848181",
                Size: 11
            },
            Border: {
                PPType: PP.SolidColorBrush,
                Color: "#b4b4b4"
            },
            Background: {
                PPType: PP.SolidColorBrush,
                Color: "#ffffff"
            },
            BorderWidth: 2,
            Text: "1000",
            TextAlign: "Center",
            Width: 30,
            IsVisible: true
        },
OuterRadius: &quot;100,100&quot;,
        Scales: [{
            Size: 0,
            Length: 180,
            StartAngle: 90,
            MinValue: 0,
            MaxValue: 180,
            CenterPosition: &quot;110,115&quot;,
            OuterRadius: &quot;1,1&quot;,
            Sectors: [{
                StartValue: 0,
                EndValue: 180,
                Background: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: &quot;0, 0.5&quot;,
                    EndPoint: &quot;1, 0.5&quot;,
                    GradientStops: {
                        GradientStop: // Base
                        [{
                            Color: &quot;#d5d3d3&quot;,
                            Offset: 0.01
                        }, {
                            Color: &quot;#676767&quot;,
                            Offset: 0.08
                        }, {
                            Color: &quot;#d5d3d3&quot;,
                            Offset: 0.25
                        }, {
                            Color: "#676767",
                            Offset: 0.5
                        }, {
                            Color: "#d5d3d3",
                            Offset: 0.75
                        }, {
                            Color: "#676767",
                            Offset: 0.92
                        }, {
                            Color: "#d2d2d2",
                            Offset: 0.99
                        }]
                    }
                },
                StartSize: 1,
                EndSize: 1,
                Offset: 0
            }, {
StartValue: 0,
                EndValue: 180,
                Background: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: &quot;0, 0.5&quot;,
                    EndPoint: &quot;1, 0.5&quot;,
                    GradientStops: {
                        GradientStop: //for the bottom
                        [{
                            Color: &quot;#bebebe&quot;,
                            Offset: 0.01
                        }, {
                            Color: &quot;#dadada&quot;,
                            Offset: 0.25
                        }, {
                            Color: &quot;#767676&quot;,
                            Offset: 0.5
                        }, {
                            Color: &quot;#dfdfdf&quot;,
                            Offset: 0.8
                        }, {
Color: &quot;#aeaeae&quot;,
                            Offset: 0.99
                        }]
                    }
                },
                StartSize: 0.95,
                EndSize: 0.95,
                Offset: 5
            }, {
                StartValue: 0,
                EndValue: 120,
                Background: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: &quot;0, 0.5&quot;,
                    EndPoint: &quot;1, 0.5&quot;,
                    GradientStops: {
                        GradientStop: //thin white line on the external border
                        [{
                            Color: &quot;#FFFFFF&quot;,
                            Offset: 0.01
                        }, {
                            Color: &quot;#c7c7c7&quot;,
                            Offset: 0.75
                        }, {
                            Color: &quot;#d2d0d0&quot;,
                            Offset: 0.9
                        }]
                    }
                },
                StartSize: 0.01,
                EndSize: 0.01,
                Offset: 1
            }]
        }, {
            Size: 0,
            Length: 180,
            MinValue: 0,
            MaxValue: 180,
            StartAngle: 90,
            CenterPosition: "110,112",
            OuterRadius: "0.95,0.93",
            IsAbsoluteSectorOffset: false,
            Sectors: [{
                StartValue: 0,
                EndValue: 180,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#efefef"
                },
                StartSize: 1,
                EndSize: 1,
                Offset: 0
            }, {
                StartValue: 0,
                EndValue: 180,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#a2a1a1"
                },
                StartSize: 0.01,
                EndSize: 0.01,
                Offset: 0.37
            }, {
                StartValue: 0,
                EndValue: 180,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#666666"
                }, //dark grey thin sector
                StartSize: 0.01,
                EndSize: 0.01,
                Offset: 0
            }, {
                StartValue: 0,
                EndValue: 180,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#ffffff"
                }, //whine thin sector
                StartSize: 0.01,
                EndSize: 0.01,
                Offset: 0.38
            }]
        }, {
            Size: 0,
            Length: 180,
            MinValue: 0,
            MaxValue: 180,
StartAngle: 90,
            CenterPosition: &quot;110,112&quot;,
            OuterRadius: &quot;0.95,0.92&quot;,
            IsAbsoluteSectorOffset: false,
            Sectors: [{
                StartValue: 0.5,
                EndValue: 45,
                Background: // blue
                {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: &quot;0, 0.5&quot;,
                    EndPoint: &quot;1, 0.5&quot;,
                    GradientStops: {
                        GradientStop: [{
                            Color: &quot;#1B84FE&quot;,
                            Offset: 0.01
                        }, {
                            Color: &quot;#0079ff&quot;,
                            Offset: 0.9
                        }]
                    }
                },
                Border: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: "0, 0",
                    EndPoint: "1, 0.5",
                    GradientStops: {
                        GradientStop: [{
                            Color: "#80c4ff",
                            Offset: 0.01
                        }, {
                            Color: "#0065CF",
                            Offset: 0.9
                        }]
                    }
                },
                BorderWidth: 1,
                StartSize: 0.06,
                EndSize: 0.06,
                Offset: 0.395,
                ZIndex: 0
            }, {
                StartValue: 45,
                EndValue: 90,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#A3BD3E"
                },
                Background: //green
                {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: "0, 0",
                    EndPoint: "1, 0.5",
                    GradientStops: {
                        GradientStop: [{
                            Color: "#6A851F",
                            Offset: 0.1
                        }, {
                            Color: "#A3BD3E",
                            Offset: 0.7
                        }]
                    }
                },
                Border: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: "0, 0",
                    EndPoint: "1, 0.5",
                    GradientStops: {
                        GradientStop: [{
                            Color: "#C9D7A6",
                            Offset: 0.1
                        }, {
                            Color: "#6A851F",
                            Offset: 0.8
                        }]
                    }
                },
                BorderWidth: 1,
                StartSize: 0.06,
                EndSize: 0.06,
                Offset: 0.395,
                ZIndex: 4
            }, {
                StartValue: 90,
                EndValue: 135,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#E8CA26"
                },
                Background: // yellow
                {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: "0, 0.5",
                    EndPoint: "1, 0.5",
                    GradientStops: {
                        GradientStop: [{
                            Color: "#ffde00",
                            Offset: 0.01
                        }, {
                            Color: "#E8CA26",
                            Offset: 0.9
                        }]
                    }
                },
                Border: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: "0, 0",
EndPoint: &quot;1, 0.5&quot;,
                    GradientStops: {
                        GradientStop: [{
                            Color: &quot;#B19400&quot;,
                            Offset: 0.01
                        }, {
                            Color: &quot;#ffd900&quot;,
                            Offset: 0.9
                        }]
                    }
                },
                BorderWidth: 1,
                StartSize: 0.06,
                EndSize: 0.06,
                Offset: 0.395,
                ZIndex: 9
            }, {
                StartValue: 136,
                EndValue: 179.5,
                Background: //red
                {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: &quot;0, 0.5&quot;,
                    EndPoint: &quot;1, 0.5&quot;,
                    GradientStops: {
                        GradientStop: [{
                            Color: "#ff462c",
                            Offset: 0.01
                        }, {
                            Color: "#c00000",
                            Offset: 0.9
                        }]
                    }
                },
                Border: {
                    PPType: PP.LinearGradientBrush,
                    StartPoint: "0, 0",
                    EndPoint: "1, 0.5",
                    GradientStops: {
                        GradientStop: [{
                            Color: "#FF8273",
                            Offset: 0.01
                        }, {
                            Color: "#BD0B07",
                            Offset: 0.9
                        }]
                    }
                },
                BorderWidth: 1,
                StartSize: 0.06,
                EndSize: 0.06,
                Offset: 0.395,
                ZIndex: 14
            }]
        }, {
            OuterRadius: "0.95,0.875",
            Size: 0,
            Length: 180,
            StartAngle: 90,
            MinValue: 0,
            MaxValue: 1000,
            CenterPosition: "110,107",
            Values: [0, 500, 250, 750, 1000],
            Labels: [0, 500, 250, 750, 1000],
            LabelFont: {
                Color: "#8c8c8c",
                Size: 8,
                IsBold: false,
                FontFamily: PP.Font.Family.Tahoma,
                IsItalic: false
            },
            RotateLabels: false,
            Arrows: [{
                Name: "Arrow1",
                PPType: PP.Ui.LineArrow,
                Radius: 50,
                Tail: 0,
                Border: {
                    PPType: PP.SolidColorBrush,
                    Color: "#ff462c"
                }
            }],
            MajorTick: {
                PPType: PP.Ui.CircleMarker,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#8c8c8c"
                },
                Size: 0.02,
                Style: PP.GaugeStyleLabels.Inner,
                Offset: -0.31
            },
            MinorTick: {
                PPType: PP.Ui.CircleMarker,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#8c8c8c"
                },
                Size: 0.01,
                Style: PP.GaugeStyleLabels.Inner,
                Offset: -0.31
            },
            PassedMajorTick: {
                PPType: PP.Ui.CircleMarker,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#ff462c"
                },
                // thick points
                Size: 0.02,
                Style: PP.GaugeStyleLabels.Inner,
                Offset: -0.31
            },
            PassedMinorTick: {
                PPType: PP.Ui.CircleMarker,
                Background: {
                    PPType: PP.SolidColorBrush,
                    Color: "#ff462c"
                },
                // little points
                Size: 0.01,
                Style: PP.GaugeStyleLabels.Inner,
                Offset: -0.31
            },
            PassedLabelFont: {
                Color: "#ff462c",
                Size: 8,
                IsBold: false,
                FontFamily: PP.Font.Family.Tahoma,
                IsItalic: false
            },
            Step: 50
        }]
    };
    speedometer = new PP.Ui.Speedometer(speedsettings);
    speedometer.addToNode('speedometer');
    speedometer.Click.add(function () {
        console.log("click");
    });
    master = new PP.Ui.GaugeMaster({
        ImagePath: "build/img/",
        DataView: [speedometer],
        ParentNode: "example",
        Width: 300,
        Height: 500,
        PropertyChanged: function (sender, args) {
            alert("Settings are changed")
        }
    });
</script>

After executing the example the page will contain a speedometer with its wizard:

On changing the wizard settings the following message is displayed: Settings changed.

See also:

Speedometer