Steema Central

Posted: **Fri Nov 20, 2015 1:57 pm**

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:

Posted: **Fri Nov 20, 2015 2:45 pm**

Hello,

I see this comes from this question at StackOverflow.

g.todorov wrote: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.

Posted: **Mon Nov 23, 2015 9:47 am**

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

Posted: **Mon Nov 23, 2015 12:13 pm**

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?

Posted: **Mon Nov 23, 2015 4:03 pm**

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

Posted: **Tue Nov 24, 2015 12:42 pm**

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 22669 times

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

Posted: **Wed Nov 25, 2015 10:00 am**

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

Posted: **Wed Nov 25, 2015 11:00 am**

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?

Posted: **Wed Dec 02, 2015 1:29 pm**

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.

Posted: **Wed Dec 02, 2015 2:03 pm**

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 22624 times

: after; 2.png (30.02 KiB) Viewed 22627 times

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

Posted: **Thu Dec 03, 2015 11:01 am**

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.

Posted: **Thu Dec 03, 2015 3:11 pm**

Hello,

Simplifying a test application to this:

test1.zip: (962 Bytes) Downloaded 1009 times

I see two exact gradients at both sides:

: gradients.png (21.59 KiB) Viewed 22599 times

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

Posted: **Tue Dec 08, 2015 1:21 pm**

: gradients.png (26.58 KiB) Viewed 22564 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>

Posted: **Wed Dec 09, 2015 2:50 pm**

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 22548 times

Posted: **Thu Dec 10, 2015 12:43 pm**

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.

Steema Central

Area chart gradient bug

Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug

Re: Area chart gradient bug