How to draw speedometer or circular chart using xamarin forms - xamarin

Question

Recently, I started development using Xamarin.Forms in Visual Studio.
I need to draw something like this:
Is it possible using xamarin forms or is there any sample code for reference?
Thanks

Answer 1

I would look at the Syncfusion Circular Guage
See images below:
I am not 100% sure on the licencing, but I think they provide a Community Licence

Answer 2

Sorry for my English.
I have made something like that, see the picture below.
I copied some codes from some forums and made some ajusts of my own. But the principle is there, maybe adjust a few things and you can manage to achieve what you want. The adjusts that I made don't respect the proportional size in xaml (widht, height), I used the Request = 200. I hope that it can help you.
using System;
using System.Collections.Generic;
using System.Text;
using Microcharts.Forms;
using Microcharts;
using SkiaSharp;
using System.Linq;
namespace MES_App1.Chart
{
class SpeedometerChart : RadialGaugeChart
{
public SpeedometerChart()
{
BackgroundColor = SKColors.White;
}
private const float startAngle = 150;
private const float backgroundSweepAngle = 240;
public override void DrawContent(SKCanvas canvas, int width, int height)
{
var diferenceX = width > height ? (width - height) / 2 : 0;
var diferenceY = height > width ? (height - width) / 2 : 0;
var strokeWidth = (4 * (width - diferenceX)) / 100;
var rect = new SKRect(
5 + strokeWidth + diferenceX,
5 + strokeWidth + diferenceY + 50,
width - (5 + strokeWidth + diferenceX),
height - (5 + strokeWidth + diferenceY)+50);
var paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColor.Parse("#008000"),
StrokeWidth = strokeWidth*4,
IsAntialias = true,
IsStroke = true
};
float[] angulos = { 1, 0.85f, 0.7f, 0.55f, 0.4f, .25f };
string[] angulosStr = { "100%", "85%", "70%", "55%", "40%", "25%" };
string[] cores = { "#008000", "#32CD32", "#5F9EA0", "#FFA500", "#FFD700", "#FF0000" };
for (int i = 0; i < angulos.Length; i++)
{
using (SKPath backgroundPath = new SKPath())
{
paint.Color = SKColor.Parse(cores[i]);
backgroundPath.AddArc(rect, startAngle, backgroundSweepAngle * angulos[i]);
canvas.DrawPath(backgroundPath, paint);
}
using (SKPath labelPath = new SKPath())
{
var rectLabels = new SKRect
{
Left=rect.Left-strokeWidth*2-20,
Top=rect.Top-strokeWidth*2-20,
Right=rect.Right+strokeWidth*2+20,
Bottom=rect.Bottom+strokeWidth*2+20
};
var labelPaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
BlendMode = SKBlendMode.Clear,
Color = SKColors.Black,
StrokeWidth = 0,
IsAntialias = true,
IsStroke = true
};
labelPath.AddArc(rectLabels, startAngle, backgroundSweepAngle * angulos[i]);
canvas.DrawPath(labelPath, labelPaint);
canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, angulosStr[i], SKColors.Black, 20,labelPath.LastPoint, SKTextAlign.Center);
}
}
float[] angulosLabel = { 1f, 0.85f, 0.7f, 0.55f, .25f };
float[] offsetLabels = { 20, 25, 20, 30, 30};
string[] labelsStr = { "Ideal", "Alta", "Tipico", "Precisa Melhoria", "Inaceitavel" };
for (int i = angulosLabel.Length-1; i >= 0; i--)
{
float anguloInicial;
if (i == angulosLabel.Length-1)
{
anguloInicial = startAngle;
}
else
{
anguloInicial = startAngle+backgroundSweepAngle * angulosLabel[i + 1];
}
using (SKPath labelPath = new SKPath())
{
var labelPaint = new SKPaint
{
TextSize=18
};
labelPath.AddArc(rect, anguloInicial, backgroundSweepAngle * angulosLabel[i]);
canvas.DrawTextOnPath(labelsStr[i], labelPath, offsetLabels[i], -10, labelPaint);
if (labelsStr[i] == "Alta")
{
labelPaint.TextSize = 16;
canvas.DrawTextOnPath("Performance", labelPath, 0, 10, labelPaint);
}
}
}
using (SKPath circlePath = new SKPath())
{
var circlePaint = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = SKColors.Black,
IsAntialias = true
};
circlePath.AddCircle(rect.MidX, rect.MidY, 20);
canvas.DrawPath(circlePath, circlePaint);
}
foreach (var entry in Entries.OrderByDescending(e => e.Value))
{
using (SKPath pointerPath = new SKPath())
{
var colors = new[]
{
SKColors.SlateGray,
SKColors.Gray,
SKColors.Black
};
var shader = SKShader.CreateLinearGradient(
new SKPoint(128.0f, 0.0f),
new SKPoint(128.0f,256.0f),
colors,
null,
SKShaderTileMode.Clamp);
var labelPaint = new SKPaint
{
Style = SKPaintStyle.Fill,
StrokeJoin = SKStrokeJoin.Miter,
Shader = shader,
IsAntialias = true
};
canvas.Save();
canvas.RotateDegrees(entry.Value/100*backgroundSweepAngle-120, rect.MidX, rect.MidY);
pointerPath.MoveTo(rect.MidX-10, rect.MidY);
pointerPath.LineTo(rect.MidX, rect.Top);
canvas.DrawCaptionLabels(string.Empty, SKColor.Empty, entry.Value.ToString() + "%", SKColors.Black, 20, pointerPath.LastPoint, SKTextAlign.Center);
pointerPath.LineTo(10+rect.MidX, rect.MidY);
pointerPath.Close();
canvas.DrawPath(pointerPath, labelPaint);
canvas.Restore();
}
}
}
}
}