Multiple Column Series per date

[Hugo Augusto]

Hello,

 

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.

HTML

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

 

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";
ColumnChartActivitiesByDate.PlotArea.Series.Add(RunColumnSeries);

ColumnSeries WalkColumnSeries = new ColumnSeries();
WalkColumnSeries.Name = "Walk";
WalkColumnSeries.DataFieldY = "TotalActivities";
WalkColumnSeries.ColorField = "CategoryColor";
ColumnChartActivitiesByDate.PlotArea.Series.Add(WalkColumnSeries);

ColumnSeries SwimColumnSeries = new ColumnSeries();
SwimColumnSeries.Name = "Swim";
SwimColumnSeries.DataFieldY = "TotalActivities";
SwimColumnSeries.ColorField = "CategoryColor";
ColumnChartActivitiesByDate.PlotArea.Series.Add(SwimColumnSeries);

ColumnChartActivitiesByDate.DataSource = GetData();
ColumnChartActivitiesByDate.DataBind();

 

Hope I can get some light on this. 

Thank you!

 

 

[Hugo Augusto]

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

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

and not

dt.Columns.Add("Run"...)
dt.Columns.Add("Walk"...)
dt.Columns.Add("Swim"...)

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.

[Vessy]

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:

https://www.telerik.com/support/code-library/group-radhtmlchart-data-source

Regards,
Vessy
Progress Telerik