Save chart to image - background color issue

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

Save chart to image - background color issue

Post by SenSeo » Tue May 03, 2016 11:28 am

I used the below line to save generated chart to image. I was able to generate a chart success, but applied background color and format is not displayed with series in the image. Please refer the attached screenshot.

Code: Select all

 Chart1.toImage('pngimage', 'image/png');
Below is the code that we used to apply the background color and format the report.

Code: Select all

 var myFormatTargetRangeLow = new Tee.Format(Chart1);
            myFormatTargetRangeLow.stroke.fill = "#95CE39";
            myFormatTargetRangeLow.stroke.size = 2;
            //myFormatTargetRangeLow.stroke.dash = [3, 3];
            myFormatTargetRangeLow.gradient.visible = true;
            myFormatTargetRangeLow.gradient.colors = ["#95CE39"];
            myFormatTargetRangeLow.transparency = 0.4;

            Chart1.series.items[0].beforeDraw = function () {
                //Set background color for Below Alarm threshold. Red
                var xBelowAlarm1 = Chart1.axes.bottom.startPos,
                    yBelowAlarm1 = Chart1.axes.left.calc(response.data.MaxBelowAlarm),
                    xBelowAlarm2 = Chart1.axes.bottom.endPos,
                    yBelowAlarm2 = Chart1.axes.left.calc(response.data.MaxBelowAlarm);
                // X,Y, Width, Height
                myFormatBelowAlarm.rectangle(xBelowAlarm1, yBelowAlarm1, xBelowAlarm2 - xBelowAlarm1, yBelowAlarm2 - yBelowAlarm1);

                //Set background color for Above Alarm threshold. Red
                var xAboveAlarm1 = Chart1.axes.bottom.startPos,
                    yAboveAlarm1 = Chart1.axes.left.calc(response.data.MinAboveAlarm),
                    xAboveAlarm2 = Chart1.axes.bottom.endPos,
                    yAboveAlarm2 = Chart1.axes.left.calc(response.data.MinAboveAlarm);
                // X,Y, Width, Height
                myFormatAboveAlarm.rectangle(xAboveAlarm1, yAboveAlarm1, xAboveAlarm2 - xAboveAlarm1, yAboveAlarm2 - yAboveAlarm1);

                //Set background color for Low Target range. Green
                var xTargetRangeLow1 = Chart1.axes.bottom.startPos,
                    yTargetRangeLow1 = Chart1.axes.left.calc(response.data.MinLowTargetRange),
                    xTargetRangeLow2 = Chart1.axes.bottom.endPos,
                    yTargetRangeLow2 = Chart1.axes.left.calc(response.data.MaxLowTargetRange);
                // X,Y, Width, Height
                myFormatTargetRangeLow.rectangle(xTargetRangeLow1, yTargetRangeLow1, xTargetRangeLow2 - xTargetRangeLow1, yTargetRangeLow2 - yTargetRangeLow1);

                }
Does it require to write additional code to bring the background color and format of the chart to an image?
Attachments
Teechart_Save Image issue1.png
Teechart_Save Image issue1.png (208.39 KiB) Viewed 868 times

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

Re: Save chart to image - background color issue

Post by Yeray » Wed May 04, 2016 7:40 am

Hello,

I've done a simple example with just a Tee.Line series and the javascript chart looks the same than the png image:
png.png
png.png (150.95 KiB) Viewed 838 times
Note I've drawn a zoom rectangle with the mouse in the javascript chart to see a difference with the png image chart.

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 Image Please read our Bug Fixing Policy

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

Re: Save chart to image - background color issue

Post by SenSeo » Wed May 04, 2016 11:22 am

We have fixed this issue now. We have called a method "beforeDraw()" before tooltip functionality. Earlier the "beforeDraw()" method is called after Tooltip functionality.

Thanks.

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

Re: Save chart to image - background color issue

Post by Yeray » Wed May 04, 2016 12:58 pm

Hello,

I'm glad to hear you found how to make it work as you wish.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply