Telerik UI for Windows 8 HTML

RadSparkline is a tailored version of the RadChart implementation that allows you to display simple, word-sized graphics that can be embedded in different places—text, tables, headlines, etc. This help article will help you get started with using the RadSparkline control.

This topic contains the following sections.


Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating a RadSparkline

To create a RadSparkline in the HTML markup, add an empty span element with a data-win-control attribute with value of Telerik.UI.RadSparkline.

Creating a RadSparkline in HTML Copy imageCopy
<span id="sparkline1" data-win-control="Telerik.UI.RadSparkline"></span>

You can achieve the same result in JavaScript—just define the host span element on the page and then instantiate a new RadSparkline by passing a reference to the span DOM object in the control constructor:

Creating a RadSparkline in JavaScript Copy imageCopy
var sparkline = new Telerik.UI.RadSparkline(document.getElementById("sparkline1"));

Creating a RadSparkline without setting any options will not result in a usable control. RadSparkline needs at least a basic set of data that it has to visualize. You can find a basic example of how you can set property values below.

Setting RadSparkline Options

Same as with the rest of the Windows Runtime JavaScript controls, RadSparkline's properties can be set through the data-win-options attribute of the host element:

Setting RadSparkline Options in HTML Copy imageCopy
<span class="control" data-win-control="Telerik.UI.RadSparkline" data-win-options="{
    data: [22, 13, 37, 42, 12],
    type: 'column',
    height: 50,
    width: 100

In JavaScript, you can pass an options object as a second argument to the RadSparkline constructor:

Setting RadSparkline Options in JavaScript Copy imageCopy
var sparkline = new Telerik.UI.RadSparkline(document.getElementById("mySparkline"), {
    data: [22, 13, 37, 42, 12],
    type: "column",
    height: 50,
    width: 100

Here is an image of the produced RadSparkline control:


Referencing the RadSparkline Control Instance

As described in this MSDN article about adding controls to a Windows Store app, any control in a Windows Runtime JavaScript application requires a call to WinJS.UI.processAll() for proper initialization. The same holds true for any of the Telerik UI controls. Once the WinJS framework has initialized all the controls on the page, the RadSparkline control instance associated with a host HTML element can be retrieved using the winControl expando property of the host HTML element.

HTML Copy imageCopy
<!--Define your RadSparkline control in the HTML-->
                            <span id="mySparkline" data-win-control="Telerik.UI.RadSparkline">
JavaScript Copy imageCopy
WinJS.Utilities.ready(function () {
    WinJS.UI.processAll().then(function () {
        //wait for the processAll() method to finish, then find the
        //sparkline control from the host element's winControl property
        var sparklineElement = document.getElementById("mySparkline");
        var mySparklineControl = sparklineElement.winControl;
        console.log(mySparklineControl instanceof Telerik.UI.RadSparkline); //true

Modifying RadSparkline Properties

Once RadSparkline is loaded and the control is referenced in JavaScript, it exposes an extensive set of properties, methods and events.

JavaScript Copy imageCopy
args.setPromise(WinJS.UI.processAll().then(function () {
    var sparkline = document.getElementById("mySparkline").winControl;
    sparkline.tooltip.font = "9pt Segoe UI";

Attaching Events

You can either declare an event handler in the options object that you pass to the control during initialization, or you can use the addEventListener method to attach a function for execution upon a certain event. Below you can see samples of both approaches:

Assigning an Event Handler Function During Initialization Copy imageCopy
var sparkline = new Telerik.UI.RadSparkline(document.getElementById("mySparkline"), {
    ondatabound: databoundHandlerFnName
// OR
var sparkline = new Telerik.UI.RadSparkline(document.getElementById("mySparkline"), {
    ondatabound: function(e) {//...}

If you attach the event handler using the on[eventname] property in HTML mark-up, you would need to mark the handler function as safe in your JavaScript code, using the WinJS.Utilities.markSupportedForProcessing function.

Using the addEventListener Method Copy imageCopy
sparkline.addEventListener("databound", databoundHandlerFnName);

See Also