Simple chart
 Next   Menu    Previous 

The IncludeJsonData property makes a raw JSON data version of the grid data available on the client for 3rd party controls such as charting libraries. In this sample the data is used to render a chart using the ChartJS library. The sample uses the PageLoaded event to run some client-side JavaScript which in turn uses the client-side API columnSeriesData method to get data for the chart labels and data-points.
Loading...
Razor code

GridModel categorySalesChartGrid = new GridModel(DataSourceType.SQLite, "Northwind", "[Sales By Category]");
categorySalesChartGrid.Columns = new List<GridColumn>
{
    new GridColumn("CategoryName", "Category"),
    new GridColumn("ProductSales", "Total Sales") {Format = "c", Aggregate = AggregateType.Sum, DataType = typeof(Decimal)} ,
};
categorySalesChartGrid.IncludeJsonData = true;
categorySalesChartGrid.ToolbarPosition = ToolbarPosition.Hidden;
categorySalesChartGrid.Bind(GridClientEvent.PageLoaded, "renderChart");

<div style="display:flex; flex-direction:row">
    <div>
        @(await new DbNetSuiteCore.Control(HttpContext).Render(categorySalesChartGrid))
    </div>
    <div style="width: 600px;">
        <canvas id="salesByCategory"></canvas>
    </div>
</div>