Hi, currently the requirement of the graph should looks like this
Enclosed picture 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.
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. How to set the length of axis smaller than ViewXY?
Moderator: Queue Moderators
-
- Posts: 4
- Joined: Mon Jul 16, 2018 4:13 pm
-
- Posts: 557
- Joined: Mon Mar 14, 2016 9:22 am
Re: How to set the length of axis smaller than ViewXY?
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.
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.
-
- Posts: 4
- Joined: Mon Jul 16, 2018 4:13 pm
Re: How to set the length of axis smaller than ViewXY?
Hi, Kestutis:
The graph of custom ticks is looks like this , 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:
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
The graph of custom ticks is looks like this , 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();
Thanks,
Yixian
-
- Posts: 557
- Joined: Mon Mar 14, 2016 9:22 am
Re: How to set the length of axis smaller than ViewXY?
Hi,
I suggested to use the LineCollection instead of Chart's Grid and add CustomAxisTick instead normal labels.
Here is the image I created: Here is the code o create chart:
Hope this helps.
All the best.
I suggested to use the LineCollection instead of Chart's Grid and add CustomAxisTick instead normal labels.
Here is the image I created: 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();
}
}
}
All the best.
-
- Posts: 4
- Joined: Mon Jul 16, 2018 4:13 pm
Re: How to set the length of axis smaller than ViewXY?
Awesome!!! Thank you so much!!!