Forums Ultimate UI for Windows Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
JIHUN KIM
30
I'd like to change the chart.
posted

Hello.
Please check the attached file.
I am making a chart of number 1 and I want to make chart number 2.
I want the beginning of the chart to be off axis.
The line chart is displayed in the middle of the bar chart.
And I want those values to be shown on the chart.
Let me show you the code for Chart 1.
I'd appreciate it if you could tell me what to do.

Chart1 Chart1

Chart2

            this.uniChart1.CompositeChart.ChartLayers.Clear();
            this.uniChart1.CompositeChart.Legends.Clear();
            this.uniChart1.CompositeChart.ChartAreas.Clear();
            this.uniChart1.CompositeChart.Series.Clear();

            this.uniChart1.TitleTop.Visible = false;
            this.uniChart1.TitleLeft.Visible = false;
            this.uniChart1.TitleRight.Visible = false;
            this.uniChart1.TitleBottom.Visible = false;

            this.uniChart1.ChartType = ChartType.Composite;

            ChartArea area = new ChartArea();
           
            this.uniChart1.CompositeChart.ChartAreas.Add(area);
           

            AxisItem xAxisColumn = new AxisItem(this.uniChart1, AxisNumber.X_Axis);
            AxisItem xAxisLine = new AxisItem(this.uniChart1, AxisNumber.X_Axis);
            AxisItem yAxis = new AxisItem(this.uniChart1, AxisNumber.Y_Axis);
            AxisItem yAxisLine = new AxisItem(this.uniChart1, AxisNumber.Y2_Axis);

            xAxisColumn.DataType = AxisDataType.String;
            xAxisColumn.SetLabelAxisType = SetLabelAxisType.GroupBySeries;
            xAxisColumn.Labels.ItemFormat = AxisItemLabelFormat.ItemLabel;
          

            xAxisLine.DataType = AxisDataType.String;
            xAxisLine.SetLabelAxisType = SetLabelAxisType.ContinuousData;
           
            yAxis.DataType = AxisDataType.Numeric;
            yAxis.Labels.ItemFormat = AxisItemLabelFormat.DataValue;
           
            yAxisLine.DataType = AxisDataType.Numeric;
            yAxisLine.Labels.ItemFormat = AxisItemLabelFormat.DataValue;
           
            area.Axes.Add(xAxisColumn);
            area.Axes.Add(xAxisLine);
            area.Axes.Add(yAxis);
            area.Axes.Add(yAxisLine);

            NumericSeries seriesColumn = new NumericSeries();
            seriesColumn.Label = "plan";
            seriesColumn.PEs.Add(new PaintElement(Color.LightCoral));
            seriesColumn.Data.DataSource = dt;
            seriesColumn.Data.LabelColumn = "MM";
            seriesColumn.Data.ValueColumn = "plan_amt";

            NumericSeries seriesColumn2 = new NumericSeries();
            seriesColumn2.Label = "result";
            seriesColumn2.PEs.Add(new PaintElement(Color.Aquamarine));
            seriesColumn2.Data.DataSource = dt;
            seriesColumn2.Data.LabelColumn = "MM";
            seriesColumn2.Data.ValueColumn = "result_amt";

            NumericSeries seriesLine = new NumericSeries();
            seriesLine.Label = "achieve_rate";
            seriesLine.PEs.Add(new PaintElement(Color.Blue));
            seriesLine.Data.DataSource = dt;
            seriesLine.Data.LabelColumn = "MM";
            seriesLine.Data.ValueColumn = "achieve_rate";

            this.uniChart1.Series.AddRange(new Infragistics.UltraChart.Data.Series.ISeries[] { seriesLine, seriesColumn, seriesColumn2 });

            ChartLayerAppearance columnLayer = new ChartLayerAppearance();
            columnLayer.AxisX = xAxisColumn;
            columnLayer.AxisY = yAxis;
            columnLayer.ChartArea = area;
            columnLayer.ChartType = ChartType.ColumnChart;
            columnLayer.LegendItem = LegendItemType.Point;
            columnLayer.Series.Add(seriesColumn);
            columnLayer.Series.Add(seriesColumn2);
            columnLayer.SwapRowsAndColumns = true;

            ChartLayerAppearance lineLayer = new ChartLayerAppearance();
            lineLayer.AxisX = xAxisLine;
            lineLayer.AxisY = yAxisLine;
            lineLayer.ChartArea = area;
            lineLayer.ChartType = ChartType.LineChart;
            lineLayer.LegendItem = LegendItemType.Series;
            lineLayer.Series.Add(seriesLine);

            CompositeLegend legend = new CompositeLegend();
            legend.BoundsMeasureType = MeasureType.Percentage;
            legend.ChartLayers.Add(columnLayer);
            legend.ChartLayers.Add(lineLayer);

            this.uniChart1.CompositeChart.Legends.Add(legend);
            this.uniChart1.CompositeChart.ChartLayers.Add(columnLayer);
            this.uniChart1.CompositeChart.ChartLayers.Add(lineLayer);
            this.uniChart1.ColumnChart.SeriesSpacing = 1;
            this.uniChart1.Legend.Visible = true;

  • 960
    Suggested Answer
    Offline posted

    Hello JIHUN KIM,


    Thank you for posting Infragistics Forum.


    I've investigated your inquiry about how to make a space between axis and columns and how to plot datapoints of line chart at the middle of the column.

    As to making a space between axis and columns, you might want to use axis' Margin property:
    https://ko.infragistics.com/help/winforms/chart-axis-margins

    [Sample Codes]
        xAxisColumn.Margin.Near.MarginType = LocationType.Pixels;
        xAxisColumn.Margin.Near.Value = 10;
        xAxisColumn.Margin.Far.MarginType = LocationType.Pixels;
        xAxisColumn.Margin.Far.Value =10;

        xAxisLine.Margin.Near.MarginType = LocationType.Pixels;
        xAxisLine.Margin.Near.Value = 10;
        xAxisLine.Margin.Far.MarginType = LocationType.Pixels;
        xAxisLine.Margin.Far.Value = 10;

    And regarding the second question about how to plot datapoints of line chart at the middle of the column, there is not a built-in property or method. Instead, you could use FillSceneGraph event in which event handler you would get a list of primitive boxes for the column chart, calculate middle points of each group, get a list of primitive polylines for the line chart and changet the point of each datapoint of the line chart to the middle point.


    Here is a general information about FillSceneGraph event:
    https://ko.infragistics.com/help/winforms/chart-fillscenegraph-event

    And the code would be like this:
            private void uniChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
            {
                // Get a list of primitive boxes for the column chart
                List<Box> columnBoxes = e.SceneGraph.OfType<Box>().Where(b => b.Layer is ColumnLayer).OrderBy(b => b.rect.X).ToList();
                if (columnBoxes.Count == 0) return;

                // List of int for middle points of each group
                List<int> middlePointList = new List<int>();

                // Calculate middle points of each group
                // Assuming that each group has two columns
                for(int i = 0; i < columnBoxes.Count; i += 2)
                {
                    // Calculate this middle point
                    // Formula: (x1 + x2) / 2
                    int x1 = columnBoxes[i].rect.X;
                    int x2 = columnBoxes[i + 1].rect.X + columnBoxes[i + 1].rect.Width;
                    middlePointList.Add((int)((double)(x1 + x2) / 2.0));
                }

                // Get a list of primitive Polyline for the line chart
                List<Polyline> line = e.SceneGraph.OfType<Polyline>().ToList();
                if (line.Count == 0) return;

                // Change the point of each data point of the line chart to its middle point
                for (int i = 0; i < line[0].points.Length; i++)
                {
                    line[0].points[i].point.X = middlePointList[i];
                }
            }

    Could you give them a try?

    If you need further assistance, please let me know.

    4578.WindowsFormsApp1.zip