ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexChart / Work with FlexChart / Axis Grouping
In This Topic
    Axis Grouping
    In This Topic

    Axis grouping refers to the grouping of axis labels, wherever possible, for better readability and data analysis at different levels. FlexChart axis supports groups defined in CollectionView which is specified as data source for the chart. To display group, you need to create groups in collection view and set AxisGroupsOptions.

    The following example demonstrates how to group axis labels.

    Index.cshtml
    Copy Code 
    @model IEnumerable<ProductSales>

<c1-flex-chart height="500px" id="flexchart1" width="100%" binding-x="Product" legend-position="None">
    <c1-items-source source-collection="@Model" group-by="Category,SubCategory"></c1-items-source>
    <c1-flex-chart-series binding="Sales" name="Sales"></c1-flex-chart-series>
   <c1-flex-chart-axis c1-property="AxisX" position="Auto" label-angle="-90" >
       <c1-axis-groups-options c1-property="GroupsOptions" display="ShowGrid"></c1-axis-groups-options>
   </c1-flex-chart-axis>
</c1-flex-chart>
    HomeController.cs
    Copy Code 
    public IActionResult Index()
{
    
    return View(ProductSales.GetData());
}

    The following code demonstrates a class, ProductSales, which serves as a datasource for the chart created above.

    C#
    Copy Code 
    public class ProductSales
{
    public int Id { get; set; }
    public string Category { get; set; }
    public string SubCategory { get; set; }
    public string Product { get; set; }
    public double Sales { get; set; }

    public static List<ProductSales> GetData()
    {
        var categories = new string[]
        {
        "Electronics",
        "Computers & Tablets"
        };

        var subCategories = new string[][]
        {
        new string[] { "Camera", "Headphones", "Cell Phones" },
        new string[] { "Desktops", "Laptops", "Tablets" }
        };

        var products = new string[][][]
        {
        new string[][]
        {
            new string[] { "Digital", "Film", "Lenses", "Video", "Accessories" },
            new string[] { "Earbud", "Over-ear", "On-ear", "Bluetooth", "Noise-cancelling", "Audiophile headphones" },
            new string[] { "Cell Phones", "Accessories" }
        },
        new string[][]
        {
            new string[] { "All-in-ones", "Minis", "Towers" },
            new string[] { "2 in 1", "Traditional" },
            new string[] { "iOS", "Android", "Windows" }
        }
        };

        var data = new List<ProductSales>();
        var random = new Random();

        for (int i = 0; i < categories.Length; i++)
        {
            for (int j = 0; j < subCategories[i].Length; j++)
            {
                for (int k = 0; k < products[i][j].Length; k++)
                {
                    data.Add(new ProductSales
                    {
                        Id = i + j + k,
                        Category = categories[i],
                        SubCategory = subCategories[i][j],
                        Product = products[i][j][k],
                        Sales = random.NextDouble() * 100
                    });
                }
            }
        }

        return data;
    }
}