3D Pie chart using teechart with three.js WebGL™ 3D

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

3D Pie chart using teechart with three.js WebGL™ 3D

Post by SenSeo » Mon Sep 19, 2016 9:25 am

Hi,
I have created 3D pie chart using three.js WebGL. But my pie chart does not looks as i expected. I have attached my working copy and expected pie chart image in below attachment.
And please provide appropriate sample code for 3D pie chart for my expected pie chart image as i have attached here.
Attachments
3D pie chart.zip
(413.32 KiB) Downloaded 1011 times

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

Re: Export as HTML5 JScript

Post by Yeray » Mon Sep 19, 2016 10:58 am

Hello,
SenSeo wrote:I have created 3D pie chart using three.js WebGL. But my pie chart does not looks as i expected. I have attached my working copy and expected pie chart image in below attachment.
And please provide appropriate sample code for 3D pie chart for my expected pie chart image as i have attached here.
I'm not sure if this has any relation with the opening question in this thread. If not, I'll split it into a new thread.

This is what I'm getting with your code example:
chrome_2016-09-19_12-57-40.png
chrome_2016-09-19_12-57-40.png (58.4 KiB) Viewed 16776 times
Could you please explain what didn't you expect from it?
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

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: 3D Pie chart using teechart with three.js WebGL™ 3D

Post by SenSeo » Tue Sep 20, 2016 3:48 am

Hello,
This question is not relevant to Export as HTML5 JScript. Please split it into a new thread.
I have attached my expected 3D pie chart image for your reference. Please provide sample code for this attached 3D pie chart image with right alignment legend.
Attachments
3D Pie expected.PNG
3D Pie expected.PNG (80.56 KiB) Viewed 16763 times

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

Re: 3D Pie chart using teechart with three.js WebGL™ 3D

Post by Yeray » Tue Sep 20, 2016 11:02 am

Hello,

Using this code:

Code: Select all

var three, Chart1;

function draw() {

    three = new Tee.Three("canvas1");
    Chart1 = new Tee.Chart(three);

    var pie1 = new Tee.Pie();
    pie1.title = "Apples";
    pie1.data.values = [15, 17, 12, 19, 30, 41];
    pie1.data.labels = ["jan", "feb", "mar", "apr", "may", "jun"];
    pie1.marks.style = "label";
    pie1.marks.transparent=true;

    Chart1.addSeries(pie1);

    three.floor.visible = false;
    three.renderer.setClearColor( 0xffffff );
    Chart1.title.visible = false;

    Chart1.legend.position = "right";

    if (three.isEnabled()) {
        changeTheme(Chart1, "minimal");
        Chart1.draw();
        animate();
    }
    else {
        // Show message (WebGL not available) :
        Detector.addGetWebGLMessage();

        // Disable WebGL and use HTML5 2D Canvas:
        three.setEnabled(false, Chart1);
    }

    // Loop
    function animate() {
        three.update();
        requestAnimationFrame(animate);
    }
}
I get this:
chrome_2016-09-20_13-02-08.png
chrome_2016-09-20_13-02-08.png (57.62 KiB) Viewed 16755 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

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: 3D Pie chart using teechart with three.js WebGL™ 3D

Post by SenSeo » Wed Sep 21, 2016 1:31 pm

Hello,
Is there any posibility to generate 3D pie chart as attached image(3D Pie chart).?
My requirment is 1.Chart title on top 2.Legend in right side 3.Tooltip with proper alignment 4. 3D pie chart with attached image view
Attachments
3D Pie expected.PNG
3D Pie expected.PNG (80.56 KiB) Viewed 16751 times

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

Re: 3D Pie chart using teechart with three.js WebGL™ 3D

Post by Yeray » Thu Sep 22, 2016 8:47 am

Hello,
SenSeo wrote:1.Chart title on top
Removing this line of code in the code I posted above makes the title to appear:

Code: Select all

Chart1.title.visible = false;
SenSeo wrote:2.Legend in right side
The legend is already in the right side in the chart I attached in my last post.
SenSeo wrote:3.Tooltip with proper alignment
Do you mean the series marks? We use call Tooltip to a text appearing when the user moves the mouse over a series.
Feel free to override the drawMarks function to do what you want. Ie, override it leaving it as it is:

Code: Select all

    pie1.drawMarks=function() {
        var endAngle=Math.PI*this.rotation/180.0, angle=endAngle, mid,
                v=this.data.values, len=v.length, index, t,
                center={x:0,y:0}, r=new Rectangle(), total=ArraySumAbs(this.data.values),
                sorted=this.doSort(this.sort, this.orderAscending), f=this.format;

        var h=0, m=this.marks;

        if (f.shadow.visible)
            h+=2*f.shadow.height;

        if (m.visible) {
            m.format.font.prepare();
            h+=m.format.textHeight("Wj")+m.arrow.length*0.5;
        }

        this.cellRect(r,!this.concentric, Tee.Pie);
        var radius = r.width*0.5;
        var r2=(r.height-2*h)*0.5;
        if (r2<0) r2=0;
        if (r2<radius) radius=r2;

        var piex=r.x+(r.width*0.5);
        var piey=r.y+(r.height*0.5);

        this.marks.format.z = 0.5;

        for(t=0; t<len; t+=this.marks.drawEvery) {

            index= sorted ? sorted[t] : t;

            if (!this.isNull(index)) {
                endAngle+=Math.PI*2*(Math.abs(v[index]) /total);
                mid=(angle+endAngle)*0.5;
                center.x=piex;
                center.y=piey;
                this.calcCenter(t,radius,mid,center);
                this.marks.drawPolar(center, radius, mid , index);
                angle=endAngle;
            }
        }
    }
SenSeo wrote:4. 3D pie chart with attached image view
The view you attached looks like a 3D Chart in TeeChart VCL/NET/ActiveX where the perspective is drawn calculating the polygons internally. These 3D effects are good enough for the majority of cases, but can give wrong results in a few situations. Ie:
http://bugs.teechart.net/show_bug.cgi?id=935
http://bugs.teechart.net/show_bug.cgi?id=939

In TeeChart Javascript we haven't implemented these 3D effects for the moment. Instead of this, as you've observed, we are using WebGL for the 3D, that gives a similar result to OpenGL in the other TeeChart versions.
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