New to Telerik UI for ASP.NET Core? Start a free 30-day trial

ASP.NET Core Chart Wizard Overview

The Telerik UI Chart Wizard TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Chart Wizard widget.

The Chart Wizard lets you configure the visual representation in various charts by selecting different data from an external source or a particular Grid data.

The component has a user-friendly interface that allows you to specify the chart type and its elements, such as series, axes, chart area, title, legend, and more. When you configure the desired chart, you can export it to PDF, SVG, or PNG files.

Initializing the Chart Wizard

The following example demonstrates how to define the Chart Wizard.

Razor
    @model List<Product>

    @(Html.Kendo().ChartWizard<Product>()
        .Name("chartwizard")
        .BindTo(Model)
        .DataColumns(columns =>
        {
            columns.Add().Field(f => f.ProductName).Title("Product Name");
            columns.Add().Field(f => f.Quantity);
        })
    )
Razor
    @addTagHelper *, Kendo.Mvcl
    @model List<Product>

    <kendo-chartwizard name="chartwizard">
        <datasource type="DataSourceTagHelperType.Ajax" server-operation="false" data="@Model">
        </datasource>
        <data-columns>
            <data-column field="ProductName" title="Product Name" />
            <data-column field="Quantity" />
        </data-columns>
    </kendo-chartwizard>
C#
    public IActionResult Index()
    {
        var chartData = new List<Product>()
        {
            new Product { ProductID = 1, ProductName = "Calzone",  Quantity = 1 },
            new Product { ProductID = 2, ProductName = "Margarita", Quantity = 2 },
            new Product { ProductID = 3, ProductName = "Pollo Formaggio", Quantity = 5 }
        };
        return View(chartData);
    }
C#
    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public int Quantity { get; set; }
    }

Basic Configuration

The DataSource component offers the most versatile data binding approach. To connect the Chart Wizard to a data set retrieved from a remote endpoint, configure the DataSource and specify the Model properties in the DataColumns configuration.

The following example demonstrates the basic configuration of the Chart Wizard bound to remote data.

Razor
    @(Html.Kendo().Button()
        .Name("open-wizard")
        .Icon("chart-column-clustered")
        .Content("Open Chart Wizard")
        .Events(ev=>ev.Click("onClick"))
    )

    @(Html.Kendo().ChartWizard<Product>()
        .Name("chartwizard")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Read", "ChartWizard"))
        )
        .DataColumns(columns =>
        {
            columns.Add().Field(f => f.ProductName).Title("Product Name");
            columns.Add().Field(f => f.Quantity);
        })
        .Window(window => window.Visible(false))
    )

    <script>
        function onClick() {
            $("#chartwizard").data("kendoChartWizard").open();
        }
    <script>
Razor
    @addTagHelper *, Kendo.Mvc

    <kendo-button name="open-wizard" on-click="onClick" icon="chart-column-clustered">
        Open Chart Wizard
    </kendo-button>

    <kendo-chartwizard name="chartwizard">
        <datasource type="DataSourceTagHelperType.Ajax">
            <schema data="Data" total="Total" errors="Errors">
                <model>
                    <fields>
                        <field name="ProductName" type="string"></field>
                        <field name="Quantity" type="number"></field>
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="@Url.Action("Read", "ChartWizard")"/>
            </transport>
        </datasource>
        <data-columns>
            <data-column field="ProductName" title="Product Name"/>
            <data-column field="Quantity" />
        </data-columns>
        <window visible="false"></window>
    </kendo-chartwizard>

    <script>
        function onClick() {
            $("#chartwizard").data("kendoChartWizard").open();
        }
    <script>
C#
    public JsonResult Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(ProductsData().ToDataSourceResult(request));
    }

    private static List<Product> ProductsData()
    {
        return new List<Product>()
        {
            new Product { ProductID = 216321, ProductName = "Calzone", Quantity = 1 },
            new Product { ProductID = 546897, ProductName = "Margarita", Quantity = 2 },
            new Product { ProductID = 456231, ProductName = "Pollo Formaggio", Quantity = 1 }
        };
    }
C#
    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public int Quantity { get; set; }
    }

Functionality and Features

Data Binding—The Chart Wizard supports local and remote data binding.
Export Options—You can export the generated chart in different file formats.
Window Configuration—Define the desired settings of the Window that holds the Chart Wizard.
Events—The component emits a variety of events that allow you to implement custom functionality.
Accessibility—The Chart Wizard is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

ASP.NET Core Chart Wizard Overview

Initializing the Chart Wizard

Basic Configuration

Functionality and Features

Next Steps

See Also