Multiple Column Series per date

3 posts, 0 answers
  1. Hugo Augusto
    Hugo Augusto avatar
    61 posts
    Member since:
    Jul 2004

    Posted 30 Oct 2019 Link to this post



    Im trying to achieve a column chart that shows the sum of activities for 3 types of activities and per date. Checked your examples but this case is not very well explained. I'm sure I'm doing something wrong. Besides getting the same result for each serie they also have the same color.


    <telerik:RadHtmlChart runat="server" ID="ColumnChartActivitiesByDate" Width="100%" Transitions="true" Skin="Bootstrap">
        <Pan Enabled="true" />
            <Appearance Position="Bottom"></Appearance>
            <YAxis MaxValue="200" MinValue="0">
                <TitleAppearance Text="Atividades"></TitleAppearance>
            <XAxis DataLabelsField="Date"></XAxis>


    C# - Getdata method

    protected DataTable GetData()
        DataTable dt = new DataTable();
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("CategoryName", typeof(string));
        dt.Columns.Add("TotalActivities", typeof(int));
        dt.Columns.Add("CategoryColor", typeof(string));
        dt.Columns.Add("Date", typeof(DateTime));
        dt.Rows.Add(1, "Run", 0,"#ff0000", new DateTime(2019, 09, 1));
        dt.Rows.Add(2, "Walk", 18, "#00ff00", new DateTime(2019, 09, 1));
        dt.Rows.Add(3, "Swim", 0, "#0000ff", new DateTime(2019, 09, 1));
        dt.Rows.Add(4, "Run", 1, "#ff0000", new DateTime(2019, 10, 1));
        dt.Rows.Add(5, "Walk", 29, "#00ff00", new DateTime(2019, 10, 1));
        dt.Rows.Add(6, "Swim", 0, "#0000ff", new DateTime(2019, 10, 1));
        dt.Rows.Add(7, "Run", 0, "#ff0000", new DateTime(2019, 11, 1));
        dt.Rows.Add(8, "Walk", 9, "#00ff00", new DateTime(2019, 11, 1));
        dt.Rows.Add(9, "Swim", 0, "#0000ff", new DateTime(2019, 11, 1));
        dt.Rows.Add(10, "Run", 0, "#ff0000", new DateTime(2019, 12, 1));
        dt.Rows.Add(11, "Walk", 5, "#00ff00", new DateTime(2019, 12, 1));
        dt.Rows.Add(12, "Swim", 0, "#0000ff", new DateTime(2019, 12, 1));
        dt.Rows.Add(13, "Run", 0, "#ff0000", new DateTime(2020, 01, 1));
        dt.Rows.Add(14, "Walk", 7, "#00ff00", new DateTime(2020, 01, 1));
        dt.Rows.Add(15, "Swim", 1, "#0000ff", new DateTime(2020, 01, 1));
        dt.Rows.Add(16, "Run", 0, "#ff0000", new DateTime(2020, 02, 1));
        dt.Rows.Add(17, "Walk", 11, "#00ff00", new DateTime(2020, 02, 1));
        dt.Rows.Add(18, "Swim", 3, "#0000ff", new DateTime(2020, 02, 1));
        return dt;


    c# - Chart config

    ColumnSeries RunColumnSeries = new ColumnSeries();
    RunColumnSeries.Name = "Run";
    RunColumnSeries.DataFieldY = "TotalActivities";
    RunColumnSeries.ColorField = "CategoryColor";
    ColumnSeries WalkColumnSeries = new ColumnSeries();
    WalkColumnSeries.Name = "Walk";
    WalkColumnSeries.DataFieldY = "TotalActivities";
    WalkColumnSeries.ColorField = "CategoryColor";
    ColumnSeries SwimColumnSeries = new ColumnSeries();
    SwimColumnSeries.Name = "Swim";
    SwimColumnSeries.DataFieldY = "TotalActivities";
    SwimColumnSeries.ColorField = "CategoryColor";
    ColumnChartActivitiesByDate.DataSource = GetData();


    Hope I can get some light on this. 

    Thank you!



  2. Hugo Augusto
    Hugo Augusto avatar
    61 posts
    Member since:
    Jul 2004

    Posted 31 Oct 2019 Link to this post

    I forgot to mention this fact that is very important. I have the line

    dt.Columns.Add("CategoryName", typeof(string));

    and not


    because I don't know how many there are. They can be 3 but they can be 5, 10 or more. This is a problem because in all your examples, you already know all the columns.

  3. Vessy
    Vessy avatar
    2189 posts

    Posted 01 Nov 2019 Link to this post

    Hi Hugo,

    RadHtmlChart expects data where the values for each series are placed in a separate column. In order to use data structure like the provided one, you will need to implement the approach from the following Code Library:

    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top