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.Quote:
Originally Posted by riskyraditya
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.Quote:
Originally Posted by Boy
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?
for second and subsequent charts/maps on a page or Variant or Supersite, the ID of the Placeholder has to be different; this is an HTML language feature.Quote:
Originally Posted by riskyraditya
Acorn
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.Quote:
Originally Posted by riskyraditya
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
You've not done the first part.Quote:
Originally Posted by riskyraditya
Acorn
I still have no idea where did I miss
would you mind check my video to find where did I wrong
https://www.youtube.com/watch?v=OYS-...ature=youtu.be
All you are doing is overwriting the ID.Quote:
Originally Posted by riskyraditya
I said "Open the Page/Website HTML code (body) and either duplicate the script, changing chartdiv to chartdivXYZ."
Your body (code) will have two identical sets of JS other than the IDs being different.
Acorn
It's because you are 'sharing' the page between variants.
I don't know if there's an easier way, but I would copy the page > delete the shared page > paste the copied page back in place to break the sharing.
Here is anothr example, now I've had the time, to show how different presentations of a chart or map can be replicated on a page, variant or Supersite.
Each Placeholder is self-contained with libraries set up in the website code (head).
:pointAttachment 127899
Acorn
Thank you for the explanation, really appreciate. I understand now