Page 1 of 1

Axis Increment/Min/Max Problem

Posted: Wed Aug 22, 2018 10:31 am
by 20083732
Hi,

We are currently using the TeeChart JS component v2.5 and are seeing issues with the calculated increments, minimum, and maximum values on the bottom X axis.

The chart is set up with only basic style settings. We are then adding new Line series to the chart and some markers. The issue is that the X axis does not seem to be correctly calculating sensible values for increments or maximum.

For example in this chart below the line series X values are decimals that range from 0 - 1. We would ideally like to see increments here of say 0.1.
Image
In this example, we have x values ranging from 0 to just under 3600. But you can see the maximum is not a sensible figure and the increments aren't either. We would expect increments of say 200 and a max of 3600.
Image

Here is the snippet of code (long routine omitted but this is the only part of the code related to the chart), for basic chart setup and addition of line series:

Code: Select all

                        cht.panel.format.round.x = 0;
                        cht.panel.format.round.y = 0;
                        cht.panel.format.stroke.fill = "";
                        cht.panel.transparent = true;
                        cht.panel.format.fill = "#FFFFFF";
                        cht.panel.format.shadow.visible = false
                        cht.panel.format.gradient.colors = [];
                        cht.panel.format.gradient.direction = "topbottom";
                        cht.panel.format.gradient.visible = false;
                        cht.panel.format.shadow.visible = false;
                        cht.walls.back.format.gradient.colors = [];
                        cht.walls.back.format.gradient.direction = "topbottom";
                        cht.walls.back.format.gradient.visible = false;
                        cht.walls.back.format.shadow.visible = false;
                        cht.walls.back.format.fill = '#FFFFFF';
                        cht.title.text = "TeeChart";
                        cht.title.format.font.style = "12px Open Sans";
                        cht.title.format.font.fill = "#808080";
                        cht.footer.visible = false;
                        cht.axes.left.labels.format.font.style = "12px Open Sans";
                        cht.axes.left.labels.format.font.fill = "#808080";
                        cht.axes.bottom.labels.format.font.style = "12px Open Sans";
                        cht.axes.bottom.labels.format.font.fill = "#808080";
                        cht.axes.right.labels.format.font.style = "12px Open Sans";
                        cht.axes.right.labels.format.font.fill = "#404040";
                        cht.axes.top.labels.format.font.style = "12px Open Sans";
                        cht.axes.top.labels.format.font.fill = "#404040";
                        cht.title.text = '';
                        cht.axes.bottom.title.text = 'Volume ()';
                        cht.axes.right.title.text = 'Power ()';
                        cht.axes.left.title.text = 'Pressure ()';
                        cht.legend.visible = true;
                        cht.legend.position = "right";
                        cht.legend.format.font.style = "12px Open Sans";
                        cht.legend.format.font.fill = "#000000";
                        cht.legend.format.gradient.colors = ["#FFFFFF", "#FFFFFF"];
                        cht.legend.format.gradient.direction = "topbottom";
                        cht.legend.format.gradient.visible = false;
                        cht.zoom.enabled = false;
                        
                        var srs = cht.addSeries(new Tee.Line());
                                var xPoints = []; var yPoints = [];
                                for (var j = 0; j < element.Points.length; j++) {
                                    xPoints.push(element.Points[j].X);
                                    yPoints.push(element.Points[j].Y);
                                }
                                srs.data.values = yPoints;
                                srs.data.x = xPoints;
                                var colorRGB = element.ColorRGB.split(',');
                                srs.format.fill = self.TechnicalUI().rgbToHex(parseInt(colorRGB[0]), parseInt(colorRGB[1]), parseInt(colorRGB[2]));
                                srs.format.stroke.size = element.Width;
                                srs.colorEach = "no";
                                srs.vertAxis = (element.LineType == 2 ? "left" : element.LineType == 3 ? "right" : "left")
                                srs.legend.visible = (element.LineType > 1);
                                srs.format.shadow.visible = false;
What are we doing wrong? Must this be done manually?

Many thanks in advance.

Re: Axis Increment/Min/Max Problem

Posted: Thu Aug 23, 2018 11:42 am
by yeray
Hello,

Could you please arrange a simple example project we can run as-is to reproduce the problem here?
Thanks in advance.

Re: Axis Increment/Min/Max Problem

Posted: Wed Sep 05, 2018 9:57 am
by 20083732
Yeray,

We have put together a sample web page that accurately represents our current use. As you can see, the axis scaled aren't handled in the expected fashion. For example, the decimal points on the left shouldn't need to be set. The increments should be more sensible. The bottom axis should line up correctly and show correct ticks.

Please let us know what your thoughts are.

Re: Axis Increment/Min/Max Problem

Posted: Mon Sep 10, 2018 7:31 am
by yeray
Hello,
ParametLtd wrote:
Wed Sep 05, 2018 9:57 am
the decimal points on the left shouldn't need to be set
You can set the decimal property as follows:

Code: Select all

  cht.axes.left.labels.decimals = 0;
ParametLtd wrote:
Wed Sep 05, 2018 9:57 am
The increments should be more sensible. The bottom axis should line up correctly and show correct ticks.
You can set the bottom axis increment to have a small value. Ie:

Code: Select all

cht.axes.bottom.increment = 0.1;