Split each bar chart to its x value column

Thread is closed for posting
4 posts, 0 answers
  1. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 06 Feb 2014 Link to this post

    I have a bar chart and I got a little problem in it.. it's grouping all bars to one single x value column .. i need to split each bar to its x value.. take a look at the snap shoot of the problem.. and my code:

    RadChart1.PlotArea.XAxis.AutoScale = false;
            RadChart1.PlotArea.XAxis.Items.Clear();
            RadChart1.Series.Clear();
            ChartSeries series = new ChartSeries(dt.Rows[0]["doc_date"].ToString(), ChartSeriesType.Bar);
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                series = new ChartSeries(dt.Rows[i]["doc_date"].ToString(), ChartSeriesType.Bar);
               series.Items.Add(new ChartSeriesItem(Convert.ToDouble(dt.Rows[i]["total_timesheet"])));

               ChartAxisItem axisItem = new ChartAxisItem(dt.Rows[i]["doc_date"].ToString());
               RadChart1.PlotArea.XAxis.Items.Add(axisItem);
               RadChart1.Series.Add(series);
            }
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 10 Feb 2014 Link to this post

    Hello mahmoud,

    It seems that each created series has only one item, so that all the items will be placed in the first x-axis category. What I can suggest is that you create one series with multiple items, instead of multiple series with only one item. For example:
    ASPX:
    <telerik:RadChart ID="RadChart1" runat="server">
    </telerik:RadChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadChart1.PlotArea.XAxis.AutoScale = false;
        RadChart1.PlotArea.XAxis.Items.Clear();
        RadChart1.Series.Clear();
        DataTable dt = GetData();
        ChartSeries series = new ChartSeries(dt.Rows[0]["doc_date"].ToString(), ChartSeriesType.Bar);
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            //series = new ChartSeries(dt.Rows[i]["doc_date"].ToString(), ChartSeriesType.Bar);
            series.Items.Add(new ChartSeriesItem(Convert.ToDouble(dt.Rows[i]["total_timesheet"])));
            ChartAxisItem axisItem = new ChartAxisItem(dt.Rows[i]["doc_date"].ToString());
            RadChart1.PlotArea.XAxis.Items.Add(axisItem);
        }
        RadChart1.Series.Add(series);
    }
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID", typeof(byte));
        dt.Columns.Add("doc_date", typeof(string));
        dt.Columns.Add("total_timesheet", typeof(float));
     
        dt.Rows.Add(1, "item 1", 40);
        dt.Rows.Add(2, "item 2", 50);
        dt.Rows.Add(3, "item 3", 70);
     
        return dt;
    }



    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 in reply to Danail Vasilev Link to this post

    Hi Danail Vasilev,
    thanks a lot for your help, but I already tried that .. and something else went wrong .. the dates or series on the right of the chart bound to one date value and colors didn't change either, what i need is to show all dates on the right of the grid with different colors programmatically.
    take a look at the snap shoot after this code:

        RadChart1.PlotArea.XAxis.AutoScale = false;
        RadChart1.PlotArea.XAxis.Items.Clear();
        RadChart1.Series.Clear();
        
        ChartSeries series = new ChartSeries(dt.Rows[0]["doc_date"].ToString(), ChartSeriesType.Bar);
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            //series = new ChartSeries(dt.Rows[i]["doc_date"].ToString(), ChartSeriesType.Bar);
            series.Items.Add(new ChartSeriesItem(Convert.ToDouble(dt.Rows[i]["total_timesheet"])));
            ChartAxisItem axisItem = new ChartAxisItem(dt.Rows[i]["day_name"].ToString());
            RadChart1.PlotArea.XAxis.Items.Add(axisItem);
        }
    RadChart1.Series.Add(series);

    Thanks in advance, Mahmoud.

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 Feb 2014 Link to this post

    Hi Mahmoud,

    Please find below my comments:
    • In order to display item names in the legend you must set Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels property for the particular series and assign names for each series items.
    • In order to color series items you must set .Appearance.FillStyle.MainColor property for each item.

    For example:
    ASPX:

    <telerik:RadChart ID="RadChart1" runat="server">
    </telerik:RadChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadChart1.PlotArea.XAxis.AutoScale = false;
        RadChart1.PlotArea.XAxis.Items.Clear();
        RadChart1.Series.Clear();
        DataTable dt = GetData();
        ChartSeries series = new ChartSeries(dt.Rows[0]["doc_date"].ToString(), ChartSeriesType.Bar);
        //Display item names in the legend
        series.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            ChartSeriesItem csi = new ChartSeriesItem();
            //Set item value
            csi.YValue = Convert.ToDouble(dt.Rows[i]["total_timesheet"]);
            //Set item color
            csi.Appearance.FillStyle.MainColor = (Color)dt.Rows[i]["color_field"];
            //Set item names
            csi.Name = dt.Rows[i]["item_name_field"].ToString();
            series.Items.Add(csi);
            ChartAxisItem axisItem = new ChartAxisItem(dt.Rows[i]["doc_date"].ToString());
            RadChart1.PlotArea.XAxis.Items.Add(axisItem);
        }
        RadChart1.Series.Add(series);
    }
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID", typeof(byte));
        dt.Columns.Add("doc_date", typeof(string));
        dt.Columns.Add("total_timesheet", typeof(float));
        dt.Columns.Add("item_name_field", typeof(string));
        dt.Columns.Add("color_field", typeof(Color));
     
        dt.Rows.Add(1, "item 1", 40, "15/04/2013", Color.Red);
        dt.Rows.Add(2, "item 2", 50, "22/04/2013", Color.Blue);
        dt.Rows.Add(3, "item 3", 70, "30/06/2013", Color.Green);
     
        return dt;
    }

    You can also find the full runnable VS example in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top