Getting Started with the Chart Wizard

This tutorial explains how to set up the Telerik UI for ASP.NET MVC Chart Wizard and goes through the steps in the configuration of the component.

You will initialize a Chart Wizard component and bind it to a remote service. Then, you will configure different export and window options for the component.

After completing this guide, you will achieve the following results:

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

• To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.

• To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

• To use the Telerik UI for ASP.NET MVC HtmlHelpers:

  cshtml

  @using Kendo.Mvc.UI

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

Razor

    @using Kendo.Mvc.UI

    <h4>Generate charts using the Chart Wizard</h4>
    <div>

    </div>

2. Initialize the Chart Wizard

Use the Chart Wizard HtmlHelper to configure the component.

• The Name() configuration method is mandatory as its value is used for the id and the name attributes of the Chart Wizard element.
• The DataColumns() option specifies the Model properties that will be available in the chart configurator to set up the chart series and axes.
• The DataSource() configuration connects the component to a dataset retrieved from a remote endpoint.

Razor

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

3. Bind the Chart Wizard Component to Its Data

Create a Product Model and define an Action method that returns the data collection.

C#

    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public int Quantity { get; set; }
    }

HomeController.cs

    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 }
        };
    }

4. Configure the Export Options

The Chart Wizard component allows you to export the generated chart in PDF, JPG, or PNG formats.

In this step, configure the paper size of the PDF file and the dimensions of the exported images.

Razor

    @(Html.Kendo().ChartWizard<Product>()
        .Name("chartwizard")
        .ExportOptions(export =>
        {
            export.Pdf(pdf => pdf.PaperSize("A4"));
            export.Image(image => image.Width(1900).Height(1200));
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Read", "Home"))
        )
        .DataColumns(columns =>
        {
            columns.Add().Field(f => f.ProductName).Title("Product Name");
            columns.Add().Field(f => f.Quantity);
        })
    )

5. Configure the Window Options

You can use the configuration options of the Window component to customize the appearance of the window that holds the Chart Wizard.

Razor

    @(Html.Kendo().ChartWizard<Product>()
        .Name("chartwizard")
        .ExportOptions(export =>
        {
            export.Pdf(pdf => pdf.PaperSize("A4"));
            export.Image(image => image.Width(1900).Height(1200));
        })
        .Window(window =>
        {
            window.Modal(false);
            window.Actions(actions => actions
                .Minimize()
                .Maximize()
                .Close()
            );
            window.Resizable(resizable => resizable.Enabled(true));
            window.Height(550);
            window.Width(700);
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Read", "Home"))
        )
        .DataColumns(columns =>
        {
            columns.Add().Field(f => f.ProductName).Title("Product Name");
            columns.Add().Field(f => f.Quantity);
        })
    )

6. (Optional) Reference Existing Chart Wizard Instances

Referencing existing component instances allows you to build on top of their configuration. To reference an existing Chart Wizard instance, use the jQuery.data() method.

1. Use the Name() option of the component to establish a reference.

   Html

       <script>
           var chartWizardReference = $("#chartwizard").data("kendoChartWizard"); // chartWizardReference is a reference to the existing instance of the helper.
       </script>

2. Use the Chart Wizard client-side API to control the behavior of the component. In this example, you will see how to open the Chart Wizard (for example, when a button is clicked).

   Razor

       @(Html.Kendo().Button()
           .Name("btn")
           .Content("Open Chart Wizard")
           .Events(ev => ev.Click("onBtnClick")))
       
       <script>
           function onBtnClick() {
               var chartWizardReference = $("#chartwizard").data("kendoChartWizard");
               chartWizardReference.open();
           }
       </script>

For more information on referencing specific helper instances, see the Methods and Events article.

Next Steps

• Configuring the Chart Wizard Export Options
• Customizing the Window of the Chart Wizard
• Handling JavaScript Events of the User Interactions

See Also

• Using the API of the Chart Wizard for ASP.NET MVC (Demo)
• Client-Side API of the Chart Wizard
• Server-Side API of the Chart Wizard