Telerik UI for Windows 8 HTML

Column and Bar charts are convenient mechanisms for displaying sales data to the user. The main difference between the two is the orientation – Column charts have a vertical alignment whereas Bar charts display the data horizontally. The Telerik RadChart for Windows 8 HTML is an extremely flexible control, allowing you to create different types of charts based on the configuration settings, either set in markup or through JavaScript.

In this article, you will learn how to display sales data for certain periods of time using Column and Bar series.

Example 1: Using Already Aggregated Data

When your data is already calculated, you can directly use them as categories and the corresponding values as series values. Here is what you can do:

  1. For the series object, set the values, name, and type:

    1. Sales Values – 16.7, 20, 15.7, 26.6, 23.5

    2. Name – Performance Summary

    3. Type – column (or bar)

  2. For the control itself, set the categories, legend location, and title:

    1. Categories – 2005, 2006, 2007, 2008, 2009

    2. Legend – Performance Summary

    3. Title – Sales by Year

Show Sales per Year Copy imageCopy
<div id="chart1" data-win-control="Telerik.UI.RadChart"
    data-win-options="{
    series: [
    {
        data: [16.7, 20, 15.7, 26.6, 23.5],
        name: 'Performance Summary',
        type: 'column'
    }],
    categoryAxis: {
        categories: [2005, 2006, 2007, 2008, 2009],
    },
    legend: { position: 'top' },
                title: { text: 'Sales by Year' }
}">
</div>

The result will look like this:

Column Chart

Simple sales column chart

Bar Chart

Simple sales bar chart

Example 2: Using the Aggregate Feature of the Series

Even if the data you have is not summarized, RadChart can display aggregated values per year (or other period of time, controlled by the baseUnit property of the category axis). The following example, displays aggregated sales for 2008 and 2009.

Data for aggregation Copy imageCopy
salesData: [
    { Date: "2009/11/30", Value: 8.7 },
    { Date: "2009/8/30", Value: 5.5 },
    { Date: "2009/5/30", Value: 4.5 },
    { Date: "2009/2/30", Value: 4.8 },
    { Date: "2008/11/30", Value: 10 },
    { Date: "2008/8/30", Value: 6.3 },
    { Date: "2008/5/30", Value: 5 },
    { Date: "2008/2/30", Value: 5.3 }
]

The steps to follow are:

  1. For the series object, set the values, name, type and aggregate:

    1. Field – 'Value'

    2. Name – Performance Summary

    3. Type – column (or bar)

    4. Aggregate - min; you could use another aggregate function, if needed (e.g. 'min', 'avg' etc.)

  2. For the control itself, set the categories (with a specified base unit and type), legend location, and title:

    1. Categories – taken from the Date field, using years as base unit.

    2. Legend – Performance Summary

    3. Title – Sales by Year

Show Sales per Year with Aggregation of Data Copy imageCopy
<div id="chart2" data-win-control="Telerik.UI.RadChart"
    data-win-options="{
    dataSource: {
        data: DefaultData.salesData,
        sort: { field: 'Date', dir: 'asc' }
    },
    series: [{
        field: 'Value',
        name: 'Performance Summary',
        type: 'column',
        aggregate: 'sum'
    }],
    categoryAxis: {
        field: 'Date',
        baseUnit: 'years',
        type: 'date'
    },
    legend: { position: 'top' },
    title: { text: 'Sales by Year' }
}">
</div>

The result will look like this:

Column Chart

Aggregates sales column chart

Bar Chart

Aggregated sales bar chart

See Also