Area chart gradient bug

[g.todorov]

Hi guys,

We need from your help. We are using an area chart with gradient. After changing min/max on right axis gradient doesn't keep the original color. Is it possible to fix that? Thanks in advance.
Example page is here: http://en.1009.binarate.com/prosite/teechart ( here depend of dynamic prices and I'm not sure will see the bug ).
Code example:

Code: Select all

function yz() {
            var l = sd[sd.length - 1][1],
             h = 0;
            for (var i = sd.length - 1; i >= 0; i--) {
                var dc = sd[i],
                    dcox =Chart1.axes.bottom.calc(dc[0])
                if (dcox > 0 && dc[1] > h) {
                    h = dc[1];
                }
                if (dcox > 0 && dc[1] < l) {
                    l = dc[1];
                }
                if (dcox < 0)
                    break;

            }
            Chart1.axes.right.setMinMax(l * 0.99990, h * 1.00010),
            Chart1.axes.right.increment = (Chart1.axes.right.maximum - Chart1.axes.right.minimum) / 10;
        }

Screencasts attached here below:

[Yeray]

Hello,

I see this comes from this question at StackOverflow.

Example page is here: http://en.1009.binarate.com/prosite/teechart ( here depend of dynamic prices and I'm not sure will see the bug ).

A I've just said there, I see a black page with no chart there.

[g.todorov]

Sorry about a black screen may be the markets was closed. Check now please.

[Yeray]

Hello,

It works now, thanks.
However, I'm not sure to perceive any noticeable change in the gradient. Am I supposed to so something special to see it? I've tried scrolling the page horizontally.

In the images you posted in the first post, I see the left axis scale changed and the gradient remains. If you want it to be recalculated according to the new axis scale, you may want to change the series origin as I suggested at StackOverflow here:

If it's an Area series, have you tried to change the origin property in the series?

[g.todorov]

Can you give an example with the origin property please, because we try something without success?

[Yeray]

Hello,

Here it is a simplified version of your example:

Code: Select all

var Chart1;
	  
function draw() {
  Chart1=new Tee.Chart("canvas1");
        
  Chart1.title.format.font.fill = "white";
  Chart1.legend.visible = false;
  Chart1.panel.format.gradient.visible = false;
  Chart1.panel.format.fill = "black";
  Chart1.walls.visible = false;
  Chart1.axes.bottom.grid.format.stroke.fill = "#191919";
  Chart1.axes.left.grid.format.stroke.fill = "#191919";
  Chart1.axes.bottom.labels.format.font.fill = "#ccc";
  Chart1.axes.left.labels.format.font.fill = "#ccc";
  
  var area = new Tee.Area();
  Chart1.addSeries(area);
  area.addRandom(100);
  
  area.format.shadow.visible = false;
  area.format.stroke.visible = false;
  area.format.fill = "black";
  area.format.gradient.visible = true;
  area.format.gradient.colors[0] = "rgba(0, 175, 240, 0.2)";
  
  var line = new Tee.Line();
  Chart1.addSeries(line);
  line.data = area.data;
  
  line.format.stroke.fill = "rgb(0, 175, 240)";
  line.format.stroke.size = 2;
  
  area.useOrigin = true;
  area.origin = area.minYValue() - 500;

  Chart1.draw(); 
}

This is how it looks:

area.png (47.96 KiB) Viewed 22553 times

Note I've used useOrigin and origin properties to set the bottom of the gradient.

[g.todorov]

Hello,

The example looks good but did you try to change the min/max and scroll then? Because in our case we are adding a new price to the data each second and then set the min/max.
Here is workable an example with the old chart library:
http://en.1009.binarate.com/prosite/flotchart

[Yeray]

Hello,

The problem is that I'm still not sure to see the issue. I'm not sure about what is the exact problem you see with the gradient or under what conditions you see it.
Could you please reduce the example to the minimum so we can see it clearly?

[g.todorov]

Hello again

The problem is that I'm still not sure to see the issue. I'm not sure about what is the exact problem you see with the gradient or under what conditions you see it.
Could you please reduce the example to the minimum so we can see it clearly?

,

Ok. Sorry for the delay.
Check it here now:
http://en.3009.binarate.com/prosite/teechart2
After 3 seconds we change the min/max on the right axis and you can see it.

[Yeray]

Hello,

I've made 2 screenshots, one before and anotherone after the axis rescale.
Using a simple drawing program (ie Paint.NET) I capture the color of a pixel from each screenshot, both corresponding to the same zone, and I get the same value. In the point I highlighted in both screenshots I'm getting RGB=(0, 19, 27):

before

1.png (29.2 KiB) Viewed 22508 times

after

2.png (30.02 KiB) Viewed 22511 times

So it seems to me that the gradient is kept after changing the axis scale.

[g.todorov]

Hello,

in your an example you can also see the difference with the gradient color before and after changing the scale. You can take a look carefully and will see it that blue color should finish to full transparency.
I understood the gradient should be drawn only to the visible part of chart area and then should keep start/to color and their transparencies always. I'll try to fix it.

Thanks guys.

[Yeray]

Hello,

Simplifying a test application to this:

test1.zip

(962 Bytes) Downloaded 1005 times

I see two exact gradients at both sides:

gradients.png (21.59 KiB) Viewed 22483 times

Could you please modify the above example so we can see the problem here?

[g.todorov]

gradients.png (26.58 KiB) Viewed 22448 times

Hello, again
Thanks for the example page. I just changed the example and scrolled to the left side

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>

<script src="teechart.js" type="text/javascript"></script>
<script src="date.format.js" type="text/javascript"></script>

    <script type="text/javascript">

        var Chart1, Chart2;

        function draw() {
            Chart1 = new Tee.Chart("canvas1");
            Chart2 = new Tee.Chart("canvas2");

            createArea(Chart1);
            createArea(Chart2);

            Chart1.axes.left.setMinMax(0, 150);
            area1 = Chart1.series.items[0];
            area1.useOrigin = true;
            area1.origin = Chart1.axes.left.minimum;

            Chart2.axes.left.setMinMax(80, 150);
            area2 = Chart2.series.items[0];
            
            area2.useOrigin = true;
            area2.origin = Chart2.axes.left.minimum;

            Chart1.draw();
            Chart2.draw();
        }

        function createArea(chart) {
            chart.title.format.font.fill = "white";
            chart.legend.visible = false;
            chart.panel.format.gradient.visible = false;
            chart.panel.format.fill = "black";
            chart.walls.visible = false;
            chart.axes.bottom.grid.format.stroke.fill = "#191919";
            chart.axes.left.grid.format.stroke.fill = "#191919";
            chart.axes.bottom.labels.format.font.fill = "#ccc";
            chart.axes.left.labels.format.font.fill = "#ccc";
            chart.scroll.enabled = true;
            chart.scroll.mouseButton = 0;
            chart.scroll.direction = "horizontal";

            var area = new Tee.Area();
            chart.addSeries(area);
            area.data.values = [100, 60, 120, 115, 150];

            area.format.shadow.visible = false;
            area.format.stroke.visible = false;
            area.format.fill = "black";
            area.format.gradient.visible = true;
            area.format.gradient.colors[0] = "white";
            
        }

    </script>

</head>
<body onload="draw()">
    <br>

    <center>
    <canvas id="canvas1" width="600" height="400">
        This browser does not seem to support HTML5 Canvas.
    </canvas>
    <canvas id="canvas2" width="600" height="400">
        This browser does not seem to support HTML5 Canvas.
    </canvas>
</center>
    <br>
    <svg id="usa" class="map" width="100%" height="100%" />

</body>
</html>

[Yeray]

Hello,

I see the gradient is drawn considering a rectangle with a height calculated taking this minYValue:

Code: Select all

  this.minYValue=function() {
    var v=this.yMandatory ? Tee.Series.prototype.minYValue.call(this) : Tee.Series.prototype.minXValue.call(this);
    return this.yMandatory ? this.useOrigin ? Math.min(v,this.origin) : v : v;
  }

In the code you've just posted, the smaller YValue on the series is 60 and origin is 80, so the Math.min(v,this.origin) call above returns 60 and the gradient is calculated considering the bottom of the rectangle at 60.
You can change that overriding the minYValue function for the area2. Ie:

Code: Select all

//...
        function draw() {
            //...
            area2.minYValue=function() {
              var v=this.yMandatory ? Tee.Series.prototype.minYValue.call(this) : Tee.Series.prototype.minXValue.call(this);
            return this.yMandatory ? this.useOrigin ? this.origin : v : v;
            }

            Chart1.draw();
            Chart2.draw();
        }
//...

area_gradient.png (26.88 KiB) Viewed 22432 times

[g.todorov]

Thanks,

It seems works but in our real situation we change min and max together with a near values.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>

<!--[if lt IE 9]>
    <script src="../src/excanvas/excanvas_text.js"></script>
    <script src="../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="teechart.js" type="text/javascript"></script>
<script src="date.format.js" type="text/javascript"></script>

    <script type="text/javascript">

        var Chart1, Chart2;

        function draw() {
            Chart1 = new Tee.Chart("canvas1");
            Chart2 = new Tee.Chart("canvas2");

            createArea(Chart1);
            createArea(Chart2);

            Chart1.axes.left.setMinMax(0, 150);
            area1 = Chart1.series.items[0];
            area1.useOrigin = true;
            area1.origin = Chart1.axes.left.minimum;

            Chart2.axes.left.setMinMax(80, 110);
            area2 = Chart2.series.items[0];
            
            area2.useOrigin = true;
            area2.origin = Chart2.axes.left.minimum;

            Chart1.draw();
            Chart2.draw();
        }

        function createArea(chart) {
            chart.title.format.font.fill = "white";
            chart.legend.visible = false;
            chart.panel.format.gradient.visible = false;
            chart.panel.format.fill = "black";
            chart.walls.visible = false;
            chart.axes.bottom.grid.format.stroke.fill = "#191919";
            chart.axes.left.grid.format.stroke.fill = "#191919";
            chart.axes.bottom.labels.format.font.fill = "#ccc";
            chart.axes.left.labels.format.font.fill = "#ccc";
            chart.scroll.enabled = true;
            chart.scroll.mouseButton = 0;
            chart.scroll.direction = "horizontal";

            var area = new Tee.Area();
            chart.addSeries(area);
            area.data.values = [100, 60, 120, 115, 150];

            area.format.shadow.visible = false;
            area.format.stroke.visible = false;
            area.format.fill = "black";
            area.format.gradient.visible = true;
            area.format.gradient.colors[0] = "white";
            
        }

    </script>

</head>
<body onload="draw()">
    <br>

    <center>
    <canvas id="canvas1" width="600" height="400">
        This browser does not seem to support HTML5 Canvas.
    </canvas>
    <canvas id="canvas2" width="600" height="400">
        This browser does not seem to support HTML5 Canvas.
    </canvas>
</center>
    <br>
    <svg id="usa" class="map" width="100%" height="100%" />

</body>
</html>

Could you please give us a solution where the maxY is also included in the calculations if it possible of course.
In all cases we want to keep the gradient perfectly.