|
 xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Mar-20-2015 17:22 |
|
I am trying to fix the dateTime data on xAxis. how can i fix the axis with dynamic
dateTime update. Could you please help me to do that. Need to fix 10 axis labels.
Thanks |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Peter Kwan on Mar-21-2015 02:39 |
|
Hi Arumugam,
If you are using Axis.setLabels to configure the x-axis labels, you can use Axis.setLabelStep
to reduce the number of labels. Note that there is no method to ensure there must be 10
evenly spaced axis labels. For example, if you have 13 data points, if you display all of
them, there will be 13 labels. If you display one in two labels, there will be 6 labels only. The
code in C# is like:
c.xAxis().setLabels(myLabels);
c.xAxis().setLabelSpacing((myLabels.Length - 1) / 10 + 1)
If you are using real date/time x-axis (the x-coordinates of the data points are passed to
the layers using Layer.setXData), and the x-axis is auto-scaled, ChartDirector should
automatically choose and space the labels (just like how the y-axis labels are automatically
determined). You may use Axis.setTickDensity to configure the minimum spacing between
the labels to avoid overlapping (the default is 50 pixels).
Hope this can help.
Regards
Peter Kwan |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Mar-21-2015 20:54 |
|
Thanks Peter,
I got some information to set the axis labels, but i need to fix the axis labels in real time
data (find the attached image "x-Axis Label - sample.png" for reference). By using
setLabels I can able to set the labels for axis, but which is moving not fixed. Could you
please suggest me to do that.
And one more question, when the value is out of range values (ex: yAxis Range is 0 to
120, value we are getting is -25) will it plot below the xAxis automatically or i need to
modify any properties? Thanks for the supper Peter.
|
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Peter Kwan on Mar-24-2015 03:19 |
|
Hi Arumugam,
There are many methods to "fix" the labels. The easiest method is to use something like in the realtime chart sample code that comes with ChartDirector. In the sample code, the data/time axis labels are automatically determined by ChartDirector. In this way, ChartDirector should automatically choose "nice labels" (like instead of using 14:53:48, it would use 14:54:00 with the seconds part being 0), and will automatically determine a suitable label spacing, and will also keep the labels stable.
I have just responded to your other post and include an example that also supports zooming and scrolling. May be you can use it as a reference.
http://www.chartdir.com/forum/download_thread.php?site=chartdir&bn=chartdir_support&thread=1384866010#N1427099498
If your data can go outside the axis range and you do not want to plot those parts, you may use XYChart.setClipping to ask ChartDirector to clip the layers to the plot area. All zooming and scrolling sample code that comes with ChartDirector uses this method to avoid plotting outside the plot area. The sample code above also uses this method.
Hope this can help.
Regards
Peter Kwan |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Mar-24-2015 23:54 |
|
Thanks peter.
It's working fine. I am using the setLabels for xAxis and setDateScale2(3 Param) for
xAxis, it seems fine.
But one problem i am facing in it, if I click zoom in or zoom out based upon that line layer
is moving, but the xAxis(DateTime) is not updating respectively.
I done same whatever u shared with me(sample code) extra I added the setLabels.
I need to update the viewPortWidth for every zoomIn and zoomOut Operation?
Could you suggest me in this?
Thanks. |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Peter Kwan on Mar-25-2015 01:23 |
|
Hi Arumugam,
The issue probably is because you use both setLabels or setDateScale2. First, you can only
use either setLabels or setDateScale2, not both. If you use both, the second one will
automatically cancel the first one.
In both setLabels and setDateScale2, you code specifies the labels to display. If you want
the labels to change when you zoom or span, you would need to update the labels array
with your own code.
In the sample code I mentioned in my earlier post, the setDateScale is used. With the
setDateScale, ChartDirector will automatically determine the labels, and it will change labels
when you zoom or span.
Would you consider not to use setLabels or setDateScale2 to specify your own labels, but
to use setDateScale to let ChartDirector determine the labels? If you specify the labels, you
would need to update them when x-axis scale changes.
Regards
Peter Kwan |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Mar-25-2015 23:15 |
|
Thank you very much Peter!!
It is working fine for me. I fixed the labels in xAxis by using setDateScale2() and I
removed setLabels() it looks great and neat.
I had a question earlier, if data is plotting beyond the given ranges, the trend is shown out
of plotted area. Refer the attached image (OutRange Values - Expected.png).
If I use setClipping() - it will restrict the plotting data beyond the given range. I have a
question on this
SetClipping(margin) - has an option to set the margin values, using which data can be
plotted within the margin. The plotting data is exceeded the margin, data plotting is not
seen. Refer the attached image (OutRangeValue Mine.png)
I would like to know what exactly I need to do to see the plotting data on beyond ranges?
Exactly like the 1st image.
Thanks.
|
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Peter Kwan on Mar-26-2015 01:09 |
|
Hi Arumugam,
If what you would like to draw is just a horizontal line under the x-axis, you can consider to
add it using BaseChart.addLine. The setClipping only clips the "layers" (the line layer or bar
layer or other data layers). It has no effect if the content is not on a data layer. For
example, the axis labels are not on any data layer, so they remain visible even they are
outside the plot area. If the line is drawn using BaseChart.addLine, it is not on any data
layer and will not be affected by setClipping.
The code is like:
...... draw the chart as usual .......
//fix the axis scale
c.layout();
// draw from the bottom left corner to the target get
c.addLine(c.getPlotArea().getLeftX(), c.getPlotArea().getBottomY() + 2,
c.getXCoor(targetDate), c.getPlotArea().getBottomY() + 2, 0x00cc00, 2).
setZOrder(Chart.PlotAreaZ);
Hope this can help.
Regards
Peter Kwan |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Mar-26-2015 23:44 |
|
Peter,
I have got the information on whatever you have shared about the data plotting either in
plotting area or outing of it.
I need to have the implementation of both the functionalities (plotting data inside and
outside the plotting area), as in the attached image, OutofRange expected.PNG. Look at the
marked portion (in red) in this image, for the data that are plotting properly without any
interruption. Also, you can observe the data plotted beyond the fixed limits. The actual
data started with negative values (-40) and it gradually increased to more than 100, which
is 936.84.
I would like to have the same behavior to be done in the application, which I am working
on. Please refer the attached image ( Out of Range - Mine ) of the current behavior of my
application.
I have used setDateScale2 (Axis) to plot the data in the plotting area, which works
perfectly fine. The concern that I have, is on the data that to be plotted beyond the limits
which is set. Please observe the data plotted beyond the ranges, looks interrupted and
does not have proper continuity.
Hope you have got an idea about the problem that I am facing. Could you please help me
in getting the same behavior done (like OutofRange expected.PNG)?
Thanks in advance.
|
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Peter Kwan on Mar-31-2015 01:52 |
|
Hi Arumugam,
May be you can try to use area layers to create the effect you want. It is like:
//clipping with 10 pixel margin
c.setClipping(10);
//Assume this is your original line
LineLayer layer = c.addLineLayer(viewPortDataSeriesA, .....);
layer.setXData(viewPortTimeStamps);
//Fill the region under 0
AreaLayer bottomFill = c.addAreaLayer(viewPortDataSeriesA, c.yZoneColor(0, 0x008800,
Chart.Transparent));
bottomFill.setXData(viewPortTimeStamps);
bottomFill.setBorderColor(Chart.Transparent);
//Fill the region over 100
AreaLayer topFill = c.addAreaLayer(viewPortDataSeriesA, c.yZoneColor(100,
Chart.Transparent, 0x00cc00));
topFill.setXData(viewPortTimeStamps);
topFill.setBorderColor(Chart.Transparent);
Hope this can help.
Regards
Peter Kwan |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Apr-03-2015 00:26 |
|
Thanks very much Peter. Everything is working fine for me. Thanks for your great support.
-Arumugam |
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Arumugam on Apr-28-2015 23:37 |
|
Hi Peter,
I am facing problem in chart while Pan or Zooming the chart. As you suggested to plot
the data beyond the limit, I have used XYChart.addAreaLayer for both top and bottem
area.
But while Zooming or Panning the Chart lineLayer is plotting like overlapped (Creating
like box).
I have added the DrawChart() code,
private void DrawChart(WinChartViewer viewer)
{
if (_LimitInitialized == false)
{
ChartControlDefinition chartDefinition = Definition as ChartControlDefinition;
if (chartDefinition == null)
return;
SetChartLimit(chartDefinition.ChartLimit);
}
// Get the array indexes that corresponds to the visible start and end dates
int startIndex = (int)Math.Floor(viewer.getValueAtViewPort("x",
viewer.ViewPortLeft));
int endIndex = (int)Math.Ceiling(viewer.getValueAtViewPort("x",
viewer.ViewPortLeft + viewer.ViewPortWidth));
int noOfPoints = endIndex - startIndex + 1;
// Extract the part of the data array that are visible.
_ViewPortTimeStamps = (DateTime[])Chart.arraySlice(_TimeStamps,
startIndex, noOfPoints);
_ViewPortDataSeriesA = (double[])Chart.arraySlice(_DataSeriesA, startIndex,
noOfPoints);
// At this stage, we have extracted the visible data. We can use those data to
plot the chart.
// Configure overall chart appearance.
// Create an XYChart object of size 625 x 310 pixels
_XYChart = null;
_XYChart = new XYChart(625, 310, 0xf4f4f4, 0x000000, 1);
_XYChart.setPlotArea(60, 35, _XYChart.getWidth() - 80, _XYChart.getHeight() -
90, 0xffffff, -1, -1, 0xcccccc, Chart.Transparent);
// As the data can lie outside the plotarea in a zoomed chart, we need enable
clipping.
// Added margin 3 to see the outside plotting data.
_XYChart.setClipping(3);
LegendBox b = _XYChart.addLegend(55, 5, false, "Arial Bold", 8);
b.setBackground(Chart.Transparent);
b.setRoundedCorners();
//=====================================================
===========================
// Add data to chart
//=====================================================
===========================
LineLayer layer = _XYChart.addLineLayer2();
layer.setLineWidth(2);
layer.setXData(_ViewPortTimeStamps);
layer.addDataSet(_ViewPortDataSeriesA, 0x006b3d, UnitText);
// Add axis title using 10pts Arial Bold Italic font
_XYChart.yAxis().setTitle(UnitText, "Arial Bold", 10);
_XYChart.xAxis().setTitle(Controller.ResourceProvider.GetString("res_TimeSec"), "Arial
Bold", 10);
_XYChart.xAxis().setTickDensity(45, -1);
_BottomFill = null;
//Fill the region under yAxisLowerLimit
_BottomFill = _XYChart.addAreaLayer(_ViewPortDataSeriesA,
_XYChart.yZoneColor(_BottomFillAreaLimit, 0x006b3d, Chart.Transparent));
_BottomFill.setXData(_ViewPortTimeStamps);
_BottomFill.setBorderColor(Chart.Transparent);
_TopFill = null;
//Fill the region over yAxisUpperLimit
_TopFill = _XYChart.addAreaLayer(_ViewPortDataSeriesA,
_XYChart.yZoneColor(_TopFillAreaLimit, Chart.Transparent, 0x006b3d));
_TopFill.setXData(_ViewPortTimeStamps);
_TopFill.setBorderColor(Chart.Transparent);
//=====================================================
===========================
// Configure axis scale and labelling
//=====================================================
===========================
_StartTime = _ViewPortTimeStamps[0];
_EndTime = _ViewPortTimeStamps[0].AddMilliseconds(_DataTimer.Interval *
Math.Max(1, _ViewPortTimeStamps.Length - 1));
//setting xAxis labels
for (int i = 0; i < 11; i++)
{
if (i == 0) _LabelList[i] = _StartTime.AddSeconds(i).ToString("HH:mm:ss");
else _LabelList[i] = _StartTime.AddSeconds(i * 60).ToString("HH:mm:ss");
}
if (_EndTime.ToString("HH:mm:ss") != _LabelList[_LabelList.Length - 1])
{
TimeSpan duration = _EndTime.Subtract(_StartTime);
int divSeconds = int.Parse(duration.TotalSeconds.ToString()) / 10;
for (int i = 0; i < 11; i++)
{
if (i == 0) _LabelList[i] =
_StartTime.AddSeconds(i).ToString("HH:mm:ss");
else _LabelList[i] = _StartTime.AddSeconds(i *
divSeconds).ToString("HH:mm:ss");
}
}
// Set the x-axis as a date/time axis with the scale according to the view port x
range.
if (_CurrentIndex > 0)
{
_XYChart.xAxis().setDateScale2(_StartTime, _EndTime, _LabelList);
_XYChart.xAxis().setLabelFormat("{value|hh:nn:ss}");
_XYChart.xAxis().setLabelStyle("Arial", 8, 0x000000, 20);
}
viewer.syncLinearAxisWithViewPort("y", _XYChart.yAxis());
_XYChart.yAxis().setRounding(false, false);
// Output the chart
viewer.Chart = _XYChart;
}
_ViewPortDataSeriesA = DataSeries Contain Plotting data.
_BottomFillAreaLimit = Lower Limit of yAxis.
_TopFillAreaLimit = Upper Limit of yAxis.
I have attached the video file where it show my problem on it. It bit urgent now, hope
you understand my problem in Chart.
Thanks,
Arumugam
|
| Re: xAxis timestamp overlap on one another in C#.Net Winforms |
| Posted by Peter Kwan on Apr-29-2015 00:52 |
|
Hi Arumugam,
You mentioned that "_BottomFillAreaLimit = Lower Limit of yAxis" and "_TopFillAreaLimit =
Upper Limit of yAxis". Would you mind to clarify how you determine these two limits, as it is
not shown in your code? Since you are zooming and scrolling in the y direction, the limit
should keep changing for every chart.
To diagnose the problem, may be you can modify the code as follows:
(a) Add a line to display _BottomFillAreaLimit and _TopFillAreaLimit in the chart title, like:
_XYChart.addTitle(" " + _BottomFillAreaLimit + " to " + _TopFillAreaLimit);
Then when the issue occurs, please verify if the _BottomFillAreaLimit and _TopFillAreaLimit
on the chart title is really the limits of the y-axis as displayed on the chart.
(b) Please change the colors of the two area layers to semi-transparent red (0x7fff0000)
and semi-transparent blue (0x7f0000ff). This can help us to see if the thick line is caused
by the area layer and which area layer is responsible for which part of the thick line.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(Arumugam)