Group RadHtmlChart Data Source

Thread is closed for posting
16 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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. 47496549-70CB-4273-A2D6-EBDC65DD30F0
    47496549-70CB-4273-A2D6-EBDC65DD30F0 avatar
    1 posts
    Member since:
    Jul 2014

    Posted 26 Aug 2014 in reply to 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD 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. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    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
     
    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
     
  4. 575DB670-26F9-42C3-BDCD-510A454C3589
    575DB670-26F9-42C3-BDCD-510A454C3589 avatar
    1 posts
    Member since:
    Sep 2014

    Posted 07 Oct 2015 in reply to 9915F819-5226-40CF-90E0-E07E884605ED 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. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    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. 4713F36A-62A2-43B5-BF64-E18FECC5D078
    4713F36A-62A2-43B5-BF64-E18FECC5D078 avatar
    1 posts
    Member since:
    Oct 2010

    Posted 21 Oct 2015 in reply to 9915F819-5226-40CF-90E0-E07E884605ED 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. 4A33A801-6F20-4A3E-AF9A-24AD970A758A
    4A33A801-6F20-4A3E-AF9A-24AD970A758A avatar
    10 posts
    Member since:
    Jun 2014

    Posted 19 Jan 2016 in reply to 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD 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. 9915F819-5226-40CF-90E0-E07E884605ED
    9915F819-5226-40CF-90E0-E07E884605ED avatar
    1502 posts
    Member since:
    Jan 2017

    Posted 20 Jan 2016 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
  9. 00DB0621-213D-406C-A7CD-2FC249334EC5
    00DB0621-213D-406C-A7CD-2FC249334EC5 avatar
    3 posts
    Member since:
    Aug 2015

    Posted 26 Jan 2017 Link to this post

    I downloaded the RadHtmlChart-DataSourceGroupingCS.zip code. When I implement it in my project, it is showing this error

    "An exception of type 'System.IndexOutOfRangeException' occurred in System.Data.dll but was not handled in user code
    Additional information: There is no row at position 5.
    "

  10. 00DB0621-213D-406C-A7CD-2FC249334EC5
    00DB0621-213D-406C-A7CD-2FC249334EC5 avatar
    3 posts
    Member since:
    Aug 2015

    Posted 26 Jan 2017 in reply to 00DB0621-213D-406C-A7CD-2FC249334EC5 Link to this post

    I found solution for that: This function resolved it. 

    private static int HighestRowTablePos(DataTable[] dtList)
        {
            int tableNum = 0;
            int numOfRows = 0;
            for (int i = 0; i < dtList.Length; i++)
            {
                int count = dtList[i].Rows.Count;
                if (count > numOfRows)
                {
                    numOfRows = count;
                    tableNum = i;
                }
            }
            return tableNum;
        }
    //check get field with the greater number of rows
           int highestRowTablePos = HighestRowTablePos(tempDTarray);
     
           //Add rows to the common DataTable
           for (int i = 0; i < tempDTarray[highestRowTablePos].Rows.Count; i++)
           {
               commonDT.Rows.Add();
           }

     

     

     

     

  11. 5D3D093C-4543-4A11-A834-BD1553699B13
    5D3D093C-4543-4A11-A834-BD1553699B13 avatar
    36 posts
    Member since:
    Feb 2015

    Posted 25 Feb 2017 in reply to 9915F819-5226-40CF-90E0-E07E884605ED Link to this post

    I have used RadHtmlChartGroupDataSource class to group the data and display in report.I am having difficulties when series 0 has few records and another series has more records. in this case xaxis.DataLabelsField shows null here.
    this is dynamic series and i use the above line of code in class file.
    how can i manage to get the distinct list of all dynamic series and put as a label in chart.
    please refer the attachment.
  12. 5D3D093C-4543-4A11-A834-BD1553699B13
    5D3D093C-4543-4A11-A834-BD1553699B13 avatar
    36 posts
    Member since:
    Feb 2015

    Posted 25 Feb 2017 in reply to 5D3D093C-4543-4A11-A834-BD1553699B13 Link to this post

    I have used RadHtmlChartGroupDataSource class to group the data and display in report.I am having difficulties when series 0 has few records and another series has more records. in this case xaxis.DataLabelsField shows null here.
    this is dynamic series and i use the above line of code in class file.
    how can i manage to get the distinct list of all dynamic series and put as a label in chart.
    please refer the attachment.

    sorry use this attachment.

  13. 5D3D093C-4543-4A11-A834-BD1553699B13
    5D3D093C-4543-4A11-A834-BD1553699B13 avatar
    36 posts
    Member since:
    Feb 2015

    Posted 02 Mar 2017 in reply to 9915F819-5226-40CF-90E0-E07E884605ED Link to this post

    I have used RadHtmlChartGroupDataSource class to group the data and display in report.I am having difficulties when series 0 has few records and another series has more records. in this case xaxis.DataLabelsField shows null here.
    this is dynamic series and i use the above line of code in class file.
    how can i manage to get the distinct list of all dynamic series and put as a label in chart.
    please refer the attachment.
  14. 9ECC85AA-A1D0-494F-B638-5D0615A2C8F5
    9ECC85AA-A1D0-494F-B638-5D0615A2C8F5 avatar
    13 posts
    Member since:
    Sep 2006

    Posted 14 Aug 2018 in reply to 9915F819-5226-40CF-90E0-E07E884605ED Link to this post

    yes RadHtmlChartGroupDataSource is in App_Code folder but still not working erring as not declared
  15. 3C92E467-77D1-4E13-8BBE-339D7D327D41
    3C92E467-77D1-4E13-8BBE-339D7D327D41 avatar
    66 posts
    Member since:
    Jul 2004

    Posted 31 Oct 2019 Link to this post

    Hi

    Have to say that this project is the solution for what I was looking for. You should hide this step into the control itself so that this could be automatic.

    I have a question. I need to set my own colors to each series and I've done that by adding the following steps:

    1. Add additional column that receives hex color like "#ff0000"

    dtDataPoints.Columns.Add(new DataColumn("CategoryColor", typeof(string)));

    2. Add "string ColorField" to methods inside RadHtmlChartGroupDataSource class

    3. Add "columnSeries1.ColorField = ColorField + Index;" to each SeriesType inside AddChartSeriesType method.

    It works great but the labels still show default colors. How can I make them inherit the custom colors applied to the ColumnSeries?

     

    Thank you!

  16. Matthew Tippett
    Matthew Tippett avatar
    3 posts
    Member since:
    Oct 2018

    Posted 31 Oct 2019 in reply to 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD Link to this post

    Hello,

     

    Please submit a support ticket or post in the Telerik forums in order for my technical team to assist you

     

    Best,

    Matt

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.