Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Column Sparkline

The Ignite UI for Blazor Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as Ignite UI for Blazor sparkline component. Refer to the Column Types topic for other types of columns supported in the IgbDataGrid component.

Blazor Column Sparkline Example

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbSparklineModule),
                typeof(IgbDataGridModule)
);
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

// NOTE this file contains multiple data sources:


// Data Source #1
using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public static class DataGenerator
    {
        readonly static string[] websites = { ".com", ".gov", ".edu", ".org" };
        readonly static string[] emails = { "gmail.com", "yahoo.com", "twitter.com" };
        readonly static string[] genders = { "male", "female" };
        readonly static string[] maleNames = { "Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce" };
        readonly static string[] femaleNames = { "Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally" };
        readonly static string[] lastNames = { "Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla" };
        readonly static string[] countries = { "USA", "UK", "France", "Canada", "Poland" };
        readonly static string[] citiesUS = { "New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas" };
        readonly static string[] citiesUK = { "London", "Liverpool", "Manchester" };
        readonly static string[] citiesFR = { "Paris", "Marseille", "Lyon" };
        readonly static string[] citiesCA = { "Toronto", "Vancouver", "Montreal" };
        readonly static string[] citiesPL = { "Krakow", "Warsaw", "Wroclaw", "Gdansk" };
        readonly static string[] citiesJP = { "Tokyo", "Osaka", "Kyoto", "Yokohama" };
        readonly static string[] citiesGR = { "Berlin", "Bonn", "Cologne", "Munich", "Hamburg" };
        readonly static string[] roadSuffixes = { "Road", "Street", "Way" };
        readonly static string[] roadNames = { "Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill" };

        public static Random Rand = new Random();

        public static string GetWebsite()
        {
            return GetItem(websites);
        }

        public static string GetEmail()
        {
            return GetItem(emails);
        }

        public static double GetNumber(double min, double max)
        {
            return Math.Round(min + (Rand.NextDouble() * (max - min)));
        }

        public static int GetInteger(double min, double max)
        {
            return (int)GetNumber(min, max);
        }

        public static string GetPhone()
        {
            var phoneCode = GetNumber(100, 900);
            var phoneNum1 = GetNumber(100, 900);
            var phoneNum2 = GetNumber(1000, 9000);
            var phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
            return phone;
        }

        public static string GetGender()
        {
            return GetItem(genders);
        }

        public static string GetNameFirst(string gender)
        {
            if (gender == "male")
                return GetItem(maleNames);
            else
                return GetItem(femaleNames);
        }

        public static string GetNameLast()
        {
            return GetItem(lastNames);
        }

        public static string GetItem(string[] array)
        {
            var index = (int)Math.Round(GetNumber(0, array.Length - 1));
            return array[index];
        }

        public static string GetCountry()
        {
            return GetItem(countries);
        }

        public static string GetCity(string country)
        {
            if (country == "Canada")
            {
                return GetItem(citiesCA);
            }
            else if (country == "France")
            {
                return GetItem(citiesFR);
            }
            else if (country == "Poland")
            {
                return GetItem(citiesPL);
            }
            else if (country == "USA")
            {
                return GetItem(citiesUS);
            }
            else if (country == "Japan")
            {
                return GetItem(citiesJP);
            }
            else if (country == "Germany")
            {
                return GetItem(citiesGR);
            }
            else
            { // if (country === "United Kingdom") {
                return GetItem(citiesUK);
            }
        }

        public static string GetStreet()
        {
            var num = Math.Round(GetNumber(100, 300)).ToString();
            var road = GetItem(roadNames);
            var suffix = GetItem(roadSuffixes);
            return num + " " + road + " " + suffix;
        }

        public static DateTime GetBirthday()
        {
            var year = DateTime.Now.Year - GetInteger(30, 50);
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static DateTime GetDate()
        {
            var year = DateTime.Now.Year;
            var month = GetNumber(10, 12);
            var day = GetNumber(20, 27);
            return new DateTime(year, (int)month, (int)day);
        }

        public static string Pad(int num, int size)
        {
            var s = num + "";
            while (s.Length < size)
            {
                s = "0" + s;
            }
            return s;
        }

        public static string GetPhotoMale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GUY" + Pad(id, 2) + ".png";
        }

        public static string GetPhotoFemale(int id)
        {
            return "https://static.infragistics.com/xplatform/images/people/GIRL" + Pad(id, 2) + ".png";
        }

        private static int maleCount = 0;
        private static int femaleCount = 0;
        public static string GetPhoto(string gender)
        {
            if (gender == "male")
            {
                maleCount++;
                if (maleCount > 24) maleCount = 1;
                return GetPhotoMale(maleCount);
            }
            else
            {
                femaleCount++;
                if (femaleCount > 24) femaleCount = 1;
                return GetPhotoFemale(femaleCount);
            }
        }

        public static string GetGenderPhoto(string gender)
        {
            return "https://static.infragistics.com/xplatform/images/genders/" + gender + ".png";
        }

        public static string GetCountryFlag(string country)
        {
            return "https://static.infragistics.com/xplatform/images/flags/" + country + ".png";
        }

        public static string GetIncomeRange(double salary)
        {
            if (salary < 50000)
            {
                return "Low";
            }
            else if (salary < 100000)
            {
                return "Average";
            }
            else
            {
                return "High";
            }
        }

    }

}


// Data Source #2
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class Product
    {
        public string CountryFlag { get; set; }
        public string CountryName { get; set; }
        public double Margin { get; set; }
        public int OrderCount { get; set; }
        public List<OrderHistoryItem> OrderHistory { get; set; }
        public int OrderShipped { get; set; }
        public double OrderValue { get; set; }
        public DateTime OrderDate { get; set; }
        public string ProductID { get; set; }
        public string ProductName { get; set; }
        public double ProductPrice { get; set; }
        public double Profit { get; set; }
        //public List<ReturnRateItem> ReturnRate { get; set; }
        public string Status { get; set; }
    }

    public class ReturnRateItem
    {
        public double Balance { get; set; }
        public int Week { get; set; }
    }

    public class OrderHistoryItem
    {
        public double Sold { get; set; }
        public int Week { get; set; }
    }

    public class Products
    {
        public static List<Product> GetData(int? count)
        {
            if (count == null)
            {
                count = 20;
            }

            string[] names = {
                "Intel CPU", "AMD CPU",
                "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard",
                "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU",
                "Corsair Memory", "Patriot Memory", "Skill Memory",
                "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD",
                "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
                "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" };
            string[] countries = { "USA", "UK", "France", "Canada", "Poland", "Japan", "Germany" };
            string[] status = { "Packing", "Shipped", "Delivered" };

            var products = new List<Product>();
            for (int i = 0; i < count; i++)
            {
                var id = DataGenerator.Pad((int)count - i, count.ToString().Length);
                var price = Math.Round((DataGenerator.GetNumber(10000, 90000) / 100), 2);
                var orderCount = (int)DataGenerator.GetNumber(4, 30);
                var orderValue = Math.Round((price * orderCount), 2);
                var orderShipped = (int)DataGenerator.GetNumber(30, 100);
                var margin = DataGenerator.GetNumber(5, 10);
                var profit = Math.Round(orderValue * (margin / 100));
                var country = DataGenerator.GetItem(countries);

                products.Add(new Product()
                {
                    CountryFlag = DataGenerator.GetCountryFlag(country),
                    CountryName = country,
                    Margin = margin,
                    OrderCount = orderCount,
                    OrderHistory = GetOrderHistory(26),
                    OrderShipped = orderShipped,
                    OrderValue = orderValue,
                    OrderDate = DataGenerator.GetDate(),
                    ProductID = id,
                    ProductName = DataGenerator.GetItem(names),
                    ProductPrice = price,
                    Profit = profit,
                    //ReturnRate = GetReturnRates(26),
                    Status = DataGenerator.GetItem(status)
                });
            }

            return products;
        }

        public static List<OrderHistoryItem> GetOrderHistory(int weekCount)
        {
            var items = new List<OrderHistoryItem>();
            for (int i = 0; i < weekCount; i++)
            {
                double value = DataGenerator.GetNumber(0, 100);
                items.Add(new OrderHistoryItem() { Sold = value, Week = i });
            }

            return items;
        }

        public static List<ReturnRateItem> GetReturnRates(int weekCount)
        {
            var items = new List<ReturnRateItem>();
            for (int i = 0; i < weekCount; i++)
            {
                double value = DataGenerator.GetNumber(-100, 100);
                items.Add(new ReturnRateItem() { Balance = value, Week = i });
            }

            return items;
        }
    }
}
csCOPY CODE

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Rendering
@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbDataGrid Height="100%" Width="100%"
                      RowHeight="90"
                      AutoGenerateColumns="false"

                      DataSource="Data">
                <IgbTextColumn Field="ProductID" HeaderText="ID" Width="@("*>110")"
                            HorizontalAlignment="@CellContentHorizontalAlignment.Center" />
                <IgbTextColumn Field="ProductName" HeaderText="Product" Width="@("*>140")" />
                <IgbNumericColumn Field="ProductPrice" HeaderText="Price" Width="@("*>110")"
                               PositivePrefix="$" ShowGroupingSeparator="true"
                               MinFractionDigits="2" />

                @* custom sparkline solumn: *@
                <IgbTemplateColumn Field="OrderHistory" Width="@("*>180")"
                                HeaderText="Order History" PaddingTop="10" PaddingBottom="10"
                                HorizontalAlignment="CellContentHorizontalAlignment.Center">
                    <Template>
                        <div style="width: 100%; height: 70px; background: transparent">
                            <IgbSparkline Height="100%" Width="100%"
                                       DataSource="@((context.RowItem as Product).OrderHistory)"
                                       DisplayType="SparklineDisplayType.Line"
                                       ValueMemberPath="Sold"
                                       LabelMemberPath="Week"
                                       Brush="rgb(21, 190, 6)">
                            </IgbSparkline>
                        </div>
                    </Template>
                </IgbTemplateColumn>

                <IgbNumericColumn Field="OrderCount" HeaderText="Orders" Width="@("*>110")"
                               HorizontalAlignment="CellContentHorizontalAlignment.Center" />
                <IgbNumericColumn Field="Profit" Width="@("*>120")" PositivePrefix="$" ShowGroupingSeparator="true" />

                <IgbImageColumn IsEditable="false" Field="CountryFlag" HeaderText="Country" Width="@("*>120")"
                             ContentOpacity="1" HorizontalAlignment="CellContentHorizontalAlignment.Center"
                             PaddingTop="10" PaddingBottom="10"/>
                <IgbTextColumn Field="Status" HeaderText="Status" Width="@("*>120")"
                            HorizontalAlignment="CellContentHorizontalAlignment.Center" />
            </IgbDataGrid>
        }
    </div>
</div>

@code {

    private List<Product> Data;

    protected override void OnInitialized()
    {

        this.Data = Products.GetData(20);
    }
}razorCOPY CODE

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssCOPY CODE

Code Snippet

The following code example shows how to embed IgbSparkline component in IgbTemplateColumn of the IgbDataGrid component :

<IgbDataGrid Height="100%" Width="100%"
          RowHeight="90"
          AutoGenerateColumns="false"
          DataSource="DataSource">
    <IgbTemplateColumn Field="OrderHistory" Width="@("*>180")" HeaderText="Order History" >
        <Template>
            <RenderFragment>
                 <div style="width: 100%; height: 70px; background: transparent">
                     <Sparkline Height="100%" Width="100%"
                                DataSource="@((context.RowItem as Product).OrderHistory)"
                                DisplayType="SparklineDisplayType.Line"
                                ValueMemberPath="Sold"
                                LabelMemberPath="Week"
                                Brush="rgb(21, 190, 6)">
                     </Sparkline>
                 </div>
            </RenderFragment>
        </Template>
    </IgbTemplateColumn>
</IgbDataGrid>
razor

API References

• IgbDataGrid
• IgbSparkline