Area chart gradient bug

TeeChart for JavaScript for the HTML5 Canvas
g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Area chart gradient bug

Post by g.todorov » 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:
Attachments
2.png
After changing
2.png (45.05 KiB) Viewed 19105 times
regular.png
regular one
regular.png (42.01 KiB) Viewed 19012 times

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

Re: Area chart gradient bug

Post by Yeray » 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.
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » Mon Nov 23, 2015 9:47 am

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

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

Re: Area chart gradient bug

Post by Yeray » 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?
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » Mon Nov 23, 2015 4:03 pm

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

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

Re: Area chart gradient bug

Post by Yeray » 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
area.png (47.96 KiB) Viewed 18847 times
Note I've used useOrigin and origin properties to set the bottom of the gradient.
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » 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

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

Re: Area chart gradient bug

Post by Yeray » 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?
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » 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.

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

Re: Area chart gradient bug

Post by Yeray » 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):
1.png
before
1.png (29.2 KiB) Viewed 18802 times
2.png
after
2.png (30.02 KiB) Viewed 18805 times
So it seems to me that the gradient is kept after changing the axis scale.
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » 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.

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

Re: Area chart gradient bug

Post by Yeray » Thu Dec 03, 2015 3:11 pm

Hello,

Simplifying a test application to this:
test1.zip
(962 Bytes) Downloaded 674 times
I see two exact gradients at both sides:
gradients.png
gradients.png (21.59 KiB) Viewed 18777 times
Could you please modify the above example so we can see the problem here?
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » Tue Dec 08, 2015 1:21 pm

gradients.png
gradients.png (26.58 KiB) Viewed 18742 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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Area chart gradient bug

Post by Yeray » 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
area_gradient.png (26.88 KiB) Viewed 18726 times
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

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » 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.
Attachments
Untitled.png
Untitled.png (25.44 KiB) Viewed 18708 times

Post Reply