Telerik UI for Windows 8 HTML

Charts are sometimes used to visualize aggregated data values. When you need to provide more details about each data item from the aggregation, a good way to present it, is using a tabular data structure. Using RadChart's and RadGrid's features you can easily achieve such result. The following article will introduce a simple scenario where a chart displays count of olympic medals per athlete and on click of a series data point (column) a grid displays information regarding all medals the athlete has won.

The data used in the following basic example is represented by two json objects in the following formats:

RadChart Data Copy imageCopy
{ "athleteId": "551", "athleteName": "Nikolay Andrianov", "medalsCount": 16 }
RadGrid Data Copy imageCopy
{ "athleteId": "551", "athleteName":"Nikolay Andrianov", "year":"1972", "sport":"Gymnastics Floor Exercises", "medal":"gold" }

The first one is for the chart control and has exactly one entry for each athlete, containing his total medals count. The second one is for the grid control and can have multiple entries for the same athlete, because some athletes have more than one olympic medal in their career.

The next steps depict the process of creating a column chart, which upon click of a column displays a RadGrid with additional information about the selected category.

Mark-up Copy imageCopy
<div id="chart"></div>
<div id="gridcontainer">
    <h2 id="gridtitle"></h2>
    <div id="grid"></div>
</div>
  1. Define a RadGrid. Because the given data is a list with the results of all the athletes, you can initialize the control with the autoBind property set to false. Thereby, you avoid the initial visualization of the possibly large amount of data. You can also hide the grid with CSS styles and show it in the onseriesclick event handler.

    Grid definition Copy imageCopy
    grid = new Telerik.UI.RadGrid(document.getElementById('grid'), {
        dataSource: {
            transport: {
                read: {
                    url: "/js/athletesResults.json",
                    dataType: "json"
                }
            }
        },
        columns: [
            { field: 'sport', width: 500 },
            { field: 'year' },
            { field: 'medal' }
        ],
        autoBind: false
    });
    
  2. Define a RadChart with the medals count set as the series' field and the athlete name set as the category axis' field. In order to trigger the grid filtering, you need to attach a handler to the onseriesclick event.

    Chart definition Copy imageCopy
    chart = new Telerik.UI.RadChart(document.getElementById('chart'), {
        dataSource: {
            transport: {
                read: {
                    url: "/js/athletesMedals.json",
                    dataType: "json"
                }
            }
        },
        height: 400,
        series: [
            {
                type: 'column',
                name: 'Medals Count',
                field: 'medalsCount',
                colorField: 'color'
            }
        ],
        categoryAxis: {
            field: 'athleteName',
            labels: {
                rotation: 45,
                margin: {
                    left: 25
                }
            }
        },
        transitions: false,
        onseriesclick: ChartSeriesClickHandler
    });
    

    Here is what should be done in the handler:

    1. Get the athlete name and the count of his medals through the event's dataItem argument.

    2. Change the selected item's color and return the normal color to the previous selected item. This is done by adding a new property to the JavaScript objects, named "color", and setting it's value to the desired color. This property is used by the RadChart's series, where the colorField option was previously set to color to match the newly added property.

    3. Assign the modified data to RadChart's dataSource and refresh the RadChart to display the selected column with the new color. Note that in order to skip the redrawing of the chart's columns, the transitions property of the RadChart has to be set to false.

    4. Create a filter for the data source. It is an array of filter commands as objects. Each filter command has three properties - field, operator and value. In the current scenario the grid needs to be filtered by the athlete name, where the name should equal the chart event's category argument.

    5. Assign the created filter to the RadGrid's dataSource.filter property.

    6. Because the RadGrid was initialized with the autoBind property set to false, you need to manually bind the RadGrid's dataSource. This can be achieved through calling the read() method of the dataSource. Note that you do not need to explicitly call RadGrid's refresh() method to update the grid. The reason for this is the RadGrid refreshes itself automatically when its dataSource is rebound.

    Handle onseriesclick Copy imageCopy
    function ChartSeriesClickHandler(e) {
        var item = e.dataItem;
        var chartDS = chart.dataSource.data;
    
        // setting the red color of the selected item and removing the red color from the previous selected item
        for (var i = 0; i < chartDS.length; i++) {
            if (chartDS[i].athleteId == item.athleteId) {
                chartDS[i].color = "red";
            } else if (chartDS[i].color != "#1e98e4") {
                chartDS[i].color = "#1e98e4";
            }
        }
    
        chart.dataSource.data = chartDS;
        chart.refresh();
    
        // modifying the h2 title element's innerText
        gridTitle.innerText = item.athleteName + " - " + item.medalsCount + " medals";
    
        // setting up the filter for the RadGrid
        var filter = [];
        filter.push({ field: "athleteName", operator: "eq", value: item.athleteName });
        grid.dataSource.filter = filter;
    
        grid.dataSource.read();
        gridContainer.style.visibility = "visible";
    }
    

Now, if you click on a data point (column) in the RadChart (e.g. Alexey Petrov), the RadGrid below will be populated and displayed. The result looks like this:

chart-populate-grid

This implementation is part of our SDK Examples and is available for download at the following link: Telerik Windows 8 HTML SDK under Chart/PopulateGridOnBarSelect.

See Also