Split each bar chart to its x value column

[mahmoud]

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);
        }

[Danail Vasilev]

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

[mahmoud]

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.

[Danail Vasilev]

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