Angular gauges are essentially like the speedometer or fuel gauge of your car. They use a radial scale to display your data range and a dial is used to indicate the data value. An angular/meter/dial gauge chart is used to display a specific data set utilizing an indicator that moves within a circular range to indicate whether the monitored data is within defined limits. Colors can be selected for the data range to suit the application such as green for satisfactory, yellow for caution and red for alarm. document : http://www.fusioncharts.com/widgets/docs/
To create a FusionWidgets Angular Gauge chart, you need to: •Decide the lower and upper limit of chart. •Decide the cosmetic and functional properties of the chart •Decide the color range for the chart. That is, suppose you are plotting a chart to show the production output of a factory, the color range could be: 0-100 pieces/hr – Under Average – Red 100-200 pieces/hr – Average Production - Yellow 200-300 pieces/hr – Very good - Green •Decide trend points if any – for example, if you would like to mark an average at say 175 - say “Last week’s average production”, you can use trend points to do the same. •Decide the chart value(s). FusionWidgets allows you to indicate multiple values on the angular gauge chart. All you have to do is decide the value each spindle/dial would indicate and the width and color of each one of them.
Inheritance: GaugeBase
AngularGauge Class Documentation
Example #1
0
        private static AngularGauge CreateAngularGauge() {
            var chart = new AngularGauge();

            chart.Axis.LowerLimit = 0;
            chart.Axis.UpperLimit = 100;
            chart.Axis.LowerLimitDisplay = "Bad";
            chart.Axis.UpperLimitDisplay = "Good";
            chart.GaugeStartAngle = 180;
            chart.GaugeEndAngle = 0;

            chart.Palette = 1;
            chart.ShowValue = true;
            chart.NumberAttr.NumberSuffix = "%";
            chart.TickMarkAttr.TickValueDistance = 20;
            chart.DataStreamUrl = "AngularGaugeRealTime.ashx";
            chart.RefreshInterval = 3;

            BuildColorRange(chart);
            BuildDials(chart);
            BuildStyles(chart);
            BuildAnnotations(chart);
            BuildAlerts(chart);

            return chart;
        }
Example #2
0
 private static void BuildDials(AngularGauge gauge) {
     gauge.Dials.Add(new DialElement
                     {
                         Id = "CS",
                         Value = 12,
                         RearExtension = 10
                     });
 }
Example #3
0
        /// <summary>
        /// 원하는 Chart를 빌드합니다.
        /// </summary>
        public override IChart BuildFusionChart() {
            var option = Request["Option"].AsInt(1);

            var gauge = new AngularGauge();

            switch(option) {
                case 1:
                    FeatherEffectAngularGauge(gauge);
                    break;
                case 2:
                    MetalEffectAngularGague(gauge);
                    break;
            }

            return gauge;
        }
Example #4
0
        private static void FeatherEffectAngularGauge(AngularGauge gauge) {
            gauge.BackgroundAttr.BgColor = Color.White;
            gauge.Axis.UpperLimit = 100;
            gauge.Axis.LowerLimit = 0;
            gauge.BaseFontAttr.FontColor = "#666666".FromHtml();

            gauge.TickMarkAttr.ShowLimits = true;

            gauge.TickMarkAttr.MajorTM.Number = 11;
            gauge.TickMarkAttr.MajorTM.Color = "#666666".FromHtml();
            gauge.TickMarkAttr.MajorTM.Height = 8;

            gauge.TickMarkAttr.MinorTM.Number = 5;
            gauge.TickMarkAttr.MinorTM.Color = "#666666".FromHtml();
            gauge.TickMarkAttr.MinorTM.Height = 3;

            gauge.Border.Show = false;

            gauge.GaugeOuterRadius = 100;
            gauge.GaugeInnerRadius = 90;
            gauge.GaugeOriginX = 170;
            gauge.GaugeOriginY = 170;
            gauge.GaugeScaleAngle = 320;
            // gauge.GaugeStartAngle = 320;

            gauge.TickMarkAttr.TickValueDistance = 10;
            gauge.TickMarkAttr.PlaceValuesInside = true;

            gauge.GaugeFillMix = "";
            gauge.Pivot.Radius = 20;
            gauge.Pivot.FillMix = "{F0EFEA}, {BEBCBO}";
            gauge.Pivot.BorderColor = "#BEBCB0".FromHtml();
            gauge.Pivot.FillRatio = "80, 20";

            gauge.ShowShadow = false;

            gauge.AddColor(0, 80, "#00FF00".FromHtml(), null).Alpha = 0;
            gauge.AddColor(80, 100, "#FF0000".FromHtml(), "Danger").Alpha = 50;

            var dial = gauge.AddDial(null, 65);

            dial.BgColor = "BEBCB0, F0EFEA, BEBCB0";
            dial.Border.Color = Color.White;
            dial.Border.Alpha = 0;
            dial.BaseWidth = 10;
            dial.TopWidth = 3;

            var annGrp = gauge.AddAnnotationGroup(170, 170);

            var ca = new CircleAnnotation { X = 0, Y = 0, Radius = 150 };
            ca.Border.Color = "#BEBCB0".FromHtml();
            ca.FillColor = "F0EFEA, BEBCB0";
            ca.FillRatio = "85,15";
            ca.FillPattern = FillMethod.Linear;
            annGrp.Add(ca);

            ca = new CircleAnnotation { X = 0, Y = 0, Radius = 120 };
            ca.Border.Color = "#BEBCB0".FromHtml();
            ca.FillColor = "F0EFEA, BEBCB0";
            ca.FillRatio = "85,15";
            annGrp.Add(ca);

            ca = new CircleAnnotation { X = 0, Y = 0, Radius = 100, Color = Color.White.ToHexString() };
            ca.Border.Color = "#F0EFEA".FromHtml();
            annGrp.Add(ca);
        }
Example #5
0
 private static void MetalEffectAngularGague(AngularGauge gauge) {}