Simple chart

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.

Razor code


        GridModel categorySalesChartGrid = new GridModel(DataSourceType.SQLite, "Northwind", "[Sales By Category]");
        categorySalesChartGrid.Columns = new List
        {
        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>