Axis Increment/Min/Max Problem

[ParametLtd]

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.

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.


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.

[Yeray]

Hello,

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

[ParametLtd]

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.

[Yeray]

Hello,

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;

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;