This is a migrated thread and some comments may be shown as answers.

Multiple Column Series per date

2 Answers 47 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Hugo Augusto
Top achievements
Rank 2
Veteran
Hugo Augusto asked on 30 Oct 2019, 09:47 PM

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!

 

 

2 Answers, 1 is accepted

Sort by
0
Hugo Augusto
Top achievements
Rank 2
Veteran
answered on 31 Oct 2019, 06:39 PM

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.

0
Vessy
Telerik team
answered on 01 Nov 2019, 03:32 PM

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

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.
Tags
Chart (HTML5)
Asked by
Hugo Augusto
Top achievements
Rank 2
Veteran
Answers by
Hugo Augusto
Top achievements
Rank 2
Veteran
Vessy
Telerik team
Share this question
or