Telerik UI for Windows 8 HTML

The RadChart control for Windows 8 is a HTML/JavaScript component that uses SVG to render high-quality data visualizations. It provides a rich set of APIs for visualizing data in different types of data series. This article describes how to get started with using RadChart.

This topic contains the following sections.

Prerequisites

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 Chart

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

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadChart">
</div>

Alternatively, you can create RadChart programmatically through JavaScript by first defining a div element with an id and then passing it as a first argument to the Telerik.UI.RadChart constructor:

HTML Copy imageCopy
<div id="myChart">
</div>
JavaScript Copy imageCopy
var chart = new Telerik.UI.RadChart(document.getElementById("myChart"));

Defining RadChart without any properties set will not render a usable control. Without data RadChart cannot serve its purpose to show it. Therefore, you need to at least specify a dataSource. The rest of RadChart's properties will be set to their default values. You can see a basic example of defining a usable RadChart in the next step.

Setting Chart Options

Just like any other Windows Runtime JavaScript control, RadChart options can be defined through the data-win-options attribute:

RadChart Markup Definition Copy imageCopy
<div id="markupChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
            dataSource: {
                data: [
                { year: '2000', sales: 200 },
                { year: '2001', sales: 450 },
                { year: '2003', sales: 125 }]
            },
            series: [
                { type: 'line', field: 'sales', name: 'Sales' }
            ],
            categoryAxis: {
                field: 'year'
            },
            theme: 'light'
        }">
</div>

Alternatively, you can programmatically pass an options object as a second argument to the control constructor:

RadChart Markup Copy imageCopy
<div id="codeChart"></div>
Initializing Programmatically Copy imageCopy
var chart = new Telerik.UI.RadChart(document.getElementById("codeChart"), {
    dataSource: {
        data: [
        { year: '2000', sales: 200 },
        { year: '2001', sales: 450 },
        { year: '2003', sales: 125 }]
    },
    series: [
        { type: 'line', field: 'sales', name: 'Sales' }
    ],
    categoryAxis: {
        field: 'year'
    },
    theme: "light"
});

For detailed information regarding RadChart's properties refer to the related articles at the bottom of the article.

Both the examples produce the same output. You can see the chart below.

chart-gettingstarted

Referencing the RadChart 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 RadChart 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 chart control in the HTML-->
<div id="myChart" data-win-control="Telerik.UI.RadChart">
</div>
JavaScript Copy imageCopy
WinJS.Utilities.ready(function () {
    WinJS.UI.processAll().then(function () {
        //wait for the processAll() method to finish, then find the
        //chart control from the host element's winControl property
        var chartElement = document.getElementById("myChart");
        var myChartControl = chartElement.winControl;
        console.log(myChartControl instanceof Telerik.UI.RadChart); //true
    });
});

Modifying Chart Properties

All RadChart properties are configurable either through the data-win-options attribute, or programmatically through the JavaScript control instance. For example, you can enable chart tooltips with the following definition in the mark-up:

HTML Copy imageCopy
<div id="myChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    tooltip: {
        visible: true
    }
    ...
}">
</div>

Once RadChart is loaded and the control is referenced in JavaScript, the control exposes an extensive set of properties methods and events. After a chart property is modified, for the changes to take effect, the refresh() method of the control needs to be called. This re-initializes and rebinds the chart with the modified properties.

JavaScript Copy imageCopy
var chart = document.getElementById("myChart").winControl; //myChart is the host HTML element
chart.tooltip.visible = true;   //modify properties
chart.refresh();                //call refresh() to update

To see all available configuration options, look at the members, constructors, methods, properties and events available for the RadChart class.

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 chart = new Telerik.UI.RadChart(document.getElementById("myChart"), {
    onserieshover: changeHandlerFnName });
// OR
var chart = new Telerik.UI.RadChart(document.getElementById("myChart"), {
    onserieshover: function(e) {//...}
});
Note

If you attach the event handler as shown above, in HTML mark-up, you need to mark the handler function as safe in your code, using the WinJS.Utilities.markSupportedForProcessing function.

Using the addEventListener Method Copy imageCopy
chart.addEventListener("serieshover", serieshoverHandlerFnName);

See Also