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
Datafield 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>