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

How to avoid duplicating

2 Answers 44 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Rafael
Top achievements
Rank 1
Rafael asked on 27 Jan 2021, 08:00 PM

Hi, im facing a issue.All my series are showing all information from all series.

I know probably it's a basic question, but could someone help me to solve this?

01.<telerik:RadHtmlChart runat="server" ID="CompetencyByParticipant" Width="80%" Height="300" Transitions="true">
02.    <ChartTitle Text="CompetĂȘncias por tipo de participante">
03.    </ChartTitle>
04.    <PlotArea>
05.        <YAxis>
06.            <LabelsAppearance DataFormatString="{0:0.0}">
07.            </LabelsAppearance>
08.            <MinorGridLines Visible="false" />
09.        </YAxis>
10.        <XAxis DataLabelsField="ProfileName">
11.            <TitleAppearance Text="Participantes">
12.            </TitleAppearance>
13.            <LabelsAppearance Step="3">
14.            </LabelsAppearance>
15.            <MajorGridLines Visible="true" />
16.            <MinorGridLines Visible="false" />
17.        </XAxis>
18.    </PlotArea>
19.</telerik:RadHtmlChart>

 

01.var profileGroup = from k in evaluationData
02.group k by new { Profile = k.Profile, ProfileName = k.ProfileName, CompetencyId = k.Competency, CompetencyName = k.CompetencyName } into g
03.select new
04.{
05.    Profile = g.Key.Profile,
06.    ProfileName = g.Key.ProfileName,
07.    Competency = g.Key.CompetencyId,
08.    CompetencyName = g.Key.CompetencyName,
09.    Score = g.Average(x => x.Score)
10.};
11.var chart = CompetencyByParticipant;
12.var competencies = profileGroup.Select(x => x.CompetencyName).Distinct();
13.foreach (var p in competencies)
14.{
15.    var serie = new ColumnSeries();
16.    serie.Name = p;
17.    serie.DataFieldY = "Score";
18.    chart.PlotArea.Series.Add(serie);
19.}
20.chart.PlotArea.XAxis.DataLabelsField = "ProfileName";
21.chart.PlotArea.XAxis.LabelsAppearance.Step = 3;
22.chart.DataSource = profileGroup.ToList();
23.chart.DataBind();

 

Is there a way to bind an specific dataset to each serie?

Thanks.

2 Answers, 1 is accepted

Sort by
0
Rafael
Top achievements
Rank 1
answered on 27 Jan 2021, 08:27 PM

My data:

    { Profile = 2, ProfileName = "Autoavaliação", Competency = 36, CompetencyName = "CompetĂȘncia 1", Score = 5 }
    { Profile = 2, ProfileName = "Autoavaliação", Competency = 37, CompetencyName = "CompetĂȘncia 2", Score = 5 }
    { Profile = 2, ProfileName = "Autoavaliação", Competency = 38, CompetencyName = "CompetĂȘncia 3", Score = 5 }
    { Profile = 3, ProfileName = "Gestor", Competency = 36, CompetencyName = "CompetĂȘncia 1", Score = 4 }
    { Profile = 3, ProfileName = "Gestor", Competency = 37, CompetencyName = "CompetĂȘncia 2", Score = 4 }
    { Profile = 3, ProfileName = "Gestor", Competency = 38, CompetencyName = "CompetĂȘncia 3", Score = 4 }
    { Profile = 1, ProfileName = "Par(es)", Competency = 36, CompetencyName = "CompetĂȘncia 1", Score = 4 }
    { Profile = 1, ProfileName = "Par(es)", Competency = 37, CompetencyName = "CompetĂȘncia 2", Score = 4 }
    { Profile = 1, ProfileName = "Par(es)", Competency = 38, CompetencyName = "CompetĂȘncia 3", Score = 4 }
    { Profile = 5, ProfileName = "Subordinado Direto(s)", Competency = 36, CompetencyName = "CompetĂȘncia 1", Score = 2 }
    { Profile = 5, ProfileName = "Subordinado Direto(s)", Competency = 37, CompetencyName = "CompetĂȘncia 2", Score = 2 }
    { Profile = 5, ProfileName = "Subordinado Direto(s)", Competency = 38, CompetencyName = "CompetĂȘncia 3", Score = 2 }
 

 

Thank you.

0
Accepted
Vessy
Telerik team
answered on 28 Jan 2021, 03:09 PM

Hi Rafael,

In the provided code snippet, all dynamically created series are bound to the same field (serie.DataFieldY = "Score"), thus all series are displaying one and the same data. The values for each series must be placed inside a separate dataColumn (in one and the same dataset), the name of which to be passed as a DataFieldY value after that.

For example:

        <telerik:RadHtmlChart runat="server" ID="CompetencyByParticipant" Width="80%" Height="300" Transitions="true">
            <ChartTitle Text="CompetĂȘncias por tipo de participante">
            </ChartTitle>
            <PlotArea>
                <YAxis>
                    <LabelsAppearance DataFormatString="{0:0.0}">
                    </LabelsAppearance>
                    <MinorGridLines Visible="false" />
                </YAxis>
                <XAxis DataLabelsField="ProfileName">
                    <TitleAppearance Text="Participantes">
                    </TitleAppearance>
                    <LabelsAppearance Step="3">
                    </LabelsAppearance>
                    <MajorGridLines Visible="true" />
                    <MinorGridLines Visible="false" />
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GenerateChart();
        }
    }

    private void GenerateChart()
    {
        var profileGroup = GetData();
        var chart = CompetencyByParticipant;
        var competencies = profileGroup.Columns;

        foreach (var p in competencies)
        {
            var serie = new ColumnSeries();
            serie.Name = p.ToString();
            serie.DataFieldY = p.ToString();
            chart.PlotArea.Series.Add(serie);
        }
        chart.PlotArea.XAxis.DataLabelsField = "ProfileName";
        chart.PlotArea.XAxis.LabelsAppearance.Step = 3;
        chart.DataSource = profileGroup;
        chart.DataBind();
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ProfileName", typeof(string));
        dt.Columns.Add("Score1", typeof(Decimal));
        dt.Columns.Add("Score2", typeof(Decimal));
        dt.Columns.Add("Score3", typeof(Decimal));
        dt.Columns.Add("Score4", typeof(Decimal));

        dt.Rows.Add("label 1", 30, 10, 20, 30);
        dt.Rows.Add("label 2", 5, 25, 30, 35);
        dt.Rows.Add("label 3", 10, 4, 65, 50);
        dt.Rows.Add("label 4", 1, 4, 65, 50);

        return dt;
    }

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart (HTML5)
Asked by
Rafael
Top achievements
Rank 1
Answers by
Rafael
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or