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
25
Line graph plotting miss away from the vertical grid
posted

Hi,

I'd spend days to address this issue but failed.

I have a timer with interval of 1000. I'm going to plot x,y into this scatter chart (connected with line)

However, I discovered that the points plotted as my timer start to fill in with random number, it never plot exactly at the vertical grid. Sometimes it will bit towards the right of the vertical line.

If I use zoom in and scroll, it also causes the plot deviates from the vertical line.

The other issue is, tooltip within the chart area only allow me to view the value of Y, how can I view the value of X, Y also?

 

Attached is the code behind.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

using

 

 

 

System;

using

 

 

 

System.Collections.Generic;

using

 

 

 

System.ComponentModel;

using

 

 

 

System.Data;

using

 

 

 

System.Drawing;

using

 

 

 

System.Linq;

using

 

 

 

System.Text;

using

 

 

 

System.Windows.Forms;

using

 

 

 

Infragistics.UltraChart.Shared.Styles;

using

 

 

 

Infragistics.UltraChart.Resources.Appearance;

using

 

 

 

Infragistics.UltraChart.Core.Layers;

namespace

 

 

 

LineChart

{

 

 

 

public partial class LineSample :

Form

{

 

 

 

AxisItem

axisX;

 

 

 

int

i;

 

 

 

XYSeries

series1, series2;

 

 

 

public

LineSample()

{

InitializeComponent();

}

 

 

 

private void LineSample_Load(object sender, EventArgs

e)

{

 

 

 

this.ultraChart1.ChartType = ChartType

.Composite;

 

 

 

this.ultraChart1.Axis.X.ScrollScale.Visible = true

;

 

 

 

this

.ultraChart1.Axis.X.ScrollScale.Scroll = 1.0;

 

 

 

ChartArea myChartArea = new ChartArea

();

 

 

 

this

.ultraChart1.CompositeChart.ChartAreas.Add(myChartArea);

 

 

 

AxisItem axisY = new AxisItem

();

axisY.OrientationType =

 

 

AxisNumber

.Y_Axis;

axisY.DataType =

 

 

AxisDataType

.Numeric;

axisY.Labels.ItemFormatString =

 

 

"<DATA_VALUE:#>"

;

axisX =

 

 

new AxisItem

();

axisX.OrientationType =

 

 

AxisNumber

.X_Axis;

axisX.DataType =

 

 

AxisDataType

.Numeric;

axisX.Labels.ItemFormatString =

 

 

"<DATA_VALUE:#>"

;

axisX.Labels.Orientation =

 

 

TextOrientation

.VerticalLeftFacing;

axisX.ScrollScale.Scroll = 1.0;

axisX.ScrollScale.Visible =

 

 

true

;

axisX.TickmarkInterval = 1;

axisX.TickmarkStyle =

 

 

AxisTickStyle

.DataInterval;

myChartArea.Axes.Add(axisY);

myChartArea.Axes.Add(axisX);

series1 =

 

 

new XYSeries

();

series2 =

 

 

new XYSeries

();

series1.Label =

 

 

"Series 1"

;

series2.Label =

 

 

"Series 2"

;

 

 

 

this

.ultraChart1.CompositeChart.Series.Add(series1);

 

 

 

this

.ultraChart1.CompositeChart.Series.Add(series2);

series1.PEs.Add(

 

 

new PaintElement(Color

.Green));

series2.PEs.Add(

 

 

new PaintElement(Color

.Red));

 

 

 

ChartLayerAppearance myScatterLayer = new ChartLayerAppearance

();

myScatterLayer.ChartType =

 

 

ChartType

.ScatterChart;

((

 

 

ScatterChartAppearance)myScatterLayer.ChartTypeAppearance).ConnectWithLines = true

;

 

 

 

//((ScatterChartAppearance)myScatterLayer.ChartTypeAppearance).Icon = SymbolIcon.Circle;

 

 

 

//((ScatterChartAppearance)myScatterLayer.ChartTypeAppearance).IconSize = SymbolIconSize.Medium;

myScatterLayer.ChartArea = myChartArea;

myScatterLayer.AxisX = axisX;

myScatterLayer.AxisY = axisY;

myScatterLayer.Series.Add(series1);

myScatterLayer.Series.Add(series2);

 

 

 

this

.ultraChart1.CompositeChart.ChartLayers.Add(myScatterLayer);

 

 

 

 

CompositeLegend myLegend = new CompositeLegend

();

myLegend.ChartLayers.Add(myScatterLayer);

myLegend.Bounds =

 

 

new Rectangle

(0, 75, 20, 25);

myLegend.BoundsMeasureType =

 

 

MeasureType

.Percentage;

myLegend.PE.ElementType =

 

 

PaintElementType

.Gradient;

myLegend.PE.FillGradientStyle =

 

 

GradientStyle

.ForwardDiagonal;

myLegend.PE.Fill =

 

 

Color

.CornflowerBlue;

myLegend.PE.FillStopColor =

 

 

Color

.Transparent;

myLegend.Border.CornerRadius = 10;

myLegend.Border.Thickness = 0;

 

 

 

this

.ultraChart1.CompositeChart.Legends.Add(myLegend);

}

 

 

 

private void timer1_Tick_1(object sender, EventArgs

e)

{

i += 1;

 

 

 

Random rand = new Random

();

series1.Points.Add(

 

 

new XYDataPoint(i, rand.Next(30), "Point A", false

));

series2.Points.Add(

 

 

new XYDataPoint(i, rand.Next(28), "Point B", false

));

  • 25
    posted

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Windows.Forms;
    using Infragistics.UltraChart.Shared.Styles;
    using Infragistics.UltraChart.Resources.Appearance;
    using Infragistics.UltraChart.Core.Layers;

    namespace LineChart
    {
        public partial class LineSample : Form
        {
            AxisItem axisX;
            int i;
            XYSeries series1, series2;
            public LineSample()
            {
                InitializeComponent();
            }

            private void LineSample_Load(object sender, EventArgs e)
            {
                this.ultraChart1.ChartType = ChartType.Composite;
                this.ultraChart1.Axis.X.ScrollScale.Visible = true;
                this.ultraChart1.Axis.X.ScrollScale.Scroll = 1.0;
                ChartArea myChartArea = new ChartArea();
                this.ultraChart1.CompositeChart.ChartAreas.Add(myChartArea);
                AxisItem axisY = new AxisItem();
                axisY.OrientationType = AxisNumber.Y_Axis;
                axisY.DataType = AxisDataType.Numeric;
                axisY.Labels.ItemFormatString = "<DATA_VALUE:#>";

                axisX = new AxisItem();
                axisX.OrientationType = AxisNumber.X_Axis;
                axisX.DataType = AxisDataType.Numeric;
                axisX.Labels.ItemFormatString = "<DATA_VALUE:#>";
                axisX.Labels.Orientation = TextOrientation.VerticalLeftFacing;

                axisX.ScrollScale.Scroll = 1.0;
                axisX.ScrollScale.Visible = true;
                axisX.TickmarkInterval = 1;
                axisX.TickmarkStyle = AxisTickStyle.DataInterval;

                myChartArea.Axes.Add(axisY);
                myChartArea.Axes.Add(axisX);
                series1 = new XYSeries();
                series2 = new XYSeries();
                series1.Label = "Series 1";
                series2.Label = "Series 2";
                this.ultraChart1.CompositeChart.Series.Add(series1);
                this.ultraChart1.CompositeChart.Series.Add(series2);

                series1.PEs.Add(new PaintElement(Color.Green));
                series2.PEs.Add(new PaintElement(Color.Red));

                ChartLayerAppearance myScatterLayer = new ChartLayerAppearance();
                myScatterLayer.ChartType = ChartType.ScatterChart;
                ((ScatterChartAppearance)myScatterLayer.ChartTypeAppearance).ConnectWithLines = true;
                //((ScatterChartAppearance)myScatterLayer.ChartTypeAppearance).Icon = SymbolIcon.Circle;
                //((ScatterChartAppearance)myScatterLayer.ChartTypeAppearance).IconSize = SymbolIconSize.Medium;
                myScatterLayer.ChartArea = myChartArea;
                myScatterLayer.AxisX = axisX;
                myScatterLayer.AxisY = axisY;
                myScatterLayer.Series.Add(series1);
                myScatterLayer.Series.Add(series2);
                this.ultraChart1.CompositeChart.ChartLayers.Add(myScatterLayer);


                CompositeLegend myLegend = new CompositeLegend();
                myLegend.ChartLayers.Add(myScatterLayer);
                myLegend.Bounds = new Rectangle(0, 75, 20, 25);
                myLegend.BoundsMeasureType = MeasureType.Percentage;
                myLegend.PE.ElementType = PaintElementType.Gradient;
                myLegend.PE.FillGradientStyle = GradientStyle.ForwardDiagonal;
                myLegend.PE.Fill = Color.CornflowerBlue;
                myLegend.PE.FillStopColor = Color.Transparent;
                myLegend.Border.CornerRadius = 10;
                myLegend.Border.Thickness = 0;
                this.ultraChart1.CompositeChart.Legends.Add(myLegend);
            }

            private void timer1_Tick_1(object sender, EventArgs e)
            {
                i += 1;
                Random rand = new Random();
                series1.Points.Add(new XYDataPoint(i, rand.Next(30), "Point A", false));
                series2.Points.Add(new XYDataPoint(i, rand.Next(28), "Point B", false));
            }
        }
    }

  • 53790
    posted

    Hi,

    Thanks for provided information, but the mentioned behavior is expected and it is by default.

    keanwey said:
    However, I discovered that the points plotted as my timer start to fill in with random number, it never plot exactly at the vertical grid. Sometimes it will bit towards the right of the vertical line

    . To achieve desired behavior you should used the properties:

    axisX.TickmarkInterval = 1;

    axisX.TickmarkStyle = AxisTickStyle.DataInterval;

    I already discuss the same scenario in another forum thread - http://forums.infragistics.com/forums/t/65088.aspx , so please take a look there for more information. Also you could find few samples.

    keanwey said:
    The other issue is, tooltip within the chart area only allow me to view the value of Y, how can I view the value of X, Y also?

    Maybe one possible approach could be if you are using for example:

    ultraChart1.Tooltips.FormatString = "<SERIES_LABEL>" + Environment.NewLine + "<ITEM_LABEL>: <DATA_VALUE:0.##>"

    Let me know if you have any questions.

    Regards