Save chart to image - background color issue

[SenSeo]

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?

[Yeray]

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 (150.95 KiB) Viewed 10655 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.

[SenSeo]

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]

Hello,

I'm glad to hear you found how to make it work as you wish.