I want to use the following cross-platform code to convert my Xojo Chart to a Picture. This works fine on Desktop, but WebChart.DrawInto(…) and MobileChart.DrawInto(…) are not available for Web/iOS.
Var tempPicture As New Picture(myChartXojo.Width, myChartXojo.Height)
myChartXojo.ChartXojo.DrawInto(tempPicture.Graphics, 0, 0)
How can I convert my WebChart and MobileChart into a Picture?
There is a Feature Request for WebChart:
Issue #72195
In the meantime, here is a way to do it (you can wrap it as an Extension). I’ve posted it a while back in this forum thread in the Spanish section.
Here is the code for a WebButton.Pressed event:
Var js() As String
js.Add("Chart.helpers.each(Chart.instances, (instance) => {")
js.Add(" var parent = instance.canvas.closest('.XojoCharts').id || '';")
js.Add(" if (parent === '" + Chart1.ControlID + "') {")
js.Add(" XojoWeb.session.storage.setItem('chart-png', instance.toBase64Image(), true);")
js.Add(" XojoWeb.session.storage.getItem('chart-png', true);")
js.Add(" }")
js.Add("});")
ExecuteJavaScript(String.FromArray(js))
You’ll have the picture available in the Session.RequestedData event:
Select Case Key
Case "chart-png"
Var imageData As String = DecodeBase64(Value.Replace("data:image/png;base64,", ""))
WebPage1.ImageViewer1.Picture = New WebPicture(imageData, "chart.png")
End Select
I hope that helps.
Hi @David_Cox
MobileUIControl lacks the DrawInto method that is available on the Desktop target.
Please, feel free to file a Feature Request to retrieve a Chart instance as Picture.
@Ricardo_Cruz I have this working, thank you.
@Javier_Menendez I have added a Feature Request:
going on with this, I want to build charts as pictures to embed them in a document
it seems I can dim c as desktopchart = new desktopchart
but I can’t do dim c as webchart = new webchart
the constructor method is protected. so a webchart can only be created in the ide ?
is this a bug or a feature ???
thanks.
WebCharts are browser side.
I’m not sure if it’s possible to get pictures from the browser reliably because it’s a security setting in Firefox for sure.
You’ll need something that draws a chart to an image like ChartDirectorMBS, since I don’t think you’ll be able to use DesktopChart in a web project.
seems you’re right
in a pdfdocument, you can’t add a webchart. so you can’t build a pdf with charts inside a web project ?
It would be a blow to quality if they brought the desktop implementation into web specifically for this purpose.
It is possible to have Chart.js generate an image of the chart and return it to the server. I thought that had already been implemented in Xojo’s native implementation…maybe an event? If not, I’d open a case.
Either way, you wouldn’t be able to just create a new WebChart and immediately get the image due to the asynchronous nature.
there should be a picturechart, that works on all platforms (may be not console but?)
they are using chartjs for the desktopchart ? so it is embedded in an htmlviewer then displayed ?
With all the half-effort on things lately I really don’t want them to implement their own.
DesktopChart is a custom implementation written in Xojo code. It is a canvas at it’s core.
You can create chart images with WebChart.ToPicture. The difference with DesktopChart is that the image will arrive in the RequestedPicture event.
