[Solved] Datasource connection of Chart Control directly through parse of WinJS.xhr

[Varun]

Hi,

I using WinJS.xhr to load json content from a url, and then I receive json content in xhr.response. I need to directly display the data fetched in xhr.response into chart. Please follow below for more details.

Command

WinJS.xhr({
          url: "url from where to fetch content"
        }).done(function (xhr) {

/* I will have my content fetched in xhr.response and it will be in string format. Example of how it will look is attached(file name Json File Example)
           
After fetching json file into string format, I need to plugin in directly in my telerik chart control.

Uptill now, I was fetching data for my chart control from json file at my local machine. But due to change in implementation, I need to create chart directly from json content fetched through xhr.response. 
I have attached image of how I was pulling content from json file previously for charts, Can some one tell me what changes should I make to get chart control work with xhr.response.

               
        });


Please let me know if more details are required to understand my problem.

[Martin Yankov]

Hi Varun,

 
Because the xhr() method makes an asynchronous call, you need to bind the data to the RadChart inside the done() method of the promise. Here are the steps you need to bind the xhr() result to a RadChart:

1. Because the xhr() result is a string, you need to parse it to a JSON object and get the data container you need.
2. Initialize a Telerik DataSource with the parsed JSON object.
3. Assign the Telerik DataSource to the RadChart's dataSource property.
4. Set the series and categoryAxis preferences, if they are not already set, and use the refresh() method to bind the data to the control.

Below is a code sample that should work for you when you replace the xhr() url string with your own:

WinJS.xhr({
    url: "InserYourURLHere"
}).done(function (result) {
    // Parsing the string result of the xhr to json and retrieving the data container, which is "value"
    var json = JSON.parse(result.responseText).Application;

    // Passing the parsed json to a Telerik DataSource
    var chartDS = new Telerik.Data.DataSource({
        data: json
    });

    // Setting the Chart up
    var chart = document.getElementById("chart").winControl;
    chart.dataSource = chartDS;
    var series = new Telerik.UI.Chart.ColumnSeries();
    series.field = "UnitsInStock";
    chart.series.push(series);
    chart.categoryAxis.field = "ProductID";
    chart.refresh();
});

 You can also find a working example project  attached for reference. I have used the Northwind web service for the example, but I hope it will still be helpful.

Also it is worth mentioning that this solution is hard to maintain and does not support some features. For example, there is no automatic loading indicator while the remote data is fetched. The Telerik DataSource is also capable of retrieving and binding remote service data to RadControls. Here is a code sample for doing the same thing without the xhr() method:

var chartDS = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "InsertYourURLhere",
            dataType: "json"
        }
    },
    schema: {
        data: "Application"
    }
});

var chart = document.getElementById("chart").winControl;
chart.dataSource = chartDS;
chart.refresh();

For information regarding how to configure the DataSource remote binding, follow this link: DataSource Remote Binding.

I hope this information is helpful. Let me know if you need any further assistance.

Regards,
Martin Yankov
Telerik