Skip to content

Latest commit

 

History

History
187 lines (138 loc) · 5.58 KB

getting-started.md

File metadata and controls

187 lines (138 loc) · 5.58 KB
title page_title description slug position
Getting Started
Getting Started
Make your first steps with the Telerik UI for {{ site.framework }} Sparkline component by following a complete step-by-step tutorial.
aspnetcore_sparkline_getting_started
1

Getting Started with the Sparkline

This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} Sparkline and highlights the major steps in the configuration of the component.

You will initialize a Sparkline and learn how to change its display type. {% if site.core %}Then, you can run the sample code in Telerik REPL and continue exploring the component.{% endif %}

Sample Telerik UI for {{ site.framework }} Sparkline

@template

1. Prepare the CSHTML File

@template

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

@using Kendo.Mvc.UI

<h4>Sparkline in column mode</h4>

<p>

</p>

{% if site.core %}

@addTagHelper *, Kendo.Mvc

<h4>Sparkline in column mode</h4>

<p>

</p>

{% endif %}

2. Initialize the Sparkline

Use the Sparkline HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:

  • The Name() configuration method is mandatory as its value is used for the id attribute of the Sparkline element.
  • The Data() option allows you to pass the content.
  • The Type() configuration allows changing the display mode.
@using Kendo.Mvc.UI

@{
    var pressureData = new double[] {
                936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                1004, 988, 990, 988, 1012, 995, 946, 922, 991, 984,
                974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                952, 940, 937, 980, 966, 965, 928, 916, 910, 980
    };
}

<h4>Sparkline in column mode</h4>

<p>
    @(Html.Kendo().Sparkline()
        .Name("sparkline")
        .Data(pressureData)
    )
</p>

{% if site.core %}

@addTagHelper *, Kendo.Mvc

@{
    var pressureData = new double[] {
                936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                1004, 988, 990, 988, 1012, 995, 946, 922, 991, 984,
                974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                952, 940, 937, 980, 966, 965, 928, 916, 910, 980
    };
}

<h4>Sparkline in column mode</h4>

<p>
    <kendo-sparkline name="sparkline" data="pressureData">
    </kendo-sparkline>
</p>

{% endif %}

3. Change the display mode to Column

The next step is to configure the Sparkline to change its mode.

@using Kendo.Mvc.UI

@{
    var pressureData = new double[] {
                936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                1004, 988, 990, 988, 1012, 995, 946, 922, 991, 984,
                974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                952, 940, 937, 980, 966, 965, 928, 916, 910, 980
    };
}

<h4>Sparkline in column mode</h4>

<p>
    @(Html.Kendo().Sparkline()
        .Name("sparkline")
        .Data(pressureData)
        .Type(SparklineType.Column)
    )
</p>

{% if site.core %}

@addTagHelper *, Kendo.Mvc

@{
    var pressureData = new double[] {
                936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                1004, 988, 990, 988, 1012, 995, 946, 922, 991, 984,
                974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                952, 940, 937, 980, 966, 965, 928, 916, 910, 980
    };
}

<h4>Sparkline in column mode</h4>

<p>
    <kendo-sparkline name="sparkline" data="pressureData"
     type="SparklineType.Column">
    </kendo-sparkline>
</p>

{% endif %}

4. (Optional) Reference Existing Sparkline Instances

You can reference the Sparkline instances that you have created and build on top of their existing configuration:

  1. Use the id attribute of the component instance to establish a reference.

    <script>
    var sparklineReference = $("#sparkline").data("kendoSparkline"); // sparklineReference is a reference to the existing sparkline instance of the helper.
</script>

  2. Use the Sparkline client-side API to control the behavior of the widget. In this example, you will use the refresh method to reset the sparkline content.

    <script>
    var sparklineReference = $("#sparkline").data("kendoSparkline"); // sparklineReference is a reference to the existing timeSparkline instance of the helper.
    var view = sparklineReference.refresh(); 
</script>

{% if site.core %}

Explore this Tutorial in REPL

You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:

{% endif %}

Next Steps

  • [Configure the Axes]({% slug axesconfig_sparklines_aspnetcore %})

See Also