RadHtmlChart Stacked BarChart created from code

3 posts, 1 answers
  1. John
    John avatar
    2 posts
    Member since:
    Feb 2013

    Posted 29 Jan Link to this post

    I need to create stacked bar data from code and cannot find a working example.  Below is some code I've pieces together from other samples this does group the bars but they are not stacked correctly.  I can make this work in a RadChart but we are trying to move away from the old control

     

    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="625" >
        <ChartTitle Text="My test chart"/>
    </telerik:RadHtmlChart>

     

            protected void Page_Load(object sender, EventArgs e)
            {
     
     
                int numSeries = GetData().Columns.Count - 2;
     
                for (int i = 0; i < numSeries; i++)
                {
                    BarSeries currLineSeries = new BarSeries { DataFieldY = GetData().Columns[2 + i].Caption, Stacked = true, StackType = HtmlChartStackType.Normal, GroupName = "Weeks", Gap = 2 };
                    RadHtmlChart1.PlotArea.Series.Add(currLineSeries);
                }
     
     
                RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "Weeks";
                RadHtmlChart1.DataSource = GetData();
                RadHtmlChart1.DataBind();
    }
     
     protected DataTable GetData()
            {
                DataTable dt = new DataTable();
     
                dt.Columns.Add("ID");
                dt.Columns.Add("Weeks");
                dt.Columns.Add("a111");
                dt.Columns.Add("a112");
                dt.Columns.Add("a119");
     
     
                dt.Rows.Add(1, "1/3/2011", 4, 46, 117);
                dt.Rows.Add(2, "1/10/2011", 12, 62, 112);
                dt.Rows.Add(3, "1/17/2011", 6, 79, 132);
     
     
                return dt;
     
            }

  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 01 Feb Link to this post

    Hi John,

    Thank you for the sample.

    You should define the column types so the chart can properly parse the data. This piece of documentation will be live shortly, at the moment the raw markdown is only available: https://github.com/telerik/ajax-docs/blob/production/controls/htmlchart/changes-and-backwards-compatibility/data-source-string-fields-are-not-parsed-to-decimal.md.

    Here is the modified snippet that should work fine:

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("Weeks");
        dt.Columns.Add("a111", typeof(int));
        dt.Columns.Add("a112", typeof(int));
        dt.Columns.Add("a119", typeof(int));
     
        dt.Rows.Add(1, "1/3/2011", 4, 46, 117);
        dt.Rows.Add(2, "1/10/2011", 12, 62, 112);
        dt.Rows.Add(3, "1/17/2011", 6, 79, 132);
     
        return dt;
    }


    Regards,

    Marin Bratanov
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    2 posts
    Member since:
    Feb 2013

    Posted 01 Feb in reply to Marin Bratanov Link to this post

    Thanks for the quick turnaround!

    That fixed my test code

     

     

Back to Top