Group RadHtmlChart Data Source

8 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 04 Jul 2014 Link to this post

    Requirements

    Telerik Product and Version

    Telerik UI for ASP.NET AJAX Q1 2014 SP1

    Supported Browsers and Platforms

    All browsers and platforms supported by Telerik UI for ASP.NET AJAX

    Components/Widgets used (JS frameworks, etc.)



    PROJECT DESCRIPTION

    This project illustrates how to manually group a data source, so that its structure is suitable for a chart data-binding. The VS example uses a DataTable data source for the purpose. Generally each series of a data bound chart must reference a separate data source field to get values. If, however, these values are stored in a common field you must group them in separate fields.

    Table 1 shows the structure of a raw data source that is not suitable for a chart data-binding while Table2 illustrates our target data source structure after the grouping.
     

    Table 1: Raw Data Source.


    Table 2: Grouped Data Source by Year field from Table1.


    Year

    Quarter

    Sales

    Purchases


    Year0

    Quarter0

    Sales0

    Purchases0

    Year1

    Quarter1

    Sales1

    Purchases1

    2012

    "Q1"

    210000

    110000


    2012

    "Q1"

    210000

    110000

    2014

    "Q1"

    350000

    100000

    2012

    "Q2"

    320000

    250000


    2012

    "Q2"

    320000

    250000

    2014

    "Q2"

    380000

    180000

    2012

    "Q3"

    280000

    300000


    2012

    "Q3"

    280000

    300000

    2014

    "Q3"

    350000

    280000

    2012

    "Q4"

    400000

    350000


    2012

    "Q4"

    400000

    350000

    2014

    "Q4"

    420000

    300000

    2014

    "Q1"

    350000

    100000










    2014

    "Q2"

    380000

    180000










    2014

    "Q3"

    350000

    280000










    2014

    "Q4"

    420000

    300000










    How to Start the Data Source Grouping

    The main method that must be called to trigger the data source grouping manipulations is RadHtmlChartGroupDataSource.GroupDataSource(HtmlChart, DataSource, DataGroupColumn, SeriesType, DataFieldY, DataFieldX) and takes the following arguments:

    • HtmlChart – The RadHtmlChart instance.
    • DataSource –The raw DataTable data source.
    • DataGroupColumn – The name of the column in the raw data source which will be the criteria for grouping the chart series items into series. There will be as many series as the number of distinct values in this column.
    • SeriesType – The type of the series. Currently the example supports Area, Bar, Column, Line, Scatter and ScatterLine series. You can, however, expand that list in the AddChartSeriesType() method.
    • DataFieldY - The name of the column in the raw data source that stores the y-values.
    • DataFieldX - The name of the column in the raw data source that stores the x-values.

    You can make additional series configurations (e.g., set series names, define tooltips/labels template, etc.) in the RadHtmlChartGroupDataSource.ConfigureChartSeries() method.

    Requirements and Limitations of Data Source Grouping Example

    In order for this example to work properly the following conditions must be met:

    • The number of rows for each series must match. For example Table 1, Year field has a set of 4 rows with a value of “2012” that will be used for the first series and another set of 4 rows with a value of “2014” that will be used for the second series.
    • The x-axis items sequence must match for each series from a category chart. For example Table 1, Quarter field has 2 sets of rows that form identical sequences – Q1, Q2, Q3, Q4.

    You can review the project attached at the bottom of this article for additional reference.

  2. Jim
    Jim avatar
    1 posts
    Member since:
    Jul 2014

    Posted 26 Aug 2014 in reply to Telerik Admin Link to this post

    I have downloaded the RadHtmlChart-DataSourceGroupingVB.zip file and pasted the code verbatim into a class.  My chart is a column chart (stacked) so the only change I made was in AddSeriesType method for ColumnSeries: ColumnSeries1.Stacked = True.
    This displays the stacked columns perfectly, except that the XAxis.DataLabels to not display.  The .PlotArea.XAxis.DataLabelsField is being set just as it sits in the zip file.  Also, when the series are stacked and one series value is very small, the series label overlaps.  I am attaching an example of the chart rendered using your class code.

    Any help would be appreciated as these are the last two items remaining to create a perfect stacked column chart.

  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 29 Aug 2014 Link to this post

    Hello Jim,

    I have tried to reproduce the mentioned issue but to no avail - no matter whether the series are stacked or not the x-axis labels are displayed. See the chart output here. What I can suggest is that you provide us with your data source, so that I can make an investigation locally.

    As for the series labels overlapping you can try to set a different position for each series. For example:

    AddChartSeriesType method:
    case "ColumnSeries":
        ColumnSeries columnSeries1 = new ColumnSeries();
        columnSeries1.Name = SeriesName;
        columnSeries1.DataFieldY = DataFieldY + Index;
        columnSeries1.TooltipsAppearance.ClientTemplate = TooltipsTemplate;
        columnSeries1.LabelsAppearance.DataFormatString = LabelsFormatString;
        HtmlChart.PlotArea.Series.Add(columnSeries1);
        if (Index == 0)
        {
            columnSeries1.Stacked = true;
            columnSeries1.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
        }
        break;



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Lenilson
    Lenilson avatar
    1 posts
    Member since:
    Sep 2014

    Posted 07 Oct 2015 in reply to Danail Vasilev Link to this post

    Hello!

    Could anyone tell me how to Insert in this example the Xaxis Dynamiclly?

    <XAxis>
                <LabelsAppearance DataFormatString="Year {0}" />
                <Items>
                    <telerik:AxisItem LabelText="2000" />
                    <telerik:AxisItem LabelText="2004" />
                    <telerik:AxisItem LabelText="2008" />
                </Items>
            </XAxis>

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 08 Oct 2015 Link to this post

    Hello Lenilson,

    The x-axis values in the provided example are loaded from a data source. You can examine the following line, located in the ConfigureChartSeries method from the RadHtmlChartGroupDataSource.cs file which is responsible for the x-axis categories:

    if (isCategorySeries)
    {
        HtmlChart.PlotArea.XAxis.DataLabelsField = DataFieldX + "0";
    }

    You can simply comment this line of code and insert the x-axis categories programmatically.

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Omar
    Omar avatar
    1 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2015 in reply to Danail Vasilev Link to this post

    Hi Danail,

     I need to group XAxis as shown in the attached excel sheet, is it possible in RadHTMLChart.

     Regards

    Omar

  7. Levi
    Levi avatar
    9 posts
    Member since:
    Jun 2014

    Posted 19 Jan in reply to Telerik Admin Link to this post

    I am trying to achieve the same goal as Jim.  I downloaded the example provided and the tells me that RadHtmlChartGroupDataSource is not defined...

     

    Am I missing something?  Maybe an Import?  Please help!

  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 20 Jan Link to this post

    Hello Levi,

    Can you ensure you have placed the RadHtmlChartGroupDataSource.cs class inside the App_Code folder of your web app/web site?

    Regards,
    Danail Vasilev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top