Axis Increment/Min/Max Problem

TeeChart for Javascript for the HTML5 Canvas
Post Reply
ParametLtd
Newbie
Newbie
Posts: 2
Joined: Wed May 30, 2018 12:00 am

Axis Increment/Min/Max Problem

Post by ParametLtd » Wed Aug 22, 2018 10:31 am

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.

Yeray
Site Admin
Site Admin
Posts: 8738
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Axis Increment/Min/Max Problem

Post by Yeray » Thu Aug 23, 2018 11:42 am

Hello,

Could you please arrange a simple example project we can run as-is to reproduce the problem here?
Thanks in advance.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

ParametLtd
Newbie
Newbie
Posts: 2
Joined: Wed May 30, 2018 12:00 am

Re: Axis Increment/Min/Max Problem

Post by ParametLtd » Wed Sep 05, 2018 9:57 am

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.
Attachments
TeeChartJs-Sample.zip
(46.29 KiB) Downloaded 91 times

Yeray
Site Admin
Site Admin
Posts: 8738
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Axis Increment/Min/Max Problem

Post by Yeray » Mon Sep 10, 2018 7:31 am

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;
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply