1. Miguel Leeuwe
  2. PowerBuilder
  3. Friday, 18 June 2021 12:08 PM UTC

Hi all,

[Edited, the link to Echarts was incorrect]

I've implemented the Apache E-charts in our application and have a problem with the Toolbox feature SaveAsImage.

It shows on the toolbox, but when I click on it, nothing happens and the toolbox disappears.

When I paste my options string in https://echarts.apache.org/examples/en/editor.html, it works perfectly fine.

The same thing happens with the Appeon demo that was made for the Google and Echarts: nothing happens (though at least the toolbox doesn't disappear).

Any ideas? Should I maybe specify a name for the saveas file, or should I explicitly set the echart's "renderer" property to 'canvas' or 'svg'? (I think it's 'canvas' by default).

TIA

This is the partial code:

.......,

toolbox:{
	left: 'center',
	feature: {
		dataZoom: {},
		saveAsImage: {},
		dataView: {},
		magicType: {
			type: ['line', 'bar', 'stack']
		}
	}
},

........
Accepted Answer
Miguel Leeuwe Accepted Answer Pending Moderation
  1. Friday, 18 June 2021 15:15 PM UTC
  2. PowerBuilder
  3. # Permalink

Ok,

I figured it out:

On Firefox, when using the echart's test site, I'm being prompted by Firefox what I want to do with the file.
Then I did the same test on Chrome and I was NOT prompted but the file went straight to my downloads folder.

Since the webbrowser control is Chrome-based, I tried specifying the filename and now it works. The image is being saved into the folder that I have set in the application's open event:

int li_ret
string ls_ret
li_ret = WebBrowserGet("UserAgent", ref ls_ret)
if ls_ret = "" then
	li_ret = WebBrowserSet("UserAgent", "AppeonWebBrowser")
	if li_ret <> 1 then
		Messagebox("Information", "Error setting the UserAgent for the WebBrowser", information!)
	end if
end if
li_ret = WebBrowserSet("DownloadPath", "c:\temp2")
if li_ret <> 1 then
	Messagebox("Information", "Error setting the DownloadPath for the WebBrowser", information!)
end if
li_ret = WebBrowserSet("allow-file-access-from-files", "true")
if li_ret <> 1 then
	Messagebox("Information", "Error setting the FileAccess for the WebBrowser", information!)
end if

 

In my "options" string I had "saveAsImage: {},", but that doesn't work. You have to specify a filename, so I've changed it to be:

....
saveAsImage: {
                name: "hello"
            },
.....

I'll find a file called C:\temp2\hello.png  :)

In my case there's no need for a path, since I've already set the DownLoadPath with WebBrowserSet and no need for a file extension, since by default the 'renderer' is set to 'canvas' (not 'svg') and the default extension would be 'png' in that case.

The toolbox does disappear temporarily (until I move the mouse), but that might be because it's overlaying my graph.

So now the only thing I have to do is try to figure out how to set 'renderer' to 'svg', but I think that would work, just have to check on to possible JS commands. (don't know if I have to include ".style" or not in of_apply() of the demo application made by Appeon).

I'll post it once I've checked on that, SVG graphics might be more useful than PNG or JPG.

Well problem solved!

Thanks Armeen!

Comment
  1. Armeen Mazda @Appeon
  2. Friday, 18 June 2021 15:19 PM UTC
Glad to hear problem solved, and thanks for explaining for the rest of the community's benefit!
  1. Helpful
  1. Miguel Leeuwe
  2. Friday, 18 June 2021 15:24 PM UTC
That's what this community is for ! Thank you.
  1. Helpful
There are no comments made yet.
John Fauss Accepted Answer Pending Moderation
  1. Thursday, 3 November 2022 20:50 PM UTC
  2. PowerBuilder
  3. # 1

Hi, Miguel -

Were (or are) you able to have ECharts in the PB Web Browser control successfully save a .png or .jpg file using the "canvas" renderer? I am unable to get this to work. I can save a .svg format image file using the ECharts "svg" renderer, but I cannot get the canvas renderer to perform a saveAsImage.

I'm setting the download path with the WebBrowserSet function when the app opens (and this works for .svg's), and I'm able to set the name of the image file when constructing the JavaScript (again, this works for .svg's).

When the canvas renderer is being used and I click on the "Save as Image" toolbox icon, the entire toolbox disappears and never re-appears until I create a new chart (rebuild the "option" JavaScript variable, dispose of the old chart and issue the JavaScript to display the new chart). When using the svg renderer, the toolbox/icons momentarily disappear, but do come back after the .svg file has been created.

What are the names of the ECharts libraries you use? I'm using the echarts.js and echarts-gl.js JavaScript files.

One additional ECharts question topic: Printing. Are you printing ECharts from the Web Browser control? If so, do you create a print job, use the Print function of the Web Browser control, then close the print job? Any suggestions/ideas how to do this would be very much appreciated.

Thank you! -John

Comment
  1. John Fauss
  2. Friday, 4 November 2022 17:24 PM UTC
You specify it as in the following snippet:

toolbox: { show: true, orient: 'horizontal', itemsize: 10,

feature: { dataZoom: { show: true }, dataView: { show: true },

saveAsImage: { show: true, name: 'YourFileNameGoesHere', type: 'jpg' } } }
  1. Helpful 1
  1. John Fauss
  2. Friday, 4 November 2022 22:59 PM UTC
I need to clarify my earlier comment: The saved ECharts image will be saved into your Downloads folder when an ECharts HTML file/page is displayed in the Chrome Browser. This does NOT occur when using the PB Web Browser control in PB 2019 R3. However, I have verified that setting a path in the WB_DownloadsPath setting via the WebBrowserSet PowerScript function when the application starts does indeed work.
  1. Helpful 1
  1. Miguel Leeuwe
  2. Saturday, 5 November 2022 15:48 PM UTC
Thanks a lot John!
  1. Helpful
There are no comments made yet.
Miguel Leeuwe Accepted Answer Pending Moderation
  1. Friday, 18 June 2021 16:02 PM UTC
  2. PowerBuilder
  3. # 2

I also figured out how to save the image in SVG format.

In the Appeon Demo for echarts, there's an "of_apply()" function.

What you have to do:

	//v3, mjl, 17/06/21: set renderer to 'svg' or 'canvas':
	string ls_renderer = "{renderer: 'svg'}" // or 'canvas' which is the default
//	ls_JS = "myChart = echarts.init(document.getElementById('main'),'"+is_Theme+"');"
	ls_JS = "myChart = echarts.init(document.getElementById('main'),'"+is_Theme+"', " + ls_renderer +");"
	li_return = This.EvaluateJavaScriptSync( ls_JS, ls_Result, ls_Error )
	If li_Return <> 1 Then
		MessageBox ( "EvaluateJavaScriptSync Error", ls_Error + "~r~nJavaScript:" + ls_JS )
		Return -1
	End If

 

Comment
There are no comments made yet.
Armeen Mazda @Appeon Accepted Answer Pending Moderation
  1. Friday, 18 June 2021 14:39 PM UTC
  2. PowerBuilder
  3. # 3

Hi Miguel, Is there something about your environment/config?  Can you try testing on other compares?  The reason I say this is because the demo apps have the same problem.  

Comment
  1. Miguel Leeuwe
  2. Friday, 18 June 2021 14:44 PM UTC
The other features DO work, like dataView, etc.
  1. Helpful
  1. Armeen Mazda @Appeon
  2. Friday, 18 June 2021 14:46 PM UTC
I didn't write clearly. You said you have same problem with the demo apps but the same demo apps work for us. So that's why I think might be environment/config issue.
  1. Helpful
  1. Miguel Leeuwe
  2. Friday, 18 June 2021 15:01 PM UTC
Thank you Armeen,

I already figured it out: See my last answer.
  1. Helpful
There are no comments made yet.
  • Page :
  • 1


There are no replies made for this question yet.
However, you are not allowed to reply to this question.