How to set the length of axis smaller than ViewXY?

Need help in implementing some specific function to your LightningChart Ultimate powered application? Post a question and get code snippets from other LightningChart Ultimate community members.

Moderator: Arction_LasseP

firstwluke
Posts: 4
Joined: Mon Jul 16, 2018 4:13 pm

How to set the length of axis smaller than ViewXY?

Post by firstwluke » Mon Jul 16, 2018 5:04 pm

Hi, currently the requirement of the graph should looks like this
Capture.PNG
Capture.PNG (11.34 KiB) Viewed 5819 times
The approach I think of is to create 3 axis, left, right and down, then make the length of axis smaller than the rectangle area of ViewXY and make the axis line to dash so that it should looks like the requirement.

Enclosed picture
Capture2.PNG
Capture2.PNG (8.56 KiB) Viewed 5819 times
is my current progress. I purposely left the scake nib color to show the axis and label position. I am using customized axis but the endpoint tick location is at both end of axis. Also, is there any way to make axis dash line?

Any help or even a better approach would be appreciate.

ArctionKestutis
Posts: 383
Joined: Mon Mar 14, 2016 9:22 am

Re: How to set the length of axis smaller than ViewXY?

Post by ArctionKestutis » Tue Jul 17, 2018 9:34 am

Hi,

If you need empty border around graph area, then probably best approach is to use 'Line collections'. In addition, 'custom ticks' should work here better.
Please check corresponding examples from our Demo App, how to use those objects.

Hope this helps.

firstwluke
Posts: 4
Joined: Mon Jul 16, 2018 4:13 pm

Re: How to set the length of axis smaller than ViewXY?

Post by firstwluke » Tue Jul 17, 2018 3:50 pm

Hi, Kestutis:

The graph of custom ticks is looks like this
Capture3.PNG
Capture3.PNG (11.4 KiB) Viewed 5813 times
, and do you know why the x axis does not show the end points' grid line while the two y axis show the grid line? The grid line of 0 and 120 can be shown by draging the scale nib left and right just a little bit. However, when you drag, one of the endpoints will disapeear. Is there any way to make the endpoints grid line show up by using the customized tick? The red line is the view border and yellow line is the axis. I am using ViewXY.AxisLayout.YAxisAutoPlacement = YAxisAutoPlacement.LeftThenRight and ViewXY.AxisLayout.AutoAdjustAxisGap = 0to place the axis. Is this related to the problem? I think if I can make endpoints shift a little bit to the center and it may be work with all grid lines. Is there a way to push the endpoints towards the center a little bit while maintaining the value range?



The code for customized looks like this:

Code: Select all

// Setup x-axis.
            AxisX timeAxis = _CurrentVoltageChart.ViewXY.XAxes[0];
            double max = 120;
            double min = 0;
            
            timeAxis.SetRange(min, max);
            double delta = max - min;
            double interval = (delta) / 6;

            double[] tTickValues = new double[7];
            tTickValues[0] = 0;
            for (int i = 0; i < tTickValues.Length; i++)
            {
                tTickValues[i] = tTickValues[0] + i * interval;
            }

            for (int i = 0; i < tTickValues.Length; i++)
            {
                CustomAxisTick cTick = new CustomAxisTick(timeAxis, tTickValues[i], tTickValues[i].ToString(), 0, true, timeAxis.MajorDivTickStyle.Color, CustomTickStyle.TickAndGrid);
                timeAxis.CustomTicks.Add(cTick);
            }
            
            timeAxis.CustomTicksEnabled = true;
            timeAxis.InvalidateCustomTicks();
What's more, can you give me an idea about how to use line collection to add empty border? I see the demo but it just draw shapes on the view. In the screenshots, at the intersection of x axis and y axis, you can see a little small black square. How to fill that black square with the proper color so that the graph looks like the requirement?

Thanks,
Yixian

ArctionKestutis
Posts: 383
Joined: Mon Mar 14, 2016 9:22 am

Re: How to set the length of axis smaller than ViewXY?

Post by ArctionKestutis » Wed Jul 18, 2018 1:03 pm

Hi,

I suggested to use the LineCollection instead of Chart's Grid and add CustomAxisTick instead normal labels.

Here is the image I created:
ChartGrid as LineCollection with CustomAxisTick
ChartGrid as LineCollection with CustomAxisTick
ChartGrid as LineCollection with CustomAxisTick.jpg (49.22 KiB) Viewed 5808 times
Here is the code o create chart:

Code: Select all

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

using Arction.WinForms.Charting;
using Arction.WinForms.Charting.Axes;
using Arction.WinForms.Charting.SeriesXY;
using Arction.WinForms.Charting.Views.ViewXY;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        // Chart.
        private LightningChartUltimate _chart;

        public Form1()
        {
            InitializeComponent();
            CreateChart();
        }
        /// <summary>
        /// Create chart.
        /// </summary>
        private void CreateChart()
        {
            //Create new chart 
            _chart = new LightningChartUltimate();

            //Disable rendering, strongly recommended before updating chart properties
            _chart.BeginUpdate();

            //Chart parent must be set
            _chart.Parent = this;

            //Fill parent area with chart
            _chart.Dock = DockStyle.Fill;

            //Chart name
            _chart.Name = "LineCollections Grid";

            // Configure Graph Background & Border
            ViewXY viewXY = _chart.ViewXY;
            viewXY.GraphBackground.Color = Color.DimGray;
            viewXY.GraphBackground.GradientFill = GradientFill.Solid;
            viewXY.GraphBorderColor = Color.Transparent;

            // Configure x-axis.
            AxisX axisX = _chart.ViewXY.XAxes[0];
            double dXmin = 0, dXmax = 120;
            double dXAxisOffset = (dXmax - dXmin) / 100;
            axisX.SetRange(dXmin - dXAxisOffset, dXmax + dXAxisOffset);
            axisX.ScrollMode = XAxisScrollMode.None;
            axisX.ValueType = AxisValueType.Number;
            axisX.AxisThickness = 0;
            axisX.MouseScaling = false; // make scale nibs invisible
            axisX.CustomTicksEnabled = true;

            // Configure x-axis.
            AxisY axisY = _chart.ViewXY.YAxes[0];
            double dYmin = -2, dYmax = 2;
            double dYAxisOffset = (dYmax - dYmin) / 100;
            axisY.SetRange(dYmin - dYAxisOffset, dYmax + dYAxisOffset);
            axisY.ValueType = AxisValueType.Number;
            axisY.AxisThickness = 0;
            axisY.MouseScaling = false; // make scale nibs invisible
            axisY.CustomTicksEnabled = true;

            Random random = new Random();

            //Line collection 1: a set of simple horizontal lines
            LineCollection lineCollection1 = new LineCollection(viewXY, viewXY.XAxes[0], viewXY.YAxes[0]);
            lineCollection1.ShowInLegendBox = false;
            lineCollection1.LineStyle.Color = Color.FromArgb(100, 255, 255, 255);
            lineCollection1.LineStyle.Width = 1;
            lineCollection1.LineStyle.Pattern = LinePattern.Dot;
            lineCollection1.MouseInteraction = false;

            double dYAxisDiv = 1;
            int HlineSegmentCount = (int)((dYmax - dYmin) / dYAxisDiv) +1;
            SegmentLine[] lines1 = new SegmentLine[HlineSegmentCount];

            for (int segment = 0; segment < HlineSegmentCount; segment++)
            {
                //First point 
                lines1[segment].AX = dXmin;
                lines1[segment].AY = dYmin + segment * (dYAxisDiv);

                lines1[segment].BX = dXmax;
                lines1[segment].BY = lines1[segment].AY;

                // add custom ticks for Y axis at the same location
                axisY.CustomTicks.Add(new CustomAxisTick(axisX, lines1[segment].AY, lines1[segment].AY.ToString("0.0"), 3, true, Color.FromArgb(40, Color.White), CustomTickStyle.Tick));
            }
            lineCollection1.Lines = lines1; //Assign the lines array for the series
            lineCollection1.Title.Text = "YAxis grid";
            viewXY.LineCollections.Add(lineCollection1);

            //Line collection 1: a set of simple vertical lines
            LineCollection lineCollection2 = new LineCollection(viewXY, viewXY.XAxes[0], viewXY.YAxes[0]);
            lineCollection2.ShowInLegendBox = false;
            lineCollection2.LineStyle.Color = Color.FromArgb(100, 255, 255, 255);
            lineCollection2.LineStyle.Width = 1;
            lineCollection2.LineStyle.Pattern = LinePattern.Dot;
            lineCollection2.MouseInteraction = false;

            double dXAxisDiv = 20;
            int VlineSegmentCount = (int)((dXmax - dXmin) / dXAxisDiv) + 1;
            SegmentLine[] lines2 = new SegmentLine[VlineSegmentCount];

            for (int segment = 0; segment < VlineSegmentCount; segment++)
            {
                //First point 
                lines2[segment].AX = dXmin + segment * (dXAxisDiv);
                lines2[segment].AY = dYmin;

                lines2[segment].BX = lines2[segment].AX;
                lines2[segment].BY = dYmax;

                // add custom ticks for X axis at the same location
                axisX.CustomTicks.Add(new CustomAxisTick(axisX, lines2[segment].AX, lines2[segment].AX.ToString("0.0"), 3, true, Color.FromArgb(40, Color.White), CustomTickStyle.Tick));
            }
            lineCollection2.Lines = lines2; //Assign the lines array for the series
            lineCollection2.Title.Text = "XAxis grid";
            viewXY.LineCollections.Add(lineCollection2);


            //Configure legend
            viewXY.LegendBoxes[0].Offset = new PointIntXY(-25, -90);

            //Allow chart rendering
            _chart.EndUpdate();
        }
    }
}
Hope this helps.
All the best.

firstwluke
Posts: 4
Joined: Mon Jul 16, 2018 4:13 pm

Re: How to set the length of axis smaller than ViewXY?

Post by firstwluke » Wed Jul 18, 2018 8:21 pm

Awesome!!! Thank you so much!!!