Hello,
I want to design a stacked column chart like below one. Is it possible?. If is it possible then how can i acheive this. It's very urgent. so, please kindly share your ideas.
Thanks
Creating this chart type is mostly fairly simple, but it will have some tricky parts to it because you're creating groups with varied number of columns. The chart itself is a StackColumnChart with ColumnSpacing set to 1. Here's some info on the chart type:http://help.infragistics.com/NetAdvantage/ASPNET/2010.3/CLR4.0/?page=Chart_Working_with_2D_Stacked_Column_Chart_Data.html
The hard part is to draw the Type1, Type2, etc. labels because there's no way to extract that from your data. To accomplish this, you should either put static text on the chart using annotations or handle FillSceneGraph event and insert custom text and/or shapes into the chart's SceneGraph. There's an example of the latter, outlined in this help link:http://help.infragistics.com/NetAdvantage/ASPNET/2010.3/CLR4.0/?page=Chart_Modify_Scene_Graph_Using_FillSceneGraph_Event.html
Hi,
Thanks for your reply. Please refer the below figure.
What I need as the actual output is in Fig A . I either get Fig B or Fig C as the output after customization. I am not able to break the text into two halves on the X-Axis when it is in vertical mode More over its difficul to adjust the width of the coulmn. Is there any possibility to leave some space between the first coulmn and the y axis Note the space between the margin and the column from Fig A and Fig B. Kindly help me.
I have quoted the code snippet to help you further.
chartCOM.TitleTop.HorizontalAlign = Drawing.StringAlignment.Center
chartCOM.DataBind()
chartCOM.ColorModel.ModelStyle = Styles.ColorModels.CustomLinear chartCOM.ColorModel.CustomPalette = New Drawing.Color() {Drawing.Color.Red, Drawing.Color.Yellow, Drawing.Color.Green}
chartCOM.ColumnChart.ColumnSpacing = 3
chartCOM.ColumnChart.SeriesSpacing = 3
chartCOM.ColumnChart.NullHandling = Styles.NullHandling.Zero
chartCOM.Axis.Y.TickmarkStyle = Styles.AxisTickStyle.Smart chartCOM.Axis.X.Labels.ItemFormatString = "ITEM_LABEL\n;" chartCOM.Axis.X.Labels.SeriesLabels.Orientation = Styles.TextOrientation.Custom chartCOM.Axis.X.Labels.Layout.Behavior = Styles.AxisLabelLayoutBehaviors.UseCollection chartCOM.Axis.X.Labels.SeriesLabels.Layout.Behavior = Styles.AxisLabelLayoutBehaviors.UseCollection
Thanks for your reply :)
to create space between the start of the x axis and the y axis, use the axis margin. For splitting up the text label, I would suggest using a custom label renderer. It's much more flexible than the layout behaviors. Here's an example: private void Form1_Load(object sender, EventArgs e){ table = new DataTable(); table.Columns.Add("Label", typeof(string)); table.Columns.Add("Val1", typeof(double)); table.Columns.Add("Val2", typeof(double)); table.Columns.Add("Val3", typeof(double));
table.Rows.Add(new object[] { "2010 more text", 10, 15, 15 }); table.Rows.Add(new object[] { "2011 more text", 10, 10, 10 }); table.Rows.Add(new object[] { "2012 more text", 30, 20, 30 });
ultraChart1.ChartType = ChartType.StackColumnChart; ultraChart1.ColumnChart.ColumnSpacing = 1;
ultraChart1.Axis.X.Margin.Near.Value = 15; ultraChart1.Axis.X.Margin.Near.MarginType = LocationType.Pixels;
Hashtable labelHash = new Hashtable(); labelHash.Add("CUSTOM", new MyLabelRenderer()); ultraChart1.LabelHash = labelHash; ultraChart1.Axis.X.Labels.SeriesLabels.FormatString = "<CUSTOM>";
ultraChart1.Data.DataSource = table; ultraChart1.Data.DataBind();}
public class MyLabelRenderer : IRenderLabel{ public string ToString(Hashtable context) { string label = (string)context["SERIES_LABEL"]; label = label.Replace(' ', '\n'); return label; }}
Thanks. It's working. But still we get Horizontal aligned text in the X axis. we need to show the Vertical aligned Text in the X axis and also draw the line (or) set any property to increase line thickness between the X axis and the margin[Pls refer the below figure].
ultraChart1.Axis.X.Labels.SeriesLabels.Orientation = TextOrientation.VerticalLeftFacing;
Note, that you won't be able to preserve the central alignment, unless you resort to formatting tricks, such as inserting spaces and tabs in the label string before creating a line break.
Hi Max,
Thanks for the code. It has proven to be quite helpful. I have used the same code above to show a stacked column chart for each month of the year and data corresponding to them.
However I am not able to edit the Y Axis. How do I do this? Also can you please share the code to create a legend for this kind of composite chart. Example of my code is below:
String myconnstring;
SqlConnection myConn = new SqlConnection(myconnstring);
myConn.Open();
DataTable table = new DataTable();
DataTable dt = new DataTable();
DataSet ds = new DataSet();
dtime = System.
DateTime.Now;
String datet = dtime.ToString("MMMM");
SqlDataAdapter da = new SqlDataAdapter("exec dialerrep.findMonths", myConn);
da.Fill(table);
da.Fill(ds);
int mycols = table.Columns.Count;
dt.Columns.Add(
"Label", typeof(string));
for (int i = 1; i < mycols; i++)
{
"Val" + i, typeof(int));
}
int j = 0;
foreach (DataRow dr in ds.Tables[0].Rows)
dt.Rows.Add(
new object[] {dr[j]});
ultraChart1.ChartType =
ultraChart1.ColumnChart.ColumnSpacing = 1;
area.Bounds =
new Rectangle(10, 10, 80, 80);
area.BoundsMeasureType =
MeasureType.Percentage;
ultraChart1.Axis.X.Margin.Near.MarginType =
LocationType.DataValues;
labelHash.Add(
"CUSTOM", new MyLabelRenderer());
ultraChart1.LabelHash = labelHash;
ultraChart1.Axis.X.Labels.SeriesLabels.FormatString =
"<CUSTOM>";
ultraChart1.Axis.X.Labels.SeriesLabels.Orientation =
TextOrientation.VerticalLeftFacing;
ultraChart1.Axis.Y.Labels.SeriesLabels.FormatString =
"<DATA_VALUE:##>";
ultraChart1.Axis.Y2.Labels.SeriesLabels.FormatString = "<DATA_VALUE:##>";
ultraChart1.Data.DataSource = table;
ultraChart1.Data.DataBind();
Great! that worked! thanks!
Make sure chart.Axis.Y.Labels.HorizontalAlign is set to Far
Great! Thanks that worked. The chart comes up beautifully now except for the Y Axis... the data points still seem to be merged with the X Axis itself... is there a way to move the data points a little to the left so that they dont intersect with the axis?
I think you're seeing the extra axis labels and the extra axes, because you have made them visible either somewhere else in code, or in the designer. I suggest resetting axis properties, or setting Y2 and X2 axes to not visible.Here's a simple code example that generates a stacked column chart with a legend:DataTable dt = new DataTable();dt.Columns.Add("Value1", typeof(int));dt.Columns.Add("Value2", typeof(int));dt.Columns.Add("Value3", typeof(int));dt.Columns.Add("Label", typeof(string));
dt.Rows.Add(new object[] { 1, 1, 1, "Jan" });dt.Rows.Add(new object[] { 2, 1, 2, "Feb" });dt.Rows.Add(new object[] { 4, 4, 2, "Mar" });dt.Rows.Add(new object[] { 1, 3, 1, "Apr" });
ultraChart1.ChartType = ChartType.StackColumnChart;ultraChart1.ColumnChart.ColumnSpacing = 1;
ultraChart1.Axis.X.Labels.SeriesLabels.Orientation = TextOrientation.VerticalLeftFacing;ultraChart1.Axis.Y.Labels.ItemFormatString = "<DATA_VALUE:0>";
ultraChart1.Legend.Visible = true;
ultraChart1.Data.DataSource = dt;ultraChart1.Data.DataBind();
Please check out the attached chart. Currently the Y Axis shows decimal places which I need to remove and comes on both sides of the graph whereas I want it only on the left.
Also there seems to be several words that are coming on top of the graph by default (right above the 698). I am unsure as to why this is happening.
And I am not able to see the default legend in my chart too. I have attached the code I am using in my previous post.
Please advise. Thanks again!
Sharad