I have a chart with 5 lines, I need to be able to do NullHandling.InterpolateSimple on 2 of my lines and then NullHandling.DontPlot on 3 of them. I assume the only way to do this is with a composite chart consisting of 5 different line charts with the appropriate NullHandling method set on each? If so, how do I create these separate line charts? I have messed w/this all day and can't even get 1 to draw :( My code I have is below...all I get is the axis but no line. What am I missing? And once i get this one line working do i just repeat all the code for the remaining 4 lines?
// // Dev Target //
DataTable dt = new DataTable(); dt.Columns.Add("Date", typeof(string)); dt.Columns.Add("Value", typeof(int)); dt.Rows.Add(new object[] { "10/31/2011", 2099}); dt.Rows.Add(new object[] { "11/08/2011", null}); dt.Rows.Add(new object[] { "11/15/2011", 2400 }); dt.Rows.Add(new object[] { "11/22/2011", null }); dt.Rows.Add(new object[] { "11/30/2011", 2800 }); dt.Rows.Add(new object[] { "12/07/2011", null }); dt.Rows.Add(new object[] { "12/15/2011", 2999 }); dt.Rows.Add(new object[] { "12/22/2011", null }); dt.Rows.Add(new object[] { "12/31/2011", 3250 });
// // First chart area //
ultraChart1.ChartType = ChartType.Composite;
ChartArea devTargetArea = new ChartArea(); ultraChart1.CompositeChart.ChartAreas.Add(devTargetArea); // // Axis... //
AxisItem xAxis = new AxisItem(); xAxis.OrientationType = AxisNumber.X_Axis; xAxis.DataType = AxisDataType.Numeric; xAxis.Labels.ItemFormatString = ""; xAxis.Labels.Orientation = TextOrientation.VerticalLeftFacing; xAxis.Extent = 40; ultraChart1.CompositeChart.ChartAreas[0].Axes.Add(xAxis);
AxisItem yAxis = new AxisItem(); yAxis.OrientationType = AxisNumber.Y_Axis; yAxis.DataType = AxisDataType.Numeric; yAxis.TickmarkStyle = AxisTickStyle.Smart; yAxis.Labels.HorizontalAlign = System.Drawing.StringAlignment.Near; yAxis.Labels.VerticalAlign = System.Drawing.StringAlignment.Near; yAxis.Labels.Layout.Behavior = AxisLabelLayoutBehaviors.Auto; yAxis.Labels.Visible = true; yAxis.Labels.ItemFormat = AxisItemLabelFormat.DataValue; yAxis.MajorGridLines.Visible = true; ultraChart1.CompositeChart.ChartAreas[0].Axes.Add(yAxis); // // Create the series //
NumericSeries devTargetSeries = new NumericSeries(); devTargetSeries.Data.DataSource = dt; devTargetSeries.Data.LabelColumn = "Date"; devTargetSeries.Data.ValueColumn = "Value"; ultraChart1.CompositeChart.Series.Add(devTargetSeries); ChartLayerAppearance devTargetLayer = new ChartLayerAppearance(); devTargetLayer.ChartType = ChartType.LineChart; devTargetLayer.ChartArea = ultraChart1.CompositeChart.ChartAreas[0]; devTargetLayer.AxisX = xAxis; devTargetLayer.AxisY = yAxis; devTargetLayer.Series.Add(devTargetSeries); ultraChart1.CompositeChart.ChartLayers.Add(devTargetLayer);
LineChartAppearance lcp = new LineChartAppearance(); lcp.DrawStyle = LineDrawStyle.Solid; lcp.MidPointAnchors = false; lcp.Thickness = 4; lcp.NullHandling = NullHandling.InterpolateSimple; devTargetLayer.ChartTypeAppearance = lcp;
Anyone?
I take it by the lack of response this isn't possible? I can't be the only one who's wanted a composite chart of all line charts and/or NullHandling different per line?
Ahhh thank you! That was it. So then for the rest of the lines I just have to add a series and and a layer for each, right?
Yes, that's correct.
Thanks for the help as I have this working now. But, I have a couple of cosmetic issues to iron out.
Below is the SS of what I have done w/the composite chart and then below that is the normally drawn line chart.
1) The TitleTop is getting drawn inside the chart area. Usually the chart is drawn, then there is some margin around the entire chart and the title would be drawn in the top whitespace, how can I do this here? (Compare w/the 2nd image)
2) Why is the X/Y axis border so thick, look to the right of the 7000 that line is thicker than normal. (Again, compare with the second image you will see the line is thinner)
3) Do you have to use that legend style when you have a composite chart? Can I make the legend look like the one in the 2nd image? This composite legend you can't even make out the color of the lines since they are so thin in the legend, and also there is no good place to draw it since it runs into the chart itself.
4) How can I make the dates along the X-Axis angled? I've messed w/orientation options and they don't seem to change the angle at all.
Thanks,
Lucas
Hello Lucas,
1. To avoid overlapping title with the chart area, you could set Bounds of the ChartArea, for example:
Rectangle bounds = new Rectangle(50, 100, 300, 300);
UltraChart1.CompositeChart.ChartAreas[0].Bounds = bounds;
The second parameter passed to the Rectangle constructor is the offset from the top border of the control.
2. You can use the LineThickness property of the axes: yAxis.LineThickness = 1;
3. The legend style depends on the chart type used in the corresponding layer. So if you want a legend like in your second screenshot, you could create a new hidden ChartLayer containing, for example AreaChart. Then select the same series used for your LineChart. And after that add a legend and link it to that layer. Now the legend should look as per your requirement.
4. You can achieve this using code, similar to the following:
xAxis.Labels.Orientation = TextOrientation.Custom;
xAxis.Labels.OrientationAngle = 30;
If you have any questions regarding the matter, please let me know.
Thanks a bunch Nikolay!
I figured out a couple of those things on my own, but the legend was still giving me trouble. I have it work 99% of how I want it now, I have just 2 cosmetic things left that if they can't be fixed I could live with but if they can be fixed that would be great.
1) Is there a way to add some spacing between these items in the legend and also make the boxes w/the colors bigger? (Like in the screenshot I posted a couple replies ago) This is what I have now...would this be some FillSceneGraph stuff to change it?
I'd like it to look like this..
2) What are the line colors and opacity settings for these green, blue, and yellow shown here, do you know? These are the default colors when i create a line chart automatically. I've tried a few and they don't seem correct, like CornflowerBlue for the blue and GoldenRod for the yellow with opacity setting of 98
This is what I want...
This is what I'm getting
Forgot to write back but I got everything working how I needed. Thank you for your help!
Hi DmgInc,
If you have any further questions regarding the matter, please let me know.
Hello DmgInc,
A possible approach to edit the legend appearance would be to handle the ChartDrawItem event and set the size and position of each box:
protected void UltraChart1_ChartDrawItem(object sender, Infragistics.UltraChart.Shared.Events.ChartDrawItemEventArgs e)
{
if (e.Primitive.Path == "Legend")
Box b = (Box)e.Primitive;
b.rect.Width = 15;
b.rect.Height = 15;
b.rect.X += 10;
}
After that, you can get and position each separate label in the legend in the FillSceneGraph event like this:
protected void UltraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
foreach (Primitive p in e.SceneGraph)
if (p.GetType().ToString() == "Infragistics.UltraChart.Core.Primitives.Text")
Text t = (Text)p;
switch(t.GetTextString())
case "Series1":
t.bounds.X += 50;
break;
case "Series2":
default:
To style the line appearance, you should create a PaintElement and add it to your Series:
PaintElement pe = new PaintElement();
pe.Fill = Color.Red;
pe.FillOpacity = 150;
devTargetSeries.PEs.Add(pe);
Please let me know if you have any questions regarding the matter.