[Solved] Adding a chart to a listView item

[Brendan]

Hello,

I am fairly new to javascript and windows 8 app development so this may be a fairly obvious question, but I am trying to add the chart control into multiple listView items, eventually hoping to display different charts in different listView items dynamically. When ever i have tried this the image of the chart (or gauge) shows up but the animation does not happen. So for a chart it comes up with the chart lines and axis values but the columns do not animate up. Is there a way to have these charts display properly in listview items?

As of right now when i try this i add the chart to the template of the list view just to get it to show but my thought is that i need to use the win control to add it to the list view in javascript and somehow refresh it. Any thoughts on this would be very helpful or even some sample js would be great.

Thanks in advance.

[Tsvetina]

Hello Brendan,

There are a few reasons why the chart series are not drawn, one is that at the time chart needs to draw its series, the page layout is still not ready. If you are in a Navigation template application, you might need to call refresh() for it, and the problem may be resolved. In such scenario, make sure you test your project with the Q1 release (due by the end of the week), since we addressed such issue in it.

If the issue is an implementation one, you can check the example, provided in the attachment. It shows how to create a listview with charts inside, each bound to its own data source, filtered by a value in the current listview item.

The two main steps are to keep the id value in a hidden input in the template and to then use it to filter the charts' DataSource, which by default returns identical data.

Let me know should you have questions about the implementation, or such that are not covered by it.

Regards,
Tsvetina
the Telerik team

[Brendan]

Thanks!

This is a really helpful example. Although I am still a little confused about how I would implement a chart like this with data that I defined in a separate js file, like the data.js included in the demo. I see that it is there but really has nothing to do with the charts displayed. How would i go about using something like what is in the data file and making a chart from that? I think im just missing where the connection needs to be made. 

Thanks for all your help so far!

[Tsvetina]

Hi Brendan,

It is good to hear the example was useful to you. Now I modified it to use local data, defined in a separate js file. The only two things that you need to do in order to use data in such scenario is:

1) Register the file in a <script> tag on the page:

default.html

<!-- ChartSample references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/serviceData.js"></script>

2) Define a namespace in the file, so that you can expose the data to outside functions:

serviceData.js

WinJS.Namespace.define("ChartSample", {
    chartData: chartData,
    itemList: dataList
});

The modified example is attached to this message. Give it a try and let us know about the results.


All the best,
Tsvetina
the Telerik team

[Brendan]

Thanks so much for all your help! This is exactly what i was looking for. 

I have two more pretty short questions for you that have to do with this. 

1.) I took the first example that you gave with the column chart and tried to change the charts from type column to type donut but was unsuccessful. The code im using for the chart is below. When i run it with this chart code the chart is very funny looking. 

<div style="width: 500px; height: 100%" data-win-control="Telerik.UI.RadChart" data-win-options="{
                    series: [
                    {
                        name: 'Price',
                        type: 'donut',
                        field: 'UnitPrice',
                        categoryField: 'ProductName',
                        labels: {
                        visible: true
                            }
                    }],
                    dataSource: {
                        transport: {
                            read: {
                                url: 'http://services.odata.org/Northwind/Northwind.svc/Products',
                                dataType: 'json'
                            }
                        },
                        schema: {
                            data: 'd.results'
                        }
                    },
                    ondatabound: Example.dataBound,
                    width: 500,

                }">
                </div>

Is there a formatting issue here or something that i am not including that i should be? I just want the exact same info as with the column charts just in donut form using the json info.

2.) When it comes to the labels of a donut chart is there a format where i can include the value of the slice, the percentage of the whole, and a small icon instead of the legend? Something like 15 (25%) with the (icon) above or below the numbers, near the slice it pertains to.                                           

[Tsvetina]

Hi Brendan,

The first problem is easy to fix. It is caused by the fact that the UnitPrice value is treated as string which breaks the donut chart functionality. To be sure that values from web services are treated according to their correct data type, you can define a model for them in the data source schema:

schema: {
    data: 'd.results',
    model: {
    fields: {
        UnitPrice: {type:'number'},
        ProductName: {type: 'string'}
    }
}

Another option is to pass a function to schema.data which processes the response (which the function receives as argument) and return only the needed data, cast to its correct type.

For more info on consuming remote data with the DataSource component (chart.dataSource is of type Telerik.Data.DataSource), check this article:
Configuring Remote Binding

As for the second question, you can define a template for the labels and display any string that you can take from the available data item. However, since these labels are part of the SVG rendered by RadChart, you cannot insert images inside them.

Here is one example of customizing the text in the series:

series: [
{
    name: 'Price',
    type: 'donut',
    field: 'UnitPrice',
    categoryField: 'ProductName',
    labels: {
        visible: true,
        template:  Example.labelTemplate
 }
}]

labelTemplate: WinJS.Utilities.markSupportedForProcessing(function (args) {
    return args.value + "$ (" + args.dataItem.UnitsInStock + " left)";
})

Both suggestions are implemented in the attached modification of the previous sample.

All the best,
Tsvetina
the Telerik team