To execute the example, add links to the following files:
PP.css.
PP.js.
PP.GraphicsBase.js.
PP.Charts.js.
PP.Gauge.js.
PP.GaugeMaster.js.
resources.ru.js.
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: "100,100", Scales: [{ Size: 0, Length: 180, StartAngle: 90, MinValue: 0, MaxValue: 180, CenterPosition: "110,115", OuterRadius: "1,1", Sectors: [{ StartValue: 0, EndValue: 180, Background: { PPType: PP.LinearGradientBrush, StartPoint: "0, 0.5", EndPoint: "1, 0.5", GradientStops: { GradientStop: // Base [{ Color: "#d5d3d3", Offset: 0.01 }, { Color: "#676767", Offset: 0.08 }, { Color: "#d5d3d3", 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: "0, 0.5", EndPoint: "1, 0.5", GradientStops: { GradientStop: //for the bottom [{ Color: "#bebebe", Offset: 0.01 }, { Color: "#dadada", Offset: 0.25 }, { Color: "#767676", Offset: 0.5 }, { Color: "#dfdfdf", Offset: 0.8 }, {
Color: "#aeaeae", Offset: 0.99 }] } }, StartSize: 0.95, EndSize: 0.95, Offset: 5 }, { StartValue: 0, EndValue: 120, Background: { PPType: PP.LinearGradientBrush, StartPoint: "0, 0.5", EndPoint: "1, 0.5", GradientStops: { GradientStop: //thin white line on the external border [{ Color: "#FFFFFF", Offset: 0.01 }, { Color: "#c7c7c7", Offset: 0.75 }, { Color: "#d2d0d0", 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: "110,112", OuterRadius: "0.95,0.92", IsAbsoluteSectorOffset: false, Sectors: [{ StartValue: 0.5, EndValue: 45, Background: // blue { PPType: PP.LinearGradientBrush, StartPoint: "0, 0.5", EndPoint: "1, 0.5", GradientStops: { GradientStop: [{ Color: "#1B84FE", Offset: 0.01 }, { Color: "#0079ff", 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: "1, 0.5", GradientStops: { GradientStop: [{ Color: "#B19400", Offset: 0.01 }, { Color: "#ffd900", 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: "0, 0.5", EndPoint: "1, 0.5", 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: