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

Data Binding

The Sparkline charts can visualize series that are bound to both local and remote data.

Binding to Local Data

Binding to local data can be done by using either of the following approaches:

  • Setting the root-level Data field to an array with values, or
  • Configuring a series and passing the data as an array.
    @(Html.Kendo().Sparkline()
            .Name("temp-log")
            .Type(SparklineType.Column)
            .Series(d=>d.Column(new int[] { 10 ,15, 8 ,2,30}))
    )
    @{
        var series_data = new int[] { 10 ,15, 8 ,2,30};
    }
    <kendo-sparkline name="temp-log"
                     type="SparklineType.Column">
                    <series>
                        <series-item type="column"
                            data="@series_data">
                        </series-item>
                    </series>
    </kendo-sparkline>
    @(Html.Kendo().Sparkline()
            .Name("temp-log")
            .Type(SparklineType.Column)
            .Data(ViewBag.TemperatureData)
    )
    <kendo-sparkline name="temp-log"
                     data="@ViewBag.TemperatureData"
                     type="SparklineType.Column">
    </kendo-sparkline>

Binding to Remote Data

The following example demonstrates how to bind the Sparkline Chart to remote data. For more information, refer to the article on binding Telerik UI Charts to a data source.

    @(Html.Kendo().Sparkline()
        .Name("sparkline-tmax")
        .DataSource(ds => ds.Read(read => read.Url(Url.Action("_Weather", "Sparklines"))))
        .Series(series => series
            .Column("TMax").Color("#ff0000").NegativeColor("#0099ff")
    )
     <kendo-sparkline name="sparkline-tmax">
        <datasource type="DataSourceTagHelperType.Ajax">
            <transport>
                <read url="@Url.Action("_Weather", "Sparklines")"/>
            </transport>
        </datasource>
        <series>
            <series-item type="column"
                name="TMax" color="#ff0000"
                negative-color="#0099ff">
            </series-item>
        </series>
    </kendo-sparkline>

See Also

In this article