Hi support team,
I need to write a chart showing a pair of data group as follows.
After looking through QnA, I found codesnippet writing a whole chart.
But I can't configure the legend in the source code.
I want to set the legend on the top-left of the chart. but the source code config doesn't work for it.
I configured the chart in form aspx with basic point colors and did most of them in cs file.
=========================================================================================
<igchart:UltraChart ID="ultraChart1" runat="server" ChartType="StackColumnChart" EmptyChartText="Data Not Available. Please call UltraChart.Data.DataBind() after setting valid Data.DataSource" Version="18.1" BackgroundImageFileName="" Height="446px" Width="877px"> <Legend Location="Top" SpanPercentage="8" Visible="True" DataAssociation="ColumnData" > <Margins Bottom="0" Left="40" Top="0" Right="440" /> </Legend> <ColorModel ColorBegin="DarkGoldenrod" ColorEnd="Navy" AlphaLevel="150" ModelStyle="CustomSkin" Grayscale="False" Scaling="None"> <Skin ApplyRowWise="False"> <PEs> <igchartprop:PaintElement FillGradientStyle="Horizontal" FillOpacity="255" FillStopOpacity="255" ElementType="Gradient" Fill="108, 162, 36" Hatch="None" Texture="LightGrain" ImageFitStyle="StretchedFit" FillStopColor="148, 244, 17" StrokeOpacity="255" ImagePath="" Stroke="Black" StrokeWidth="0" ImageWrapMode="Tile" TextureApplication="Normal"> </igchartprop:PaintElement> <igchartprop:PaintElement FillGradientStyle="Horizontal" FillOpacity="255" FillStopOpacity="255" ElementType="Gradient" Fill="7, 108, 176" Hatch="None" Texture="LightGrain" ImageFitStyle="StretchedFit" FillStopColor="53, 200, 255" StrokeOpacity="255" ImagePath="" Stroke="Black" StrokeWidth="0" ImageWrapMode="Tile" TextureApplication="Normal"></igchartprop:PaintElement> <igchartprop:PaintElement FillGradientStyle="Horizontal" FillOpacity="255" FillStopOpacity="255" ElementType="Gradient" Fill="230, 190, 2" Hatch="None" Texture="LightGrain" ImageFitStyle="StretchedFit" FillStopColor="255, 255, 81" StrokeOpacity="255" ImagePath="" Stroke="Black" StrokeWidth="0" ImageWrapMode="Tile" TextureApplication="Normal"></igchartprop:PaintElement> <igchartprop:PaintElement FillGradientStyle="Horizontal" FillOpacity="255" FillStopOpacity="255" ElementType="Gradient" Fill="215, 0, 5" Hatch="None" Texture="LightGrain" ImageFitStyle="StretchedFit" FillStopColor="254, 117, 16" StrokeOpacity="255" ImagePath="" Stroke="Black" StrokeWidth="0" ImageWrapMode="Tile" TextureApplication="Normal"></igchartprop:PaintElement> <igchartprop:PaintElement FillGradientStyle="Horizontal" FillOpacity="255" FillStopOpacity="255" ElementType="Gradient" Fill="252, 122, 10" Hatch="None" Texture="LightGrain" ImageFitStyle="StretchedFit" FillStopColor="255, 108, 66" StrokeOpacity="255" ImagePath="" Stroke="Black" StrokeWidth="0" ImageWrapMode="Tile" TextureApplication="Normal"> </igchartprop:PaintElement> </PEs> </Skin> </ColorModel> </igchart:UltraChart>
protected void Page_Load(object sender, EventArgs e) { //LoadOrg(); LoadNew(); }
protected void LoadNew() { this.ultraChart1.ChartType = ChartType.Composite; SetLegend();
ChartArea area = new ChartArea(); this.ultraChart1.CompositeChart.ChartAreas.Add(area);
AxisItem xAxis1 = new AxisItem(ultraChart1, AxisNumber.X_Axis); AxisItem xAxis2 = new AxisItem(ultraChart1, AxisNumber.X_Axis); AxisItem yAxis = new AxisItem(ultraChart1, AxisNumber.Y_Axis); xAxis1.DataType = AxisDataType.String; xAxis2.DataType = AxisDataType.String; xAxis1.Margin.Far.Value = 20; xAxis2.Margin.Near.Value = 20; area.Axes.Add(xAxis1); area.Axes.Add(xAxis2); area.Axes.Add(yAxis);
List<string> titleList = new List<string>(); titleList.Add("대기어"); titleList.Add("쿠션멘트"); titleList.Add("정중표현");
double[] arr = new double[3]; List<double[]> dataList1 = new List<double[]>(); List<double[]> dataList2 = new List<double[]>(); double[] arr1 = { 96.4, 2.2, 1.4 }; double[] arr2 = { 99.4, 0.6, 0.0 }; double[] arr3 = { 95.1, 4.0, 0.8 }; dataList1.Add(arr1); dataList1.Add(arr2); dataList1.Add(arr3);
double[] arr4 = { 91.5, 6.0, 2.5 }; double[] arr5 = { 97.1, 2.9, 0.0 }; double[] arr6 = { 89.2, 9.3, 1.5 }; dataList2.Add(arr4); dataList2.Add(arr5); dataList2.Add(arr6);
xAxis1.Margin.Far.Value = 100/(dataList1.Count*3-1); xAxis2.Margin.Near.Value = 100 / (dataList1.Count * 3 - 1);
ChartLayerAppearance layer1 = new ChartLayerAppearance(); ChartLayerAppearance layer2 = new ChartLayerAppearance(); layer1.ChartType = layer2.ChartType = ChartType.StackColumnChart; layer1.ChartArea = layer2.ChartArea = area; layer1.AxisY = layer2.AxisY = yAxis; layer1.AxisX = xAxis1; layer2.AxisX = xAxis2;
SetLegend();
AddSeries("2014년\n2분기", dataList1, layer1); AddSeries("2015년\n2분기", dataList2, layer2);
((ColumnChartAppearance)layer1.ChartTypeAppearance).ColumnSpacing = 2; ((ColumnChartAppearance)layer2.ChartTypeAppearance).ColumnSpacing = 2;
SetLegend(); this.ultraChart1.CompositeChart.ChartLayers.Add(layer1); this.ultraChart1.CompositeChart.ChartLayers.Add(layer2);
AddColumnLabel(titleList);
}
void SetLegend() { ultraChart1.Legend.Location = LegendLocation.Top; //<Margins Bottom="0" Left="40" Right="600" Top="0" /> //ultraChart1.Legend.Margins.Bottom = 0; ultraChart1.Legend.Margins.Left = 40; ultraChart1.Legend.Margins.Right = 600; ultraChart1.Legend.Margins.Top = 0; ultraChart1.Legend.SpanPercentage = 50; ultraChart1.Legend.FontColor = Color.Yellow; }
void AddSeries(string title, List<double[]> dataList, ChartLayerAppearance layer) { //foreach (double[] item in dataList) for (int i = 0; i < dataList.Count;i++ ) { NumericSeries ns = new NumericSeries(); ns.Points.Add(new NumericDataPoint(dataList[i][0], "표준", false)); ns.Points.Add(new NumericDataPoint(dataList[i][1], "개선필요", false)); ns.Points.Add(new NumericDataPoint(dataList[i][2], "개선시급", false));
ns.Label = title; layer.Series.Add(ns); this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { ns });
ultraChart1.CompositeChart.Legends.Add(GetLegend(ns.Points[0], layer)); ultraChart1.CompositeChart.Legends.Add(GetLegend(ns.Points[1], layer)); ultraChart1.CompositeChart.Legends.Add(GetLegend(ns.Points[2], layer)); } }
CompositeLegend GetLegend(NumericDataPoint ndp, ChartLayerAppearance layer) { layer.LegendItem = LegendItemType.Point; CompositeLegend myLegend = new CompositeLegend(); myLegend.ChartLayers.Add(layer); myLegend.Bounds = new Rectangle(0, 1, 10, 50); myLegend.BoundsMeasureType = MeasureType.Percentage; myLegend.PE = ndp.PE; //myLegend.PE.ElementType = PaintElementType.None; //myLegend.PE.FillGradientStyle = GradientStyle.ForwardDiagonal; //myLegend.PE.FillStopColor = Color.Transparent; //myLegend.Border.CornerRadius = 0; //myLegend.Border.Thickness = 2; return myLegend; }
void AddColumnLabel(List<string> columnList) { for (int i = 0; i < columnList.Count; i++)// columnstring columnName in columnList) { BoxAnnotation label = new BoxAnnotation(); label.Text = columnList[i]; label.Border.Color = Color.Transparent; label.Location.Type = LocationType.DataValues; label.Location.ValueX = 1+3*i; label.Location.ValueY = -2; label.TextStyle.Dy = 30;
this.ultraChart1.Annotations.Annotations.Add(label); } }
protected void LoadOrg() { this.ultraChart1.ChartType = ChartType.Composite; ChartArea area = new ChartArea(); this.ultraChart1.CompositeChart.ChartAreas.Add(area);
NumericSeries s1 = new NumericSeries(); s1.Points.Add(new NumericDataPoint(5, "pt1", false)); s1.Points.Add(new NumericDataPoint(3, "pt2", false)); s1.Label = "series1";
NumericSeries s2 = new NumericSeries(); s2.Points.Add(new NumericDataPoint(12, "pt1", false)); s2.Points.Add(new NumericDataPoint(17, "pt2", false)); s2.Label = "series2";
NumericSeries s3 = new NumericSeries(); s3.Points.Add(new NumericDataPoint(6, "pt1", false)); s3.Points.Add(new NumericDataPoint(1, "pt2", false)); s3.Label = "series3";
NumericSeries s4 = new NumericSeries(); s4.Points.Add(new NumericDataPoint(14, "pt1", false)); s4.Points.Add(new NumericDataPoint(13, "pt2", false)); s4.Label = "series4";
//this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { s1, s2, s3, s4 }); this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { s1}); this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { s2 }); this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { s3 }); this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { s4 }); this.ultraChart1.CompositeChart.Series.AddRange(new ISeries[] { s4 });
layer1.Series.Add(s1); layer1.Series.Add(s3); layer2.Series.Add(s2); layer2.Series.Add(s4);
this.ultraChart1.CompositeChart.ChartLayers.Add(layer1); this.ultraChart1.CompositeChart.ChartLayers.Add(layer2);
BoxAnnotation label1 = new BoxAnnotation(); label1.Text = "group1"; label1.Border.Color = Color.Transparent; label1.Location.Type = LocationType.DataValues; label1.Location.ValueX = 1; label1.Location.ValueY = 0; label1.TextStyle.Dy = 30;
BoxAnnotation label2 = new BoxAnnotation(); label2.Text = "group2"; label2.Border.Color = Color.Transparent; label2.Location.Type = LocationType.DataValues; label2.Location.ValueX = 4; label2.Location.ValueY = 0; label2.TextStyle.Dy = 30;
this.ultraChart1.Annotations.Annotations.Add(label1); this.ultraChart1.Annotations.Annotations.Add(label2); }
protected void WebDataTree1_NodeExpanded(object sender, Infragistics.Web.UI.NavigationControls.DataTreeNodeEventArgs e) {
} }