| title | page_title | description | slug | position |
|---|---|---|---|---|
Getting Started |
Getting Started |
Make your first steps with the Telerik UI for {{ site.framework }} Chart Wizard component by following a complete step-by-step tutorial. |
chartwizard_getting_started |
1 |
This tutorial explains how to set up the Telerik UI for {{ site.framework }} 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. {% if site.core %}Finally, you can run the sample code in Telerik REPL and continue exploring the components.{% endif %}
After completing this guide, you will achieve the following results:
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.
@using Kendo.Mvc.UI
<h4>Generate charts using the Chart Wizard</h4>
<div>
</div>
{% if site.core %}
@addTagHelper *, Kendo.Mvc
<h4>Generate charts using the Chart Wizard</h4>
<div>
</div>
{% endif %}
Use the Chart Wizard HtmlHelper {% if site.core %}or TagHelper{% endif %} to configure the component.
- The
Name()configuration method is mandatory as its value is used for theidand thenameattributes 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.
@(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);
})
)
{% if site.core %}
@addTagHelper *, Kendo.Mvcl
<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", "Home")"/>
</transport>
</datasource>
<data-columns>
<data-column field="ProductName" title="Product Name"/>
<data-column field="Quantity" />
</data-columns>
</kendo-chartwizard>
{% endif %}
Create a Product Model and define an Action method that returns the data collection.
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public int Quantity { get; set; }
}
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 }
};
}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.
@(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);
})
)
{% if site.core %}
@addTagHelper *, Kendo.Mvcl
<kendo-chartwizard name="chartwizard">
<export-options>
<pdf paper-size="A4"/>
<image width="1900" height="1200"/>
</export-options>
<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", "Home")"/>
</transport>
</datasource>
<data-columns>
<data-column field="ProductName" title="Product Name"/>
<data-column field="Quantity" />
</data-columns>
</kendo-chartwizard>
{% endif %}
You can use the configuration options of the [Window]({% slug htmlhelpers_window_aspnetcore%}) component to customize the appearance of the window that holds the Chart Wizard.
@(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);
})
)
{% if site.core %}
@addTagHelper *, Kendo.Mvcl
@{
string[] windowActions = new string[] { "Minimize", "Maximize", "Close" };
}
<kendo-chartwizard name="chartwizard">
<export-options>
<pdf paper-size="A4"/>
<image width="1900" height="1200"/>
</export-options>
<window modal="false" width="700" height="550" actions="windowActions"></window>
<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", "Home")"/>
</transport>
</datasource>
<data-columns>
<data-column field="ProductName" title="Product Name"/>
<data-column field="Quantity" />
</data-columns>
</kendo-chartwizard>
{% endif %}
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.
-
Use the
Name()option of the component to establish a reference.<script> var chartWizardReference = $("#chartwizard").data("kendoChartWizard"); // chartWizardReference is a reference to the existing instance of the helper. </script>
-
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).
@(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>{% if site.core %}
@addTagHelper *, Kendo.Mvc <kendo-button name="btn" on-click="onBtnClick"> Open Chart Wizard </kendo-button> <script> function onBtnClick() { var chartWizardReference = $("#chartwizard").data("kendoChartWizard"); chartWizardReference.open(); } </script>{% endif %}
For more information on referencing specific helper instances, see the [Methods and Events]({% slug methodevents_core %}) article.
- [Configuring the Chart Wizard Export Options]({% slug htmlhelpers_export_chartwizard %})
- [Customizing the Window of the Chart Wizard]({% slug htmlhelpers_window_chartwizard %})
- [Handling JavaScript Events of the User Interactions]({% slug htmlhelpers_events_chartwizard %})
- [Using the API of the Chart Wizard for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chartwizard/api)
- Client-Side API of the Chart Wizard
- Server-Side API of the Chart Wizard {% if site.core %}
- Server-Side API of the Chart Wizard TagHelper {% endif %}