Hello, I use Xara Web Designer Premium 11,
Can anyone help me to give tutorial on how to integrate world map that can be found on AmCharts Map to Xara Web application.
Thanks in advance
Printable View
Hello, I use Xara Web Designer Premium 11,
Can anyone help me to give tutorial on how to integrate world map that can be found on AmCharts Map to Xara Web application.
Thanks in advance
I doubt few will be will to offer a tutorial.
How familiar are you with the use of Placeholders in XWDP11?
There are probably three aspects you will need:
- Adding CDN content into a Page HTML Code (Head) code area: https://www.amcharts.com/download/ > Use CDN - this is an example as you need the Maps module included.
- A container Placeholder with something like <div id="chartdiv" style="width: 100%; height: 100%;"></div>.
- The map/chart information added into the Page HTML Code (Body).
I have knocked up an example based on https://www.amcharts.com/docs/v4/get...tarted/basics/.
You can resize the Placeholder and the Chart works its magic to fit.
I know his is just for a Chart but the AmChart tutorials allow you to develop into Maps and fuller interaction.
All in all AmCharts seems a powerful package.
It is also nice that the AmCharts attribution is small and unintrusive in the free version; the cost for a single website is too rich for most.
:pointAttachment 127852
Acorn
Dear Acorn,
Thank you for your explanation
Really much appreciate with your help.
I have tried to follow it and works on Xara Web Designer.
Attachment 127861
The chart shows in Edge, IE and Opera but not in Chrome or FF. No idea why not.
Work here in all of Chrome, Firefox, IE, Opera & Edge.
Perhaps your browsers block third-party calls.
If I use the Xara Preview and launch a browser from there, the widget appears in http://localhost:8000/virt********/index.htm.
If I fire it from C:\Users\***\AppData\Local\Temp\Xara_XWDPV15_11865 \index.htm, the necessary JavaScript modules do not seem to get downloaded so the Placeholder can never get populated.
Same is happening with Export Website: file:///C:/Users/***/Desktop/test/index.htm.
Perhaps the CDN links recognise a local folder and does not perform.
The fix is to download the package and publish into your destination.
I imagine any location accessed through HTTP(S) will work.
Perhaps Xara can elaborate?
Acorn
Everything is fine for web browser variant, but for mobile variant they are not showing
can anyone help with this?
thanks for your reply,
how can I change the ID of placeholder, I already tried to create new rectangle as placeholder but still not showing the map
Clone the first placholder.
Open its HTML code (body): <div id="chartdiv" style="width: 100%; height: 100%;"></div>
Change to <div id="chartdivXYZ" style="width: 100%; height: 100%;"></div>
Open the Page/Website HTML code (body) and either duplicate the script, changing chartdiv to chartdivXYZ.
As I don't know if it is a second map, the same map or different data entirely, I have to leave all that to you as well as where and how you are storing data and code, together or separate.
Acorn
var chart = am4core.create("chartdivxyz", am4maps.MapChart);
this is the code in the page body, after I apply it in the mobile variant it works well, but in the web variant became not showing
after I checked it, the code in the web variant automatically change to chartdivxyz too.
still have no idea how to make the web variant and mobile variant have different div ID since it always change the same automatically