# ChartDataProvider

Abstract

This topic describes how to use ChartDataProvider component in SPEAK.

You use the ChartDataProvider component to provide data for charting controls.

### Note

The ChartDataProvider is only for use with the legacy charts

The ChartDataProvider component provides data by making a request to an MVC Controller. You specify the URL of the MVC Controller on the server, and you can specify query parameters. You can also set filters on the date range and time resolution. When you set a filter on time resolution, the date is grouped according to the filter (for example, day, week, or month).

The ChartDataProvider component does not retrieve data from the MVC Controller immediately. You have to tell the ChartDataProvider component to call the MVC Controller.

You use the getData function to ask the MVC Controller for data, for example, in PageCode:

var requestOptions =

{

parameters: "",

onSuccess: this.getDataCallback,

url: "/api/sitecore/speakcharting/chart/Data"

;

this.ChartDataProvider.viewModel.getData(requestOptions);

The url field can be set as a property as well (DataUrl). If you set it both in code and as a property, the ChartDataProvider component uses the value that you set in code. The parameters field is optional, and you can leave it empty.

You can specify a function that the ChartDataProvider component calls when it receives data successfully using onSuccess.

You have to implement the MVC Controller yourself. The ChartDataProvider component expects the MVC Controller to return data as a JSON object. The following properties are mandatory in this JSON object:

"data":{

"dataSet":{

“data”:[ …

This example shows a valid JSON object:

{

"totalRecordCount":0,

"messages":[

{

"id":100,

"messageType":"info",

"text":"Contact most likely to buy during next visit."

}

],

"pageNumber":1,

"pageSize":5,

"sorting":[

{

"direction":"asc",

"field":"channel"

},

{

"direction":"asc",

"field":"device"

}

],

"filter":[

],

"data":{

"dataSet":{

"visits":[

{

"Channel":10,

"IsCampaign":true,

"Device":"",

"Location":"Copenhagen, Hovedstaden, Denmark",

"Value":"1024",

"PageViews":18,

"VisitDuration":"01:07:00",

"Recency":"2.00:00:00",

"StartDateTime":"2013-11-08T22:30:29.2274325Z",

"UserAgent":"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)"

}

]

},

"localization":{

"fields":[

{

"field":"channel",

"translations":{

"40":"RSS",

"0":"Unknown",

"15":"Search Engine - Organic Branded",

"20":"Direct",

"50":"Email",

"10":"Search Engine - Organic",

"90":"Paid",

"36":"Referred - Analyst",

"31":"Referred - Blog",

"34":"Referred - Community",

"33":"Referred - Conversations",

"32":"Referred - News",

"30":"Referred - Other",

"35":"Referred - Wiki"

}

}

]

}

}

}

Name

Description

Default

Filters

DateFrom

Specify the first date from which the component retrieves data.

DateTo

Specify the last date that the component retrieves data.

Resolution

Specify how the component groups data based on time resolution. You can specify Day, Week, Month, Quarter, or Year.

ResolutionRange

Specify the number of resolution units that the component uses to calculate DateFrom and DateTo.

State

HasData

After getting a response from the service, the component sets this read-only property to True if it there is data.

HasNoData

After getting a response from the service, the component sets this read-only property to True if it does not have data.

IsBusy

The component sets this read-only property to True when it is waiting for a response from the service.

You can create a configuration item for a ChartDataProvider component by creating an item based on the ChartDataProvider Parameters template.

The configuration item has these specific fields:

• DateFrom

• DateTo

• Resolution

• ResolutionRange

It inherits these fields:

• IsVisible

• AccessKey

• Tooltip

• Behaviors

• Id

• IsBusy

• QueryParameters

• Data

• Messages

• HasNoData

• DataURL

• HasData