How to reference a variable in an array of JavaScript objects when executing event listener clickGraphItem using amCharts

0
votes

I currently have an array of JavaScript objects called chartData with country and visits as variables. I'm leveraging amCharts to graph the data in a column chart and using an event handler to trigger an alert message of both the country (event.item.category) and visits (event.item.values.value), depending on the column that is clicked and everything works fine (see handleClick function below). Per the below code, I added an additional variable to my chartData JavaScript objects called id. How do I access my new variable id in my handleClick event function.

amCharts JavaScript Code

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 440px; background-color:#eeeeee;"></div>

var chart;

var chartData = 
[{
    country: "USA",
    visits: 4025,
    id: 1},
{
    country: "China",
    visits: 1882,
    id: 2},
{
    country: "Japan",
    visits: 1809,
    id: 3},
{
    country: "Germany",
    visits: 1322,
    id: 4},
{
    country: "UK",
    visits: 1122,
    id: 5}];


function handleClick(event)
{
    alert(event.item.category + ": " + event.item.values.value);
}


AmCharts.ready(function() {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.startDuration = 1;


    // add click listener
    chart.addListener("clickGraphItem", handleClick);


    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 90;
    categoryAxis.gridPosition = "start";


    var graph = new AmCharts.AmGraph();
    graph.valueField = "visits";
    graph.balloonText = "[[category]]: [[value]]";
    graph.type = "column";
    graph.lineAlpha = 0;
    graph.fillAlphas = 0.8;
    chart.addGraph(graph);

    chart.write("chartdiv");
});

JsFiddle http://jsfiddle.net/amcharts2/cV8GG/

1
javascriptamcharts
Hi, can you add your sample on codepen.io/pen or jsfiddle please? – heralight
@heralight it's always preferable to post an example here as a runnable snippet – VLAZ
What is the output of alert? If you use console.log(), it will be better to debug. – Vipin Yadav
My use case is pretty self explanatory. I added an extra variable called id to my javascript object array and I need to access it. Can't located applicable documentation on amCharts. – C. Gary
@VLAZ, I did not know this option of Stackoverflow, very good thing! – heralight

1 Answers

3
votes

You can see the id in event.item.dataContext

function handleClick(event)
{
    console.log(event.item.dataContext.id);
    alert(event.item.category + ": " + event.item.values.value);
}