[Solved] Two series data bound chart

[Christine]

I have two series I would like to represent on my line chart, both bound to data sources. Currently I have them in two separate data source definitions, like this:



<script>



    var region1Data = [

        { year: "2000", sales: 200 },            

        { year: "2001", sales: 450 },

        { year: "2002", sales: 300 },

        { year: "2003", sales: 125 }];



   var region2Data = [

        { year: "2000", sales: 300 },            

        { year: "2001", sales: 350 },

        { year: "2002", sales: 200 },

        { year: "2003", sales: 525 }];



</script>



How do I bind each series to the same chart? Can I do this:



<div data-win-control="Telerik.UI.RadChart" data-win-options="{ 

    dataSource: { 

        data: region1Data,

        data: region2Data

        }, 

    series1: [ { 

        type: 'line', field: 'sales'

        }

    series2:[{

        type: 'line', field: 'sales'

        }

        } ], 



    categoryAxis: { 

        field: year 

        } 

        }">



</div>







Christine

[Veli]

Hello Christine,

The dataSource property of the chart (or any other dataBound control) accepts only a single collection of data items. However, you can take 2 different approaches for this scenario, depending on which one's convenient for you:

First Approach

1. Put all data values for each series in its own separate array:

var region1Data = [
    { year: "2000", sales: 200 },
    { year: "2001", sales: 450 },
    { year: "2002", sales: 300 },
    { year: "2003", sales: 125 }];

var region2Data = [
    { year: "2000", sales: 400 },
    { year: "2001", sales: 350 },
    { year: "2002", sales: 375 },
    { year: "2003", sales: 225 }];

var series1Data = region1Data.map(function (item) {
    return item.sales;
});

var series2Data = region2Data.map(function (item) {
    return item.sales;
});

2. Put all category values in a separate array:

var categoriesData = region1Data.map(function (item) {
    return item.year;
});

3. Assign the series data and category data in the chart definition:

<div id="regionSalesGraph" class="graph"
    style="width: 600px"
    data-win-control="Telerik.UI.RadChart"
    data-win-options="{
        theme: 'light',
        legend: { visible: true },
        categoryAxis: { categories: categoriesData },
        seriesDefaults: { type: 'column' },
        series: [
            { data: series1Data, name: 'region 1' },
            { data: series2Data, name: 'region 2' }
        ]
    }">
</div>

The chart renders as expected:



Second Approach 

1. Put all data for all series into a single array of data objects:

var chartData = region1Data.map(function (item, index) {
    return {
        year: item.year,
        region1: item.sales,
        region2: region2Data[index].sales
    };
});

Objects of the above array will have the data values for both region 1 and region 2 as separate properties.

2. Assign RadChart's dataSource and set the category and series field names:

<div id="regionSalesGraph" class="graph"
    style="width: 600px"
    data-win-control="Telerik.UI.RadChart"
    data-win-options="{
        theme: 'light',
        legend: { visible: true },
        dataSource: chartData,
        categoryAxis: { field: 'year' },
        series: [
            { type: 'column', field: 'region1', name: 'region 1' },
            { type: 'column', field: 'region2', name: 'region 2' }
        ]
    }">
</div>

You get the same end result. 

I hope this helps.

Greetings,
Veli
the Telerik team