[Solved] Create Chart with Grouping By Team

[Varun]

Hi,

I have data as shown in attached file. I want to create chart which will be displayed as all quarter bars for each sales team below. So the aim is to first have the comparison of increase in quarter w.r.t to each team and then beside that I will have different quarter bars for second sales team.

Can someone please help me out in.

[Tsvetina]

Hello Varun,

I am not sure that I completely understand your requirement. Do you want to display separate series for each quarter but have them grouped together by team, e.g. SalesTeam1-Q1, SalesTeam2-Q1, SalesTeam1-Q2, SalesTeam2-Q2, etc.? If so, you can use the grouping feature of the chart data source.
For example:

var chart = new Telerik.UI.RadChart(chart1, {
    dataSource: {
        data: Data.sales,
        group: { field: "TeamName" }
    },
    series: [
        { field: "Q1", name: "Q1" },
        { field: "Q2", name: "Q2" },
        { field: "Q3", name: "Q3" },
        { field: "Q4", name: "Q4" }
    ],
    seriesDefaults: {
        groupNameTemplate: '#= group.value # (#= series.name #)'
    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        template: "#=series.name#: #=value#"
    },
    theme: "light",
    width: 1000
});

The above declaration produces the result shown in the attached image. I am also attaching a runnable project implementing this scenario. 

If this isn't your requirement, please post a screenshot of the expected result.

Regards,
Tsvetina
Telerik

[Varun]

Thank You for replying to my post. I just want opposite in case of displaying. Where first all series for Sales Team 1 will be displayed and then followed by all the series for Sales Team 2 will be displayed.

Sorry I do not have the Image with me, and I do not know How can I produce it.


Chart should display like this


Q1, Q2, Q3, Q4 | Q1, Q2, Q3, Q4

Sales Team-1         Sales Team-2

I hope, I tried to clarify it. Thanks again!

[Tsvetina]

Hi Varun,

In such case, just remove the grouping. You can also set the categoryAxis.field property to "TeamName", so labels are displayed for the two teams (see image).

var chart = new Telerik.UI.RadChart(chart1, {
    dataSource: {
        data: Data.sales
    },
    series: [
        { field: "Q1", name: "Q1" },
        { field: "Q2", name: "Q2" },
        { field: "Q3", name: "Q3" },
        { field: "Q4", name: "Q4" }
    ],
    categoryAxis: {
        field: "TeamName"
    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        template: "#=series.name#: #=value#"
    },
    theme: "light",
    width: 1000
});

Regards,
Tsvetina
Telerik

[Varun]

Hi,

I have attached my code snippet and data source file's image. I am trying the same as you suggested but not sure, it is not populating chart. I do not encounter any error but it is not able to retrieve data from json file. Can you please pin point out my mistake.


Thanks. 

[Tsvetina]

Hello Varun,

In your schema you need to also specify the schema of the data that you are reading:

schema: {
    // specify the the schema is JSON
    type: "json",
    // the JSON object which contains the data records
    data: "Group"
}

Additionally, can you confirm that "Group" is the name of the object in your JSON that contains the data records? In the first code sample that you sent, this name would be "SALES". If "SALES" is a child object of "Group", then the data property value should be "Group.SALES".

Regards,
Tsvetina
Telerik

[Varun]

I tried adding type tag to schema, but still not working. And I have replaced "Sales" with "Group", so just changing Data: "group" should suffice it.

[Tsvetina]

Hi Varun,

I just noticed that you are mixing the chart and the datasource definition. The series that you define in the DataSource constructor should be defined in the RadChart constructor. 

I reworked my example to better fit your scenario:

1) I define the RadChart and its series in mark-up:

<div id="chart1" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [
            { field: 'Q1', name: 'Q1' },
            { field: 'Q2', name: 'Q2' },
            { field: 'Q3', name: 'Q3' },
            { field: 'Q4', name: 'Q4' }
        ],
        categoryAxis: {
            field: 'TeamName'
        },
        legend: {
            position: 'bottom'
        },
        tooltip: {
            visible: true,
            template: '#=series.name#: #=value#'
        },
        theme: 'light',
        width: 1000
}"></div>

2) Then in JavaScript I define the DataSource which reads the json file:

var ds = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "pages/data.json",
            dataType: "json"
        }
    },
    schema: {
        // specify the the schema is JSON
        type: "json",
        // the JSON object which represents a single data record
        data: "Group"
    }
});

3) Last, I assign the DataSource to the chart and refresh the chart:

var chart = document.querySelector("#chart1").winControl;
chart.dataSource = ds;
chart.refresh();

If there are still problems, let me know how I should modify my project to reproduce them.

Regards,
Tsvetina
Telerik

[Varun]

Is there a way to add number of series bar using javascript code? As it might be possible that for a given FY one might not have all the 4 quarters done.

[Tsvetina]

Hello Varun,

It is possible to dynamically add series to RadChart, as shown in each series' help article. The code would look like this:

var barSeries = new Telerik.UI.Chart.BarSeries();
barSeries.field = "Q1";
barSeries.name = "Q1";
//barSeriesChartCtrl is the RadChart object (winControl)
barSeriesChartCtrl.series.push(barSeries);
barSeriesChartCtrl.refresh();

If you need to first remove the old series, write this before the above code snippet:
 

barSeriesChartCtrl.series = [];

Anyway, have you tried using the current chart definition with the data that you described. By default, if there are missing values in the data source, the chart skips them and does not display a bar for them. There are no errors in such case.

Regards,
Tsvetina
Telerik