Skip to content

Commit 0e59984

Browse files
author
Balamurugan P
committed
config(EJ2-28249): circular gauge sample added
1 parent 53d8295 commit 0e59984

File tree

4 files changed

+158
-178
lines changed

4 files changed

+158
-178
lines changed

‎ej2-blazor-samples/Pages/CircularGauge/CircularGauge/DefaultFunctionalities.razor‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -27,33 +27,30 @@
2727
@*End:Hidden*@
2828

2929
<div class="control-section">
30-
<EjsCircularGauge ID="gauge" Axes="axes"></EjsCircularGauge>
30+
<EjsCircularGauge ID="gauge" >
31+
<CircularGaugeAxes>
32+
<CircularGaugeAxis Radius="80%" StartAngle="230" EndAngle="130">
33+
<CircularGaugeLabel offset="-5">
34+
<CircularGaugeFont FontFamily="Roboto" Size="12px" FontWeight="Regular">
35+
</CircularGaugeFont>
36+
</CircularGaugeLabel>
37+
<CircularGaugeAxisLineStyle Width="8" Color="#E0E0E0">
38+
</CircularGaugeAxisLineStyle>
39+
<CircularGaugeAxisMajorTicks Width="0.01" >
40+
</CircularGaugeAxisMajorTicks>
41+
<CircularGaugeAxisMinorTicks Width="0.01" >
42+
</CircularGaugeAxisMinorTicks>
43+
<CircularGaugePointers>
44+
<CircularGaugePointer Value=60 Radius="60%" Color="#757575" PointerWidth="7">
45+
<CircularGaugeCap Radius="8" Color="#757575">
46+
<CircularGaugeCapBorder Width="0">
47+
</CircularGaugeCapBorder>
48+
</CircularGaugeCap>
49+
<CircularGaugeNeedleTail Color="#757575" Length="25%">
50+
</CircularGaugeNeedleTail>
51+
</CircularGaugePointer>
52+
</CircularGaugePointers>
53+
</CircularGaugeAxis>
54+
</CircularGaugeAxes>
55+
</EjsCircularGauge>
3156
</div>
32-
33-
@code {
34-
public List<CircularGaugeAxis> axes { get; set; } = new List<CircularGaugeAxis>()
35-
{
36-
new CircularGaugeAxis()
37-
{
38-
Radius = "80%",
39-
StartAngle = 230,
40-
EndAngle = 130,
41-
MajorTicks = new { width = "0px" },
42-
MinorTicks = new { width = "0px" },
43-
LineStyle = new { width = 8, color = "#E0E0E0" },
44-
LabelStyle = new { font = new { fontFamily = "Roboto", size = "12px", fontWeight = "Regular" }, offset = -5 },
45-
Pointers = new List<Object>
46-
{
47-
new
48-
{
49-
value = 60,
50-
radius = "60%",
51-
color = "#757575",
52-
pointerWidth = 7,
53-
cap = new { radius = 8, color = "#757575", border = new { width = 0 } },
54-
needleTail = new { color = "#757575", length = "25%" }
55-
}
56-
}
57-
}
58-
};
59-
}

‎ej2-blazor-samples/Pages/CircularGauge/CircularGauge/PointerImage.razor‎

Lines changed: 70 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -34,89 +34,81 @@
3434
@*End:Hidden*@
3535

3636
<div class="control-section">
37-
38-
<EjsCircularGauge id="circular" CenterY="57%" Title="Short Put Distance">
39-
<CircularGaugeAxes>
40-
<CircularGaugeAxis StartAngle="200" EndAngle="130" Minimum="0" Maximum="14" Radius="90%"
41-
Annotations ="@annotations" LineStyle="@lineStyle" LabelStyle="@labelStyle"
42-
MajorTicks="@majorTicks" MinorTicks="@minorTicks" Ranges="@ranges"
43-
Pointers="@pointers">
37+
<EjsCircularGauge ID="gauge" CenterY="57%" Title="Short Put Distance" >
38+
<CircularGaugeAxes>
39+
<CircularGaugeAxis StartAngle="200" EndAngle="130" Minimum="0" Maximum="14" Radius="90%" >
40+
<CircularGaugeAxisLineStyle Width="0.001" Color="#1d1d1d">
41+
</CircularGaugeAxisLineStyle>
42+
<CircularGaugeAxisMajorTicks Width="0.01" >
43+
</CircularGaugeAxisMajorTicks>
44+
<CircularGaugeAxisMinorTicks Width="0.01" >
45+
</CircularGaugeAxisMinorTicks>
46+
<CircularGaugeLabel Font="@Font">
47+
</CircularGaugeLabel>
48+
<CircularGaugePointers>
49+
<CircularGaugePointer Type="PointerType.Marker" Value=12 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/football.png" Radius="108%" MarkerWidth="28" MarkerHeight="28">
50+
<CircularGaugeAnimation Enable="true" Duration="1500" >
51+
</CircularGaugeAnimation>
52+
</CircularGaugePointer>
53+
<CircularGaugePointer Type="PointerType.Marker" value=11 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/basketball.png" Radius="78%" MarkerWidth="28" MarkerHeight="28">
54+
<CircularGaugeAnimation Enable="true" Duration="1200" >
55+
</CircularGaugeAnimation>
56+
</CircularGaugePointer>
57+
<CircularGaugePointer Type="PointerType.Marker" value=10 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/golfball.png" Radius="48%" MarkerWidth="28" MarkerHeight="28">
58+
<CircularGaugeAnimation Enable="true" Duration="900" >
59+
</CircularGaugeAnimation>
60+
</CircularGaugePointer>
61+
<CircularGaugePointer Type="PointerType.Marker" value=12 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/Athletics.png" Radius="0%" MarkerWidth="28" MarkerHeight="28">
62+
<CircularGaugeAnimation Enable="true" Duration="0" >
63+
</CircularGaugeAnimation>
64+
</CircularGaugePointer>
65+
<CircularGaugePointer Type="PointerType.Marker" value=0.1 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/girl1.png" Radius="108%" MarkerWidth="28" MarkerHeight="28">
66+
<CircularGaugeAnimation Enable="true" Duration="1500" >
67+
</CircularGaugeAnimation>
68+
</CircularGaugePointer>
69+
<CircularGaugePointer Type="PointerType.Marker" value=0.1 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/man1.png" Radius="78%" MarkerWidth="28" MarkerHeight="28">
70+
<CircularGaugeAnimation Enable="true" Duration="1500" >
71+
</CircularGaugeAnimation>
72+
</CircularGaugePointer>
73+
<CircularGaugePointer Type="PointerType.Marker" value=0.1 MarkerShape="GaugeShape.Image" ImageUrl="styles/images/circulargauge/man2.png" Radius="48%" MarkerWidth="28" MarkerHeight="28">
74+
<CircularGaugeAnimation Enable="true" Duration="1500" >
75+
</CircularGaugeAnimation>
76+
</CircularGaugePointer>
77+
</CircularGaugePointers>
78+
<CircularGaugeRanges>
79+
<CircularGaugeRange Start="0.001" End="12" Radius="115%" Color="#01aebe" StartWidth="25" EndWidth="25">
80+
</CircularGaugeRange>
81+
<CircularGaugeRange Start="0.001" End="11" Radius="85%" Color="#3bceac" StartWidth="25" EndWidth="25">
82+
</CircularGaugeRange>
83+
<CircularGaugeRange Start="0.001" End="10" Radius="55%" Color="#ee4266" StartWidth="25" EndWidth="25">
84+
</CircularGaugeRange>
85+
</CircularGaugeRanges>
86+
<CircularGaugeAnnotations>
87+
<CircularGaugeAnnotation Content="12 M" Radius="108%" Angle="98" ZIndex="1">
88+
</CircularGaugeAnnotation>
89+
<CircularGaugeAnnotation Content="11 M" Radius="80%" Angle="81" ZIndex="1">
90+
</CircularGaugeAnnotation>
91+
<CircularGaugeAnnotation Content="10 M" Radius="50%" Angle="69" ZIndex="1">
92+
</CircularGaugeAnnotation>
93+
<CircularGaugeAnnotation Content="Doe" Radius="108%" Angle="190" ZIndex="1">
94+
</CircularGaugeAnnotation>
95+
<CircularGaugeAnnotation Content="Almaida" Radius="80%" Angle="185" ZIndex="1">
96+
</CircularGaugeAnnotation>
97+
<CircularGaugeAnnotation Content="John" Radius="50%" Angle="180" ZIndex="1">
98+
</CircularGaugeAnnotation>
99+
</CircularGaugeAnnotations>
44100
</CircularGaugeAxis>
45101
</CircularGaugeAxes>
46102
</EjsCircularGauge>
47103
</div>
48104

49105
@code {
50-
public object annotations = new List<object>
51-
{
52-
new { content = "12 M", radius = "108%", angle = 98, zIndex = 1 },
53-
new { content = "11 M", radius = "80%", angle = 81, zIndex = 1 },
54-
new { content = "10 M", radius = "50%", angle = 69, zIndex = 1 },
55-
new { content = "Doe", radius = "108%", angle = 190, zIndex = 1 },
56-
new { content = "Almaida", radius = "80%", angle = 185, zIndex = 1 },
57-
new { content = "John", radius = "50%", angle = 180, zIndex = 1 },
106+
public class font
107+
    {
108+
        public String size { get; set; }
109+
    }
110+
public font Font = new font{
111+
size = "0px"
58112
};
59-
public object lineStyle = new { width = "0", color = "#1d1d1d" };
60-
public object labelStyle = new { font = new { size = "0px" } };
61-
public object majorTicks = new { width = "0" };
62-
public object minorTicks = new { width = "0" };
63-
public object ranges = new List<object>
64-
{
65-
new { start = 0, end = 12, radius = "115%", color = "#01aebe", startWidth = 25, endWidth = 25 },
66-
new { start = 0, end = 11, radius = "85%", color = "#3bceac", startWidth = 25, endWidth = 25 },
67-
new { start = 0, end = 10, radius = "55%", color = "#ee4266", startWidth = 25, endWidth = 25 },
68-
};
69-
public object pointers = new List<object>
70-
{
71-
new
72-
{
73-
type = "Marker", value = 12, markerShape = "Image",
74-
imageUrl = "styles/images/circulargauge/football.png",
75-
radius = "108%", markerWidth = 28, markerHeight = 28,
76-
animation = new { duration = 1500 }
77-
},
78-
new
79-
{
80-
type = "Marker", value = 11, markerShape = "Image",
81-
imageUrl = "styles/images/circulargauge/basketball.png",
82-
radius = "78%", markerWidth = 28, markerHeight = 28,
83-
animation = new { duration = 1200 }
84-
},
85-
new
86-
{
87-
type = "Marker", value = 10, markerShape = "Image",
88-
imageUrl = "styles/images/circulargauge/golfball.png",
89-
radius = "48%", markerWidth = 28, markerHeight = 28,
90-
animation = new { duration = 900 }
91-
},
92-
new
93-
{
94-
type = "Marker", value = 12, markerShape = "Image",
95-
imageUrl = "styles/images/circulargauge/Athletics.png",
96-
radius = "0%", markerWidth = 90, markerHeight = 90,
97-
animation = new { enable = false, duration = "0" }
98-
},
99-
new
100-
{
101-
type = "Marker", value = 0.1, markerShape = "Image",
102-
imageUrl = "styles/images/circulargauge/girl1.png",
103-
radius = "108%", markerWidth = 28, markerHeight = 28,
104-
animation = new { duration = 1500 }
105-
},
106-
new
107-
{
108-
type = "Marker", value = 0.1, markerShape = "Image",
109-
imageUrl = "styles/images/circulargauge/man1.png",
110-
radius = "78%", markerWidth = 28, markerHeight = 28,
111-
animation = new { duration = 1500 }
112-
},
113-
new
114-
{
115-
type = "Marker", value = 0.1, markerShape = "Image",
116-
imageUrl = "styles/images/circulargauge/man2.png",
117-
radius = "48%", markerWidth = 28, markerHeight = 28,
118-
animation = new { duration = 1500 }
119-
},
120-
};
121-
}
113+
}
122114

‎ej2-blazor-samples/Pages/CircularGauge/CircularGauge/Tooltip.razor‎

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -30,46 +30,47 @@
3030
@*End:Hidden*@
3131

3232
<div class="control-section">
33-
<EjsCircularGauge ID="circular" Title="Tooltip Customization" TitleStyle="@titleStyle" Tooltip="@tooltip" EnablePointerDrag="true">
34-
<CircularGaugeAxes>
35-
<CircularGaugeAxis StartAngle="240" EndAngle="120" Minimum="0" Maximum="120" Radius="90%"
36-
LineStyle="@lineStyle" MajorTicks="@majorTicks" MinorTicks="@minorTicks" LabelStyle="@labelStyle"
37-
Pointers="@pointers" Ranges="@ranges">
38-
</CircularGaugeAxis>
39-
</CircularGaugeAxes>
33+
<EjsCircularGauge ID="gauge" EnablePointerDrag="true" Title="Tooltip Customization" TitleStyle="@titleStyle">
34+
<CircularGaugeAxes>
35+
<CircularGaugeAxis StartAngle="240" EndAngle="120" Minimum="0" Maximum="120" Radius="90%" >
36+
<CircularGaugeLabel UseRangeColor="true">
37+
</CircularGaugeLabel>
38+
<CircularGaugeAxisLineStyle Width='0.001' >
39+
</CircularGaugeAxisLineStyle>
40+
<CircularGaugeAxisMajorTicks Height="12" Offset="-5" Color="white">
41+
</CircularGaugeAxisMajorTicks>
42+
<CircularGaugeAxisMinorTicks Width="0.01" >
43+
</CircularGaugeAxisMinorTicks>
44+
<CircularGaugePointers>
45+
<CircularGaugePointer Value=70 Radius="60%" Color="#33BCBD" >
46+
<CircularGaugeAnimation Enable="true" Duration="1500" >
47+
</CircularGaugeAnimation>
48+
<CircularGaugeCap Radius="10">
49+
<CircularGaugeCapBorder Color="#33BCBD" Width="5">
50+
</CircularGaugeCapBorder>
51+
</CircularGaugeCap>
52+
</CircularGaugePointer>
53+
</CircularGaugePointers>
54+
<CircularGaugeRanges>
55+
<CircularGaugeRange Start="1" End="50" Radius="102%" Color="#3A5DC8" StartWidth="10" EndWidth="10">
56+
</CircularGaugeRange>
57+
<CircularGaugeRange Start="50" End="120" Radius="102%" Color="#33BCBD" StartWidth="10" EndWidth="10">
58+
</CircularGaugeRange>
59+
</CircularGaugeRanges>
60+
</CircularGaugeAxis>
61+
</CircularGaugeAxes>
62+
<CircularGaugeTooltipSettings Enable="true" EnableAnimation="false">
63+
</CircularGaugeTooltipSettings>
4064
</EjsCircularGauge>
4165
</div>
4266

4367
@code {
44-
public object lineStyle = new { width = "0" };
45-
public object majorTicks = new { color = "white", offset = -5, height = 12 };
46-
public object minorTicks = new { width = "0" };
47-
public object labelStyle = new { font = new { fontFamily = "Roboto", size = "13px", color = "#424242" }, useRangeColor = true };
48-
public object pointers = new List<object>
49-
{
50-
new
51-
{
52-
value = 70,
53-
radius = "60%",
54-
color = "#33BCBD",
55-
cap = new { radius = 10, border = new { color = "#33BCBD", width = 5 } },
56-
animation = new { enable = true, duration = 1500 }
57-
}
68+
public class TitleStyle {
69+
public String color;
70+
public String size ;
5871
};
59-
public object ranges = new List<object>
60-
{
61-
new { start = "0", end = 50, radius = "102%", color = "#3A5DC8", startWidth = 10, endWidth = 10 },
62-
new { start = 50, end = 120, radius = "102%", color = "#33BCBD", startWidth = 10, endWidth = 10 }
63-
};
64-
65-
public object titleStyle { get; set; } = new
66-
{
67-
size = "15px",
68-
color = "grey"
69-
};
70-
public object tooltip { get; set; } = new
71-
{
72-
enable = true,
73-
enableAnimation = false
74-
};
75-
}
72+
public TitleStyle titleStyle = new TitleStyle {
73+
color="grey",
74+
size ="15px"
75+
};
76+
}

‎ej2-blazor-samples/Pages/CircularGauge/CircularGauge/labels.razor‎

Lines changed: 23 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -33,41 +33,31 @@
3333
@*End:Hidden*@
3434

3535
<div class="control-section">
36-
<EjsCircularGauge id="circular" >
36+
<EjsCircularGauge ID="gauge" >
3737
<CircularGaugeAxes>
38-
<CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="170" Radius="75%"
39-
Annotations="@annotations" LineStyle="@lineStyle" LabelStyle="@labelStyle"
40-
MajorTicks="@majorTicks" MinorTicks="@minorTicks" Pointers="@pointers">
41-
</CircularGaugeAxis>
38+
<CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="170" Radius="75%">
39+
<CircularGaugeLabel Position="Position.Outside" AutoAngle="true">
40+
<CircularGaugeFont Size="10px" >
41+
</CircularGaugeFont>
42+
</CircularGaugeLabel>
43+
<CircularGaugeAxisLineStyle Width="2" Color="#9E9E9E">
44+
</CircularGaugeAxisLineStyle>
45+
<CircularGaugeAxisMajorTicks Position="Position.Inside" Color="#757575" Width="2" Height="10" Interval="20" >
46+
</CircularGaugeAxisMajorTicks>
47+
<CircularGaugeAxisMinorTicks Position="Position.Inside" Color="#757575" Width="2" Height="5" Interval="10">
48+
</CircularGaugeAxisMinorTicks>
49+
<CircularGaugePointers>
50+
<CircularGaugePointer Type="PointerType.RangeBar" Value=145 Radius="60%" Color="#8BC34A" PointerWidth="7" RoundedCornerRadius="10">
51+
<CircularGaugeAnimation Enable="false" Duration="0" >
52+
</CircularGaugeAnimation>
53+
</CircularGaugePointer>
54+
</CircularGaugePointers>
55+
<CircularGaugeAnnotations>
56+
<CircularGaugeAnnotation Content="<div id='content' style='color:#518C03;font-size:20px;font-family:Segoe UI;font-weight:semibold;'>145</div>" Angle="0" Radius="0%" ZIndex="1">
57+
</CircularGaugeAnnotation>
58+
</CircularGaugeAnnotations>
59+
</CircularGaugeAxis>
4260
</CircularGaugeAxes>
4361
</EjsCircularGauge>
4462
</div>
4563

46-
@code {
47-
48-
public object annotations = new List<object> {
49-
new
50-
{
51-
content = "<div id='content' style='color:#518C03;font-size:20px;font-family:Segoe UI;font-weight:semibold;'>145</div>",
52-
angle = 0,
53-
radius = "0%",
54-
zIndex = 1
55-
}
56-
};
57-
public object lineStyle = new { width = 2, color = "#9E9E9E" };
58-
public object labelStyle = new { position = "Outside", autoAngle = true, font = new { size = "10px" } };
59-
public object majorTicks = new { position = "Inside", color = "#757575", width = 2, height = 10, interval = 20 };
60-
public object minorTicks = new { position = "Inside", color = "#757575", width = 2, height = 5, interval = 10 };
61-
public object pointers = new List<object> {
62-
new
63-
{
64-
animation = new { enable = false, duration = "0" },
65-
type = "RangeBar",
66-
value = 145,
67-
radius = "60%",
68-
color = "#8BC34A",
69-
pointerWidth = 10,
70-
roundedCornerRadius = 10,
71-
}
72-
};
73-
}

0 commit comments

Comments
 (0)