Multi-series chart
 Next   Menu    Previous 

In contrast to the single-series chartexample this sample creates a multi-series chart from the grid rows using the client-side API rowSeriesData method. This effectively creates a series from each row in the grid. The columnSeriesData method is used to get a list of the product categories and that is then used to create a series based on month data for each category.
Report By:
Loading...
Razor code

var mode = HttpContext.Request.Query["mode"];

List
salesColumns = new List()
{
    new GridColumn("CategoryName", "Category") { Filter = FilterType.Distinct}
};

for (var i = 1; i <= 12; i++)
{
    var monthName = new DateTime(2024, i, 1).ToString("MMMM");
    GridColumn column;

    string columnTemplate = $"(case when strftime ('%d', OrderDate) = '{i.ToString("00")}' then {{0}} else 0 end) as {monthName.ToLower()}";

    if (mode != "value")
    {
        column = new GridColumn(string.Format(columnTemplate, "quantity"), monthName) { Aggregate = AggregateType.Sum, DataType = typeof(Int32) };
    }
    else
    {

        column = new GridColumn(string.Format(columnTemplate, "(Quantity * [order details].UnitPrice)"), monthName) { Aggregate = AggregateType.Sum, DataType = typeof(Decimal), Format = "c" };
    }
    salesColumns.Add(column);
}

var salesGrid = new GridModel(DataSourceType.SQLite, "Northwind", "[order details] join products on [order details].productid = products.productid join categories on products.categoryid = categories.categoryid join orders on orders.orderid = [order details].orderid");
salesGrid.Columns = salesColumns;
salesGrid.Caption = $"Sales {(mode != "value" ? "Volumes" : "Value")} By Category/Month";
salesGrid.IncludeJsonData = true;
salesGrid.ToolbarPosition = ToolbarPosition.Hidden;
salesGrid.Bind(GridClientEvent.PageLoaded,"renderChart");

<div style="display:flex; flex-direction:row;gap:20px;align-items:center;border:1pt solid gainsboro;border-radius:5px;background-color:whitesmoke;padding:10px;margin-bottom:10px;">
    <div class="form-check"><b>Report By:</b></div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="salesVolume" id="salesVolume" @(mode != "value" ? "checked" : null)>
        <label class="form-check-label" for="salesVolume">
            Sales Volume
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="salesValue" id="salesValue" @(mode == "value" ? "checked" : null)>
        <label class="form-check-label" for="salesValue">
            Sales Value
        </label>
    </div>
</div>

<div style="display:flex; flex-direction:column">
    <div>
        @(await new DbNetSuiteCore.GridControl(HttpContext).Render(salesGrid))
    </div>
    <div style="width: 1000px;border:1pt solid gainsboro; padding:10px;margin-top:10px;border-radius:5px;">
        <canvas id="salesByCategory"></canvas>
    </div>
</div>