Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 16
  1. #1
    Join Date
    May 2014
    Posts
    9

    Default Integrate AmCharts Map to Xara Website

    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

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,748

    Info Re: Integrate AmCharts Map to Xara Website

    Quote Originally Posted by riskyraditya View Post
    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:
    1. 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.
    2. A container Placeholder with something like <div id="chartdiv" style="width: 100%; height: 100%;"></div>.
    3. 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.

    JS - AmCharts - simple demonstrator.xar

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #3
    Join Date
    May 2014
    Posts
    9

    Default Re: Integrate AmCharts Map to Xara Website

    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.
    AMmap Test.web

  4. #4
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: Integrate AmCharts Map to Xara Website

    The chart shows in Edge, IE and Opera but not in Chrome or FF. No idea why not.

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,748

    Default Re: Integrate AmCharts Map to Xara Website

    Quote Originally Posted by Boy View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    May 2014
    Posts
    9

    Default Re: Integrate AmCharts Map to Xara Website

    Everything is fine for web browser variant, but for mobile variant they are not showing
    can anyone help with this?
    Last edited by riskyraditya; 17 September 2020 at 10:04 AM.

  7. #7
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,748

    Default Re: Integrate AmCharts Map to Xara Website

    Quote Originally Posted by riskyraditya View Post
    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.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #8
    Join Date
    May 2014
    Posts
    9

    Default Re: Integrate AmCharts Map to Xara Website

    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

  9. #9
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,748

    Default Re: Integrate AmCharts Map to Xara Website

    Quote Originally Posted by riskyraditya View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #10
    Join Date
    May 2014
    Posts
    9

    Default Re: Integrate AmCharts Map to Xara Website

    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
    Last edited by riskyraditya; 17 September 2020 at 04:36 PM.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •