Client-side charting controls such as Google charts can be easily integrated with grid data using the GoogleChartOptions property
Sales By Category
Razor
DbNetGridCore productSalesSummaryGrid = new DbNetGridCore("northwind", "Invoices join Products on Products.ProductID = Invoices.ProductId", "salesGrid");
productSalesSummaryGrid.Columns = new List() { "CategoryID", "(Invoices.UnitPrice * Invoices.Quantity) as TotalValue" };
productSalesSummaryGrid.Labels = new List() { "Category", "Total Value" };
productSalesSummaryGrid.GroupBy = true;
productSalesSummaryGrid.ToolbarPosition = ToolbarPosition.Hidden;
productSalesSummaryGrid.SetColumnProperty(new String[] { "TotalValue" }, ColumnPropertyType.Format, "c");
productSalesSummaryGrid.SetColumnProperty(new String[] { "TotalValue" }, ColumnPropertyType.DataType, nameof(Decimal));
productSalesSummaryGrid.SetColumnProperty("TotalValue", ColumnPropertyType.Aggregate, AggregateType.Sum);
productSalesSummaryGrid.SetColumnProperty("CategoryID", ColumnPropertyType.Lookup, new Lookup("Categories", "CategoryId", "CategoryName"));
productSalesSummaryGrid.GoogleChartOptions = new GoogleChartOptions() { Type = GoogleChartType.PieChart, PanelId = "piechart", FunctionName = "chartOptions" };
@productSalesSummaryGrid.Render()