C#’da ScottPlot 5.0 ile Grafikler Oluşturarak Veri Görselleştirme (Data Visualization by Creating Graphs with ScottPlot 5.0 in C#)

‘Bir Resim Bin Sözcüğe Bedeldir.’ demiş reklamcı Fred R. Barnard. Veriyi doğru şekilde sunmak, yazılım dünyasında kullanıcı deneyiminin en kritik adımlarından biridir. Elinizdeki veriyi görselleştirebilmek için basit ama güçlü bir grafik kütüphanesi arıyorsanız, ScottPlot tam size göre. Bu yazıda, .NET Core uygulamalarınızda kolayca pasta grafik (Pie), çubuk grafik (Bar) ve yatay grafik (Horizontal Range Chart) vb.oluşturmayı adım adım anlatacağım.

Bu örnekler ScottPlot’un 5.0.54 sürümü ile yazılmıştır. Güncel dökümantasyon için: https://scottplot.net/cookbook/5.0/

Renk Yönetimi: GetColor ile Dinamik Renk Atama

Renk yönetimi, grafiklerin estetik ve fonksiyonel başarısında kritik rol oynar. Aşağıdaki yöntemle grafiklere manuel olarak sırayla renk atayabiliyoruz.

private static readonly Color[] colors =
{
    Colors.Red, Colors.LightBlue, Colors.LightGreen, Colors.Yellow,
    Colors.Orange, Colors.Purple, Colors.Black, Colors.White,
    Colors.Gray, Colors.Cyan
};

private static Color GetColor(int index)
{
    if (index > 9)
        return Colors.Brown;
    return colors[index];
}

Bu yapı sayesinde 10’dan fazla veri girilse bile Brown varsayılan renkle atanır. Böylece her dilime veya bara eşsiz bir renk atanır.

PieChart: Pasta Grafik ile Oransal Dağılım

Verilerin yüzde dağılımını etkili bir şekilde sunmak için ideal. ScottPlot’un Add.Pie() metodu ile basitçe oluşturulabiliyor.

PieSlice Yapısı: Her dilim için Value, FillColor, Label, LegendText gibi bilgileri içeriyor. Yüzde Etiketleri: Veri değerleri yüzdeye çevrilerek dilimlere yazılıyor. Legend Kullanımı: LegendText ile açıklayıcı bir liste grafik kenarında gösteriliyor. ExplodeFraction: Dilimleri hafif dışarı taşıyarak görünürlüğü artırıyoruz.

public static byte[] PieChart(Dictionary<string, int> data, int width = 500, int height = 500, int? legendAlignment = 5)
{
    Plot plot = new();
    List<PieSlice> slices = new();
    int index = 0;
    double total = data.Select(x => x.Value).Sum();
    double[] percentages = data.Select(x => x.Value / total * 100).ToArray();

    foreach (var item in data)
    {
        if (legendAlignment != null)
        {
            slices.Add(new PieSlice()
            {
                Value = item.Value,
                FillColor = GetColor(index),
                Label = $"{percentages[index]:0.0}%",
                LabelFontSize = 14,
                LabelBold = true,
                LegendText = $"{item.Key}, {item.Value} Adet"
            });
        }
        else
        {
            slices.Add(new PieSlice()
            {
                Value = item.Value,
                FillColor = GetColor(index),
                Label = $"{percentages[index]:0.0}%",
                LabelFontSize = 14,
                LabelBold = true
            });
        }
        index++;
    }

    var pie = plot.Add.Pie(slices);
    pie.ExplodeFraction = 0.05;
    pie.SliceLabelDistance = 0.8;

    plot.Axes.Frameless();
#if RELEASE
            plot.HideGrid();
#endif
    if (legendAlignment != null)
    {
        plot.ShowLegend();
        plot.Legend.Alignment = (Alignment)legendAlignment!;
        plot.Legend.FontSize = 14;
        plot.Legend.BackgroundColor = Colors.White;
    }

    plot.SavePng("chart.png", width, height);
    byte[] imageBytes = File.ReadAllBytes("chart.png");
    return imageBytes;
}

PieChart metodunun görsel çıktısı.

BarChart: Sayısal Değerler için Dikey Çubuklar

Kategorik verilerin karşılaştırılması için çubuk grafikler (bar charts) oldukça güçlüdür.

X Değerleri: Enumerable.Range ile çubuk indeksleri oluşturuluyoruz. Y Değerleri: Dictionary’den gelen sayısal değerler çubuk yüksekliği olarak kullanıyoruz. Etiketler: Her barın üstüne değer yazdırıyoruz.

Yüksek okunabilirlik için yazı boyutu ve kalınlık artırılmıştır. Ayrıca Frameless() ile kenar çizgiler kaldırılarak sade bir görünüm sağladık.

public static byte[] BarChart(Dictionary<string, int> data, int width = 500, int height = 500, int? legendAlignment = 5)
{
    Plot myPlot = new();

    double[] xValues = Enumerable.Range(0, data.Count).Select(i => (double)i).ToArray();
    double[] yValues = data.Values.Select(v => (double)v).ToArray();
    var barPlot = myPlot.Add.Bars(yValues);

    foreach (var bar in barPlot.Bars)
    {
        bar.Label = bar.Value.ToString();
    }

    barPlot.ValueLabelStyle.Bold = true;
    barPlot.ValueLabelStyle.FontSize = 18;

    myPlot.Axes.Margins(bottom: 0, top: .2);
    myPlot.Axes.Frameless();
    myPlot.SavePng("chart.png", width, height);
    byte[] imageBytes = File.ReadAllBytes("chart.png");
    return imageBytes;
}

BarChart metodunun görsel çıktısı.

HorizontalChart: Kategorik Değerlerin Yatay Gösterimi

Yatay grafikler, özellikle metin bazlı kategorilerde oldukça etkilidir. ScottPlot 5 ile gelen Add.Ranges() fonksiyonu sayesinde artık bu çok daha kolay yapılmaktadır.

Sol Eksen Etiketleri: MiddleRight hizalama ile kategori isimleri düzgün görüntüledik. Eksen Minimum Genişliği: myPlot.Axes.Left.MinimumSize = 150 sayesinde etiketler kesilmez. Başlık: Opsiyonel parametre ile grafik başlığı verilebilir. Referans Çizgisi: 0 değerini belirtmek için siyah, kesikli bir çizgi ekledik.

public static byte[] HorizontalChart(Dictionary<string, int> data, int width = 500, int height = 500, int? legendAlignment = 5, string? title = null)
{
    Plot myPlot = new();

    List<(string name, CoordinateRange range)> ranges = data.Select(kv => (kv.Key, new CoordinateRange(0, kv.Value))).ToList();

    myPlot.Add.Ranges(ranges, horizontal: true);

    myPlot.Title(title ?? string.Empty);

    myPlot.Axes.Left.TickLabelStyle.Rotation = 0;
    myPlot.Axes.Left.TickLabelStyle.Alignment = Alignment.MiddleRight;
    myPlot.Axes.Left.TickLabelStyle.FontSize = 16;
    myPlot.Axes.Left.MinimumSize = 150;

    ScottPlot.TickGenerators.NumericAutomatic tickGen = new();
    myPlot.Axes.Bottom.TickGenerator = tickGen;
    tickGen.LabelFormatter = (x) => $"{x}";

    var vl = myPlot.Add.VerticalLine(0, 1, Colors.Black, LinePattern.DenselyDashed);
    myPlot.MoveToBack(vl);

    myPlot.SavePng("chart.png", width, height);
    byte[] imageBytes = File.ReadAllBytes("chart.png");
    return imageBytes;
}

HorizontalChart metodunun görsel çıktısı.

Grafiklerin Dışa Aktarımı

Dikkat ettiyseniz her grafik fonksiyonu aynı mantıkla sonlanıyor. Bu yöntem sayesinde dosya sistemine yazılıp ardından belleğe yükleniyor. Web API içinde kullanacaksanız, ki ben öyle yaptım. MemoryStream.ToArray() gibi daha performanslı yöntemlerle doğrudan bellekte tutmanız öneririm fakat sorun şu ki; ScottPlot 4.x sürümünde Plot.GetBitmap(…) metodu ile bunu System.Drawing.Bitmap’e dönüştürüyor sonra .Save(MemoryStream, ImageFormat.Png) ile byte[] üretebiliyorduk. Malesef ScottPlot 5.0.54 ile doğrudan byte[] almak şu an mümkün değil. 5.X versiyonunda yalnızca SavePng(string filePath, …) gibi diske yazma metotları bulunuyor. MemoryStream ya da Bitmap’e erişim henüz API’de açılmamış. Bu sebeple dışarı aktarmak için disk’e yazma yöntemini kullandım.

ScottPlot, BackEnd projenizde bile etkileyici görselleştirmeler oluşturmak için oldukça yeterli ve hafif bir araç. 5.X serisiyle birlikte gelen yeni API yapısı sayesinde okunabilir, sade ve genişletilebilir kodlar yazmak artık çok kolay.

Veri görselleştirme işinizi ciddiye alıyor ve sade bir çözüm arıyorsanız, ScottPlot sizin için biçilmiş kaftan olabilir. Makelemde bahsettiğim kodlara https://github.com/ertugrulakdag/scott-plot adresinden erişebilirsiniz.

Keyifli okumalar 😊