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

Assign X labels to a stacked Bar Series

1 Answer 76 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Gerry
Top achievements
Rank 1
Gerry asked on 14 Jan 2015, 08:50 PM
Hi

We are having lots of trouble with trying to set labels for a stacked bar chart.
Here is the C# code to generate the chart.

foreach (var jItem in jobsViewModels)
{
RadHtmlChartJobsProgress.Visible = true;
for (var i = 0; i < jItem.JobStepsBreakdownList.Count; i++)
{
var newSeries1 = new BarSeries();
newSeries1.GroupName = jItem.JobName;
foreach (var jItem in jobsViewModels)
{
RadHtmlChartJobsProgress.Visible = true;
for (var i = 0; i < jItem.JobStepsBreakdownList.Count; i++)
{
var newSeries1 = new BarSeries();
newSeries1.GroupName = jItem.JobName;
newSeries1.DataFieldX = newSeries1.GroupName;
if (i == 0)
{
newSeries1.Stacked = true;
// var newAxis = new AxisItem();
// newAxis.LabelText = jItem.JobName;
// RadHtmlChartJobsProgress.PlotArea.XAxis.Items.Add(newAxis);
                        
                    }
// newSeries1.Name = jItem.JobName;
RadHtmlChartJobsProgress.PlotArea.Series.Add(newSeries1);
var item = new CategorySeriesItem();
item.BackgroundColor = Color.Green;
item.Y = 1;
if (jItem.JobStepsBreakdownList[i].RagStatusName == "Red")
{
item.BackgroundColor = Color.Red;
}
else if (jItem.JobStepsBreakdownList[i].RagStatusName == "Amber")
{
item.BackgroundColor = Color.Orange;
}
else if (jItem.JobStepsBreakdownList[i].RagStatusName == "Complete")
{
item.BackgroundColor = Color.LightBlue;
}
else
{
item.BackgroundColor = Color.Green;
}
newSeries1.TooltipsAppearance.ClientTemplate = "Milestone: " +
jItem.JobStepsBreakdownList[i].WorkflowStepName;
newSeries1.SeriesItems.Add(item);
newSeries1.LabelsAppearance.Visible = false;
// RadHtmlChartJobsProgress.PlotArea.Series[i].Items.Add(item);
}
RadHtmlChartJobsProgress.PlotArea.XAxis.LabelsAppearance.Visible = true;
RadHtmlChartJobsProgress.DataBind();
}
if (i == 0)
{
newSeries1.Stacked = true;
// var newAxis = new AxisItem();
// newAxis.LabelText = jItem.JobName;
// RadHtmlChartJobsProgress.PlotArea.XAxis.Items.Add(newAxis);
newSeries1.DataFieldX = newSeries1.GroupName;
}
// newSeries1.Name = jItem.JobName;
RadHtmlChartJobsProgress.PlotArea.Series.Add(newSeries1);
var item = new CategorySeriesItem();
item.BackgroundColor = Color.Green;
item.Y = 1;
if (jItem.JobStepsBreakdownList[i].RagStatusName == "Red")
{
item.BackgroundColor = Color.Red;
}
else if (jItem.JobStepsBreakdownList[i].RagStatusName == "Amber")
{
item.BackgroundColor = Color.Orange;
}
else if (jItem.JobStepsBreakdownList[i].RagStatusName == "Complete")
{
item.BackgroundColor = Color.LightBlue;
}
else
{
item.BackgroundColor = Color.Green;
}
newSeries1.TooltipsAppearance.ClientTemplate = "Milestone: " +
jItem.JobStepsBreakdownList[i].WorkflowStepName;
newSeries1.SeriesItems.Add(item);
newSeries1.LabelsAppearance.Visible = false;
// RadHtmlChartJobsProgress.PlotArea.Series[i].Items.Add(item);
}
RadHtmlChartJobsProgress.PlotArea.XAxis.LabelsAppearance.Visible = true;
RadHtmlChartJobsProgress.DataBind();
}


If we enable the Add Axis code, we get all of the series items stuffed into 1 axis item. If we do not we cannot get a stacked series to have an X-Axis name but the series do display correctly.
How can we can do this? Help please!

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 16 Jan 2015, 12:01 PM
Hi,

I have already replied to the support ticket that was opened by you on the same matter, so I paste my answer below:

Each item from a category series is associated by the corresponding x-axis item. It may be possible that you have created multiple series with only one item instead of one series with multiple items. See how a bar series is declared here. Note that the same properties set in the markup can also be used for the programmatic creation of the chart as well.

Regarding templates in tooltips and lables I can suggest that you go through this demo and this help article in order to see how to declare them.

As for stacking and stacking in groups you can refer to this and this online demos.


Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Chart (HTML5)
Asked by
Gerry
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or