I have a color coded bar graph. I want to use the x axis labels in the legend. In other words I want each bar graph color to be labeled in the legend instead of using the x axis label. Any code help would be appreciated.
I have the following code which shows item 1, item 2, etc. appear in the legend.
I have the following code which shows item 1, item 2, etc. appear in the legend.
LBGChart.Series[0].Appearance.LegendDisplayMode = Telerik.Charting.
ChartSeriesLegendDisplayMode.ItemLabels;
I want the legend to coorespond or be the same as the x axis labels. So basically I'm asking how to customize the text.
8 Answers, 1 is accepted
0
Hello Germaine,
It is not possible to instruct the control to automatically display the XAxis labels in the legend. When you are setting the Appearance.LegendDisplayMode=ChartSeriesLegendDisplayMode.ItemLabels you are instructing the chart to display the series item labels and not the axis labels in the legend items (that is if ChartSeries.DataLabelsColumn is set; otherwise it sets "Item1", Item2", etc. legend items).
Attached is a sample application that demonstrates the described approach. Alternatively, you can handle the RadChart.ItemDataBound event and add custom legend items manually.
Sincerely yours,
Manuel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
It is not possible to instruct the control to automatically display the XAxis labels in the legend. When you are setting the Appearance.LegendDisplayMode=ChartSeriesLegendDisplayMode.ItemLabels you are instructing the chart to display the series item labels and not the axis labels in the legend items (that is if ChartSeries.DataLabelsColumn is set; otherwise it sets "Item1", Item2", etc. legend items).
Attached is a sample application that demonstrates the described approach. Alternatively, you can handle the RadChart.ItemDataBound event and add custom legend items manually.
Sincerely yours,
Manuel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Germaine
Top achievements
Rank 1
answered on 16 Oct 2008, 01:21 PM
Thanks for the example. However, can you provide an example that uses a data source (I use a sql datasource) and then sets the legend based on the values of a column, which is also used for the x axis labels. Below is my code:
Color[] barColors = new Color[15]
{
Color.Purple,
Color.SteelBlue,
Color.Aqua,
Color.Yellow,
Color.Navy,
Color.Green,
Color.Blue,
Color.Red,
Color.Pink,
Color.PowderBlue,
Color.PaleTurquoise,
Color.OrangeRed,
Color.Olive,
Color.Lime,
Color.LightSlateGray
};
int i = 0;
LBGChart.DataSourceID = "ChartDataSource";
LBGChart.DataBind();
LBGChart.Series[0].Name = "CategoryCount";
foreach (ChartSeriesItem item in LBGChart.Series[0].Items)
{
item.Appearance.FillStyle.MainColor = barColors[i++];
}
LBGChart.Series[0].Appearance.LegendDisplayMode = Telerik.Charting.ChartSeriesLegendDisplayMode.ItemLabels;
SQLDatasource:
SELECT
COUNT(cct.CategoryId) AS CategoryCount
, CategoryName
FROM tblComment com
INNER JOIN tblCommentCategory cct ON com.CommentId = cct.CommentId
INNER JOIN tblCategory cat ON cct.CategoryId = cat.CategoryId
WHERE
com.ProjectId = @projectId
AND (ClientID > CASE WHEN @ClientID=0 THEN '0' ELSE '999999999' END
OR ClientID=@ClientID)
GROUP BY CategoryName
ORDER BY CategoryCount DESC
I want to use the CategoryName values in the legend. Currently, it appears on the x axis.
Color[] barColors = new Color[15]
{
Color.Purple,
Color.SteelBlue,
Color.Aqua,
Color.Yellow,
Color.Navy,
Color.Green,
Color.Blue,
Color.Red,
Color.Pink,
Color.PowderBlue,
Color.PaleTurquoise,
Color.OrangeRed,
Color.Olive,
Color.Lime,
Color.LightSlateGray
};
int i = 0;
LBGChart.DataSourceID = "ChartDataSource";
LBGChart.DataBind();
LBGChart.Series[0].Name = "CategoryCount";
foreach (ChartSeriesItem item in LBGChart.Series[0].Items)
{
item.Appearance.FillStyle.MainColor = barColors[i++];
}
LBGChart.Series[0].Appearance.LegendDisplayMode = Telerik.Charting.ChartSeriesLegendDisplayMode.ItemLabels;
SQLDatasource:
SELECT
COUNT(cct.CategoryId) AS CategoryCount
, CategoryName
FROM tblComment com
INNER JOIN tblCommentCategory cct ON com.CommentId = cct.CommentId
INNER JOIN tblCategory cat ON cct.CategoryId = cat.CategoryId
WHERE
com.ProjectId = @projectId
AND (ClientID > CASE WHEN @ClientID=0 THEN '0' ELSE '999999999' END
OR ClientID=@ClientID)
GROUP BY CategoryName
ORDER BY CategoryCount DESC
I want to use the CategoryName values in the legend. Currently, it appears on the x axis.
0
Hi Germaine,
We have attached a modified sample application that achieves the desired functionality by handling the RadChart.BeforeLayout server-side event where the auto-generated legend items are cleared, and custom ones are added in their place; note that the XAxis data is databound as well by setting the XAxis.DataLabelsColumn property.
There is nothing specific to the datasource used in the example and it should be straightforward to use the same approach with a declarative datasource control as well.
Greetings,
Manuel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
We have attached a modified sample application that achieves the desired functionality by handling the RadChart.BeforeLayout server-side event where the auto-generated legend items are cleared, and custom ones are added in their place; note that the XAxis data is databound as well by setting the XAxis.DataLabelsColumn property.
There is nothing specific to the datasource used in the example and it should be straightforward to use the same approach with a declarative datasource control as well.
Greetings,
Manuel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Germaine
Top achievements
Rank 1
answered on 21 Oct 2008, 06:46 PM
When I past and customize the code provided in the example... the number and color coded circle do not show up on the same line. The numbers are listed first and the color coded bars follow. Is their a way to make the information show up in the same row?
0
Germaine
Top achievements
Rank 1
answered on 21 Oct 2008, 07:04 PM
The sample you gave me does not use a datasource. My questions become do you set the x-axis with:
LBGChart.PlotArea.XAxis.DataLabelsColumn = "CategoryCount";
and does this line remain the same:
LBGChart.PlotArea.XAxis.DataLabelsColumn = "CategoryCount";
and does this line remain the same:
LabelItem
legendItem = new LabelItem(axisItem.TextBlock.Text);
Lastly do I set the x and y axis column labels in the before layout event or on page load?
0
Hello Germaine,
There is nothing specific to using a declarative datasource, or a datatable as a RadChart.DataSource -- in both cases you are specifying column names either from the SQL select statement, or the datatable columns.
Indeed this line
would bind the XAxis item labels to the data from the "CategoryCount" column and the BeforeLayout event handler logic should work with no modifications when the chart is bound to a declarative datasource.
As a general rule -- the BeforeLayout event is suitable for final customization to the control prior layout calculations (in your case adding custom legend items and styling them) but setting the actual databinding logic should be performed on page load.
Sincerely yours,
Manuel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
There is nothing specific to using a declarative datasource, or a datatable as a RadChart.DataSource -- in both cases you are specifying column names either from the SQL select statement, or the datatable columns.
Indeed this line
LBGChart.PlotArea.XAxis.DataLabelsColumn = "CategoryCount"; |
would bind the XAxis item labels to the data from the "CategoryCount" column and the BeforeLayout event handler logic should work with no modifications when the chart is bound to a declarative datasource.
As a general rule -- the BeforeLayout event is suitable for final customization to the control prior layout calculations (in your case adding custom legend items and styling them) but setting the actual databinding logic should be performed on page load.
Sincerely yours,
Manuel
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Germaine
Top achievements
Rank 1
answered on 23 Oct 2008, 02:49 PM
Do you have an API for developers? My company purchased this for use with our websites. Customizing this radchart is becoming very difficult, in that, there is little documentation available for changes done on the programming side. I have posed many questions to your forum over the last week and still cannot get my chart to behave the way it its supposed to.
I have 2 columns from a database, totals and category name.
I want to color code each bar representing the category name.
I want to populate the legend with the category name and have the total in the same row.
I have received examples that use the before_layout event, which either fails to color code the bars or does not provide a legend with colors to match the category names and totals on the same line.
All the examples you have provided me thus far has failed to work.
Any help you can provide would be appreciated, as I am thinking in investing a tool that is much easier to use than the one I bought from your company.
I have 2 columns from a database, totals and category name.
I want to color code each bar representing the category name.
I want to populate the legend with the category name and have the total in the same row.
I have received examples that use the before_layout event, which either fails to color code the bars or does not provide a legend with colors to match the category names and totals on the same line.
All the examples you have provided me thus far has failed to work.
Any help you can provide would be appreciated, as I am thinking in investing a tool that is much easier to use than the one I bought from your company.
0
Hi Germaine ,
In addition to our online documentation, you can check our Self-paced tutorial as well as the Telerik Trainer.
I believe the last example, provided by my colleague Manuel covers your requirements with one exception -- the totals do not appear in the legend. Please, accept our apologies for this omission. I have attached an updated version of the example which shows data from two columns. Each bar has its own color code, the legend items colors match the bar colors for the corresponding category. The legend items text displays the category name along with the value for this category. I have also added an image, showing the chart at my end. Please, give this suggestion a try and let us know if the chart appears fine for you.
Greetings,
Ves
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
In addition to our online documentation, you can check our Self-paced tutorial as well as the Telerik Trainer.
I believe the last example, provided by my colleague Manuel covers your requirements with one exception -- the totals do not appear in the legend. Please, accept our apologies for this omission. I have attached an updated version of the example which shows data from two columns. Each bar has its own color code, the legend items colors match the bar colors for the corresponding category. The legend items text displays the category name along with the value for this category. I have also added an image, showing the chart at my end. Please, give this suggestion a try and let us know if the chart appears fine for you.
Greetings,
Ves
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.