Amcharts graph - Hyperlink for chart columns to custom URLs to open in a new tab/window

Question

I am trying to make a amcharts graph with columns linked to custom urls and want the urls to open in a new tab/window. I tried adding this code to the graph object but it does not work, it is opening link in same tab/window -

"listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],

Please tell what I am doing wrong. I do not want to use Jquery and I am new to javascript.

This is my snippet -

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "country": "USA",
    "visits": 2025,
    "url": "https://en.wikipedia.org/wiki/United_States"
  }, {
    "country": "China",
    "visits": 1882,
    "url": "https://en.wikipedia.org/wiki/China"
  }, {
    "country": "Japan",
    "visits": 1809,
    "url": "https://en.wikipedia.org/wiki/Japan"
  }, {
    "country": "Germany",
    "visits": 1322,
    "url": "https://en.wikipedia.org/wiki/Germany"
  }, {
    "country": "France",
    "visits": 1114,
    "url": "https://en.wikipedia.org/wiki/France"
  }, {
    "country": "India",
    "visits": 984,
    "url": "https://en.wikipedia.org/wiki/India"
  }, {
    "country": "Spain",
    "visits": 711,
    "url": "https://en.wikipedia.org/wiki/Spain"
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],
    "urlField": "url"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
 width: 100%;
 height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

If you assign `window.open()` to a `var` then *(as long as you have CORS access)* you can do like `newWindowVar.document.getElementById()` and the like. Or you could make a link to the specific page and use `target='_blank'`. Remember to remain compliant with XHTML you would want to assign the target attribute with JavaScript. — StackSlave, Oct 23 '17 at 21:48
@PHPglue What is CORS access ? Can you try on this snippet or on this jsfiddle - https://jsfiddle.net/1ayr47bx/1/ — user20152015, Oct 23 '17 at 21:50
Cross-Origin Resource Sharing. If you are creating both pages on the same domain, you shouldn't have to worry about it. If not in you would need permission from the other site to use JavaScript from your site on theirs. — StackSlave, Oct 23 '17 at 21:52
@PHPglue I am very new to Javascript. That is why I have put the full snippet / jsfiddle. Can you please edit and show the working method in an answer ? — user20152015, Oct 23 '17 at 21:55

score 2 · Accepted Answer · answered Oct 24 '17 at 03:24

You can use urlTarget such as:

var chart = AmCharts.makeChart("chartdiv", {
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "urlField": "url",
    "urlTarget": "_blank"
  }],
  ...
};

StackSlave · Answer 2 · 2017-10-23T22:39:44.660

0

Change

"listeners": [{
      "event": "clickItem",
      "method": function(event) {
window.open(event.serialDataItem.dataContext.url, '_blank');
      }
    }],

to

listeners:[{
  event:'clickItem',
  method:function(event){
    open(event.item.url, '_blank');
  }
}]

edited Oct 23 '17 at 22:39

answered Oct 23 '17 at 22:26

StackSlave

10,613
2
18
35

I changed this in the Amcharts API code (Please see snippet in my question). But it still opens custom url in same tab/window on clicking on the column – user20152015 Oct 23 '17 at 22:34

Amcharts graph - Hyperlink for chart columns to custom URLs to open in a new tab/window

2 Answers2

Linked